如何使用复选框插件多选下拉列表来过滤kendo ui网格

时间:2013-02-05 05:34:27

标签: javascript html5 kendo-ui

鉴于http://jsfiddle.net/MG89G/271/,我的问题是在复选框更改后过滤Kendo UI网格 多选的下拉列表。我想用orderID过滤网格。

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

但是我如何使用多选下拉列表呢?

4 个答案:

答案 0 :(得分:1)

您可以使用小调整在Grid中集成相同的方法,以删除data-bind属性。

Here is an example

答案 1 :(得分:0)

剑道团队添加了一个新的MultiSelect框。以下是使用一个过滤网格的示例。

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

答案 2 :(得分:0)

我创建了这个:

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")));

答案 3 :(得分:0)