Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1115
igCombo: define optgroups
posted

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.

Parents
  • 17590
    Offline posted

    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>

    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.

Reply Children