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,
Please let me know if you need any further assistance with this matter.
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