Question

下面是将multiselect与kendo ui过滤器行集成的示例。 http://dojo.telerik.com/eriMA

<div id="grid"></div>        
<script>
          $("#grid").kendoGrid({
            autoBind:true,
              columns: [
                {
                    field: "color",
                    filterable: {
                        cell: {
                            template: function (args) {
                                // create a MultiselectList of unique values (colors)
                                 args.element.kendoMultiSelect({
                                    dataSource: args.dataSource,
                                   dataTextField: "color",
                                    dataValueField: "color",
                                    valuePrimitive: true,
                                 //  tagMode: true
                                });                            
                            },
                            showOperators: false
                        }
                    }
                },
                { field: "age" } ],
            filterable: { mode: "row" },
            dataSource: { data: [ { color: "#ff0000", age: 30 }, { color: "#000000", age: 33 }], requestStart: onRequestStart }});

      function onRequestStart(e){
      var filter = e.sender.filter();
            if (filter && filter.filters && filter.filters.length > 0) {
                var filter1 = filter.filters;
                for (var i = 0; i < filter1.length; i++) {
                    if (filter1[i].field == "color" && filter1[i].value) {
                        var colorList = filter1[i].value.split(",");
                        if (colorList.length > 0) {
                            var newFilter = { logic: "or", filters: [] };
                            for (var k = 0; k < colorList.length; k++) {
                                newFilter.filters.push({ field: "color", operator: "eq", value: colorList[k] });
                            }
                            filter1 = filter1.splice(i, 1, newFilter);
                            e.preventDefault();
                            e.sender.filter(filter);
                        }
                    }
                }
            }
      }
    </script>

现在，我想为网格设置默认过滤器。为此，我创建了另一个样本。 http://dojo.telerik.com/eriMA/2 但不幸的是，如果网格dataSource数据最初为空，则多选值将以第一个值重置。但是，数据已正确过滤。有人可以帮助克服这个限制。

Answer 1

我已经确定，如果dataSource是emtpy，那么在dataBound事件之后，过滤器单元会被清除。所以我使用超时设置值。这是更新源的链接。 http://dojo.telerik.com/eriMA/7

<div id="grid"></div>
<script>
  var colorMulti = null;
  var grid = $("#grid").kendoGrid({
        autoBind:false,
          columns: [
            {
                field: "ShipCity",
                filterable: {
                    cell: {
                        template: function (args) {
                            // create a MultiselectList of unique values (colors)
                             colorMulti =args.element.kendoMultiSelect({
                                dataSource: {data : ["Lyon","Graz","Bern"]},
                               valuePrimitive: true,
                             //  tagMode: true
                            }).data("kendoMultiSelect");                            
                        },
                        showOperators: false
                    }
                }
            },
            { field: "OrderID" } ],
        filterable: { mode: "row" },
        dataSource: {
                            type: "odata",
                            transport: {
                                read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        Freight: { type: "number" },
                                        ShipName: { type: "string" },
                                        OrderDate: { type: "date" },
                                        ShipCity: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 20,
                                            requestStart:onRequestStart
                        },
        dataBound: onDataBound
      }).data("kendoGrid");

  function onRequestStart(e){
  var filter = e.sender.filter();
        if (filter && filter.filters && filter.filters.length > 0) {
            var filter1 = filter.filters;
            for (var i = 0; i < filter1.length; i++) {
                if (filter1[i].field == "ShipCity" && filter1[i].value) {
                    var colorList = filter1[i].value.split(",");
                    if (colorList.length > 0) {
                        var newFilter = { logic: "or", filters: [] };
                        for (var k = 0; k < colorList.length; k++) {
                            newFilter.filters.push({ field: "ShipCity", operator: "eq", value: colorList[k] });
                        }
                        filter1 = filter1.splice(i, 1, newFilter);
                        e.preventDefault();
                        e.sender.filter(filter);
                    }
                }
            }
        }
  }
  function onDataBound(e){
  var multiSelectValue = [];
        var filter = grid.dataSource.filter();
        if (filter && filter.filters && filter.filters.length > 0) {
            var filter1 = filter.filters;
            for (var i = 0; i < filter1.length; i++) {
                if (filter1[i].field == "ShipCity" && filter1[i].value) {
                    multiSelectValue.push(filter1[i].value);

                } else if (filter1[i].filters && filter1[i].filters.length > 0 && filter1[i].logic == "or") {
                    var filter2 = filter1[i].filters;
                    var multiSelectValue = [];
                    for (var j = 0; j < filter2.length; j++) {
                        if (filter2[j].field == "ShipCity") {
                            multiSelectValue.push(filter2[j].value);
                        }
                    }
                }
            }
        }
        setTimeout(function () { colorMulti.value(multiSelectValue) });
  }
  $(document).ready(function () {     
        grid.dataSource.filter({ "filters": [{ "operator": "eq", "value": "Lyon,Graz,Bern", "field": "ShipCity" }], "logic": "and" });
    });
</script>

在行过滤器中使用Multiselect，kendo ui grid

1 个答案: