How to filter the kendo ui grid with multi selection of dropdownlist with checkbox plugin

2
votes

Given http://jsfiddle.net/MG89G/271/ my issue is filtering the Kendo UI grid after the checkboxes changed in dropdownlist with multi selection. I want to filter the grid with orderID.

  I got the solution with single selection http://jsfiddle.net/schapman/HyHZG/5/.

But how do I do it with multi selection dropdownlist?

4
javascripthtmlkendo-ui

4 Answers

1
votes

You can integrate the same approach within the Grid with a small tweak to remove the data-bind attribute.

Here is an example.

0
votes

The kendo team has added a new MultiSelect box. Here is a sample of filtering a grid using one.

http://jsbin.com/ameyam/1/edit

0
votes

I create this one:

var dropdown = $(selector).kendoDropDownList({
                    template: $("#general-templates .multiselect-item").html(),
                    select: function(e)
                    {
                        var dropdownlist = this;

                        var dataItem = this.dataItem(e.item.index());
                        if(dataItem.value==="")
                        {
                            e.item.closest("ul").find("span").each(function(){
                                $(this).css("display","none");
                            });
                            dropdownlist.text(dataItem.text);
                            dropdownlist.element.closest(".field-group").find("input[type='hidden']").val("");
                            return;
                        }

                        if(e.item.find("span").css("display")==="none")
                            e.item.find("span").css("display","");
                        else
                            e.item.find("span").css("display","none");                

                        var values = [];
                        var labels = [];
                        e.item.closest("ul").find("span").each(function(){

                            if($(this).css("display")==="none")
                                return;

                            values.push($(this).attr("data-value"));
                            labels.push($(this).parent().text());

                        });

                        if(values.length===0)
                            labels.push(e.item.closest("ul").find(".dropdownlist-item:first").text());

                        dropdownlist.element.closest(".field-group").find("input[type='hidden']").val(values.join(","));

                        setTimeout(function(){
                            dropdownlist.value("999");
                            dropdownlist.text(labels.join(","));
                        },50);
                    }
            }).data("kendoDropDownList");

        var select = dropdown.wrapper.find("select");
        dropdown.wrapper.append("<input type='hidden' class='filter' value='' data-field='{0}' data-operator='{1}'>".format(select.attr("data-field"),select.attr("data-operator")));