Hello,
is there a possibility to render optgroups in an igCombo control? multiSelection should work too.
similar to standard html select optgroup: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup
or similar to select2 control: http://ivaynberg.github.io/select2/#basics
kind regards.
Hello maxschaf,
Thank you for posting in our community.
What I can suggest for achieving your requirement is using conditional templates for the items of the igCombo. Conditional templates allow you to customize the look and feel based on some condition. For example in your scenario, you could use the value of the igCombo elements to mark which of them will be used as group headers and which will be elements. The value of the element could be checked and if the value is corresponding to a header, a style for headers could be applied and vice versa, if the value is corresponding to an element, a style for elements could be applied. For example:
<script type="text/javascript"> $(function () { var cars = [ //elements with value 1 will be used for group headers and elements with value 2 will be used for group items { "Name": "Ford", "Value": 1 }, { "Name": "Focus", "Value": 2 }, { "Name": "Escort", "Value": 2 }, { "Name": "Opel", "Value": 1 }, { "Name": "Corsa", "Value": 2 }, { "Name": "Astra", "Value": 2 } ]; $("#comboIG").igCombo({ dataSource: cars, textKey:"Name", valueKey: "Value", width: "270px", multiselction: "on", itemTemplate: "{{if${Value} == 1}} <b>${Name}</b> {{else}} <div class='padding'>${Name}</div> {{/if}}" }); }); </script>
<script type="text/javascript">
$(function () {
var cars = [
//elements with value 1 will be used for group headers and elements with value 2 will be used for group items
{
"Name": "Ford",
"Value": 1
},
"Name": "Focus",
"Value": 2
"Name": "Escort",
"Name": "Opel",
"Name": "Corsa",
"Name": "Astra",
}
];
$("#comboIG").igCombo({
dataSource: cars,
textKey:"Name",
valueKey: "Value",
width: "270px",
multiselction: "on",
itemTemplate: "{{if${Value} == 1}} <b>${Name}</b> {{else}} <div class='padding'>${Name}</div> {{/if}}"
});
</script>
Some further reference about Infragistics Templating Engine could be found at:
http://help.infragistics.com/Help/Doc/jQuery/2012.1/CLR4.0/html/Templates_Overview.html
Please let me know if you need any further assistance with this matter.
hi, I'm sorry, I did not have time to implement your solution approach into our framework yet, I will try it next week.
Thank you for getting back to me.
I hope my suggestion will help you achieve your requirement.
Please let me know if you need any further assistance with this matter after trying my approach in your application.
this is no real solution, please fill a feature request to add optgroup to igCombo the way everybody is used to it using default html control.
Kind regards.
What I can suggest is submitting a new product idea for future versions at http://ideas.infragistics.com.
There are many benefits to submitting a product idea:
- Direct communication with our product management team regarding your product idea.
- Notifications whenever new information regarding your idea becomes available.
- Ability to vote on your favorite product ideas to let us know which ones are the most important to you. You will have ten votes for this and can change which ideas you are voting for at any time.
- Allow you to shape the future of our products by requesting new controls and products altogether.
- You and other developers can discuss existing product ideas with members of our Product Management team.
Steps to create your idea:
The Product Idea site puts you in the driver’s seat and allows you to track the progress of your ideas at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you.
Thank you for using Infragistics components.
done.
http://ideas.infragistics.com/forums/211535-ignite-ui/suggestions/6626573-add-optgroup-to-igcombo