passing multiple filter values to a grid.datasource

[John]

Hi there, 

I am trying to filter my grid using 2 dropdownlists in the toolbar template section of the grid. I have been able to copy the example http://demos.telerik.com/aspnet-mvc/grid/toolbar-template which works absolutely fine and I have also been able to replicate the code for another dropdownlist but they are performing separate filtering.

I would like to be able to filter by one dropdownlist and then filter the results of that filter by the next dropdownlist.

the grid code I currently have is:

.ToolBar(toolbar =>
              {
              toolbar.Template(@<text>
        <div class="toolbar">
            <label class="site-label" for="site">Show reports by site:</label>
            @(Html.Kendo().DropDownList()
                                .Name("sites")
                                .OptionLabel("All")
                                .DataTextField("SiteName")
                                .DataValueField("ClientSiteId")
                                .AutoBind(false)
                                .Events(e => e.Change("sitesChange"))
                                .DataSource(ds =>
                                {
                                    ds.Read("ToolbarTemplate_Sites", "Report");
                                }))
        </div>
<div class="new-toolbar">
    <label class="type-label" for="type">Show reports by type:</label>
    @(Html.Kendo().DropDownList()
                .Name("type")
                .OptionLabel("All")
                .DataTextField("StockTypeName")
                .DataValueField("StockTypeId")
                .AutoBind(false)
                .Events(e => e.Change("typesChange"))
                .DataSource(ds =>
                {
                    ds.Read("ToolbarTemplate_Types", "Report");
                }))
</div>
            </text>);
              })

 

// the Script

    function sitesChange() {
        var value = this.value(),
grid = $("#grid").data("kendoGrid");
        if (value) {
            grid.dataSource.filter({ field: "ClientSiteId", operator: "eq", value: parseInt(value) });
        } else {
            grid.dataSource.filter({});
        }
    }

    function typesChange() {
        var value = this.value(),
grid = $("#grid").data("kendoGrid");
        if (value) {
            grid.dataSource.filter({ field: "StockTypeId", operator: "eq", value: parseInt(value) });
        } else {
            grid.dataSource.filter({});
        }
    }

Any help would be greatly appreciated.

Regards

[Rosen]

Hello John,

You should combine the values of the both DropDownLists into a composite filter descriptor. Similar to the following:

      function change() {

      var filters = [];
          var grid = $("#grid").data("kendoGrid");

 

      var type = $("#type").getKendoDropDownList().value();

       

      var city =  $("#cites").getKendoDropDownList().value();

       

      if (city) {

        filters.push({ field: "ClientSiteId", operator: "eq", value: parseInt(city) });

      }

       

      if (type) {

        filters.push({ field: "StockTypeId", operator: "eq", value: type });

      }

       

      grid.data("kendoGrid").dataSource.filter({

          logic: "and",

          filters: filters

        });

    }

 

Regards,
Rosen
Telerik

[John]

Hi Rosen,

Thank-you very much for the reply.

I have now successfully managed to get this to work after making a couple of changes to your posted code.

Kind Regards

John

[Benjamin]

@Rosen - thank you for your solution BUT

I think a part of your solution needs to be replaced...instead of using:

grid.data("kendoGrid").dataSource.filter({<br>          logic: "and",<br>          filters: filters<br>        });

use:

grid.dataSource.filter({            <br>            logic: "and",<br>            filters: filters<br>        });

 

Kind regards,

Benjamin

[Rosen]

Hello Benjamin,

Indeed, you are correct.

Regards,
Rosen
Telerik