passing multiple filter values to a grid.datasource

5 posts, 1 answers
  1. John
    John avatar
    2 posts
    Member since:
    Aug 2015

    Posted 29 Sep 2015 Link to this post

    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

  2. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 01 Oct 2015 Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. John
    John avatar
    2 posts
    Member since:
    Aug 2015

    Posted 01 Oct 2015 Link to this post

    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

  5. Benjamin
    Benjamin avatar
    1 posts
    Member since:
    Jan 2014

    Posted 18 May in reply to Rosen Link to this post

    @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

  6. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 18 May Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready