Forums Ignite UI for jQuery
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
Close
Mark Turner
20
Multi select combo with checkboxes
posted

We have a need for the use of checkboxes in a igCombo to allow the user to select a number items. However, is it possible to select and deselect a checkbox when the text label next to the checkbox is clicked instead of just selecting that item in the igCombo and removing all other items from the list of selected items? We would like the clicking on the text next to the checkbox to behave in the same way as clicking on the checkbox.

Thanks

  • 775
    Suggested Answer
    posted

    Hello Mark,

        Yes, it is possible to achieve such functionality. What you need to do is just make the igCombo to select multiple items, add an item template for the check boxes and handle the selection in the 'selectionChanged' event. Here is an example:

                $("#combo").igCombo({
                    multiSelection: true,
                    filteringType: "local",
                    renderMatchItems: "contains",
                    responseDataKey: "d.results",
                    valueKey: "Name",
                    width: "300px",
                    dataSource: "http://labs.infragistics.com/igniteui/api/employees?callback=?",
                    itemTemplate: "<input class='cBox' type='checkbox'/><span>${Name}</span>",
                    selectionChanged: function(evt, ui) {
                            $(".cBox").click(function() { return false; });

                            if(ui.items) {
                                $("input[type='checkbox']").removeAttr('checked');
                                for(var i = 0; i < ui.items.length; i++) {
                                    var name = ui.items[i].value;
                                    $("span:contains('" + name + "')").prev()[0].checked = true;
                                }
                            }
                        }
                });

       

    The important things here are three: 

     - first, make sure the 'multiSelection' option is set to 'true';

     - next, add an 'itemTemplate' with the check boxes: "<input class='cBox' type='checkbox'/><span>${Name}</span>", where ${Name} is the property from the data source;

     - finally, and the most interesting part is adding the custom code for the 'sectionChanged' event. From the code sample above, you can see that the first thing you need to do is to cancel the check boxes click event handling. This is necessary, because if you don't do that you will get an undesirable behavior when you click the check boxes. The next thing is to find all selected item, through the 'ui.items' collection and mark the check boxes as 'checked'.

    If you have some questions, please don't hesitate to ask.

    Hope this will help you,

    Martin Stoev