This is a migrated thread and some comments may be shown as answers.

passing multiple filter values to a grid.datasource

4 Answers 620 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 29 Sep 2015, 11:39 AM

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

4 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 01 Oct 2015, 06:47 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
John
Top achievements
Rank 1
answered on 01 Oct 2015, 08:19 AM

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

0
Benjamin
Top achievements
Rank 1
answered on 18 May 2016, 11:36 AM

@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

0
Rosen
Telerik team
answered on 18 May 2016, 11:48 AM

Hello Benjamin,

Indeed, you are correct.

Regards,
Rosen
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Rosen
Telerik team
John
Top achievements
Rank 1
Benjamin
Top achievements
Rank 1
Share this question
or