Using Multiselect in row filter, kendo ui grid

Question

Below is a sample of integrating multiselect with kendo ui filter row. 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>

Now, I want to set a default filter for the grid. For that I have created another sample. http://dojo.telerik.com/eriMA/2 But unfortunately, if the grid dataSource data is initially empty, the multiselect value gets reset with first value. However, the data is filtered correctly. Can somebody help to overcome this limitation.

Answer 1

I have identified that somehow the filter cell get cleared after the dataBound event, if the dataSource is emtpy. So I set the value back using a timeout. here is the link to updated source. 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>