Filtering Components Independently that Use a Shared DataSource

Environment

Product Version	2023.2.829
Product	DataSource for ASP.NET MVC

Description

By design, the components that bind to a shared DataSource listen for the change event of the DataSource and refresh automatically when it fires. As a result, when filtering one of the components, the rest of the components will rebind and display the filtered data, as well.

How can I filter the components that use a shared DataSource independently?

Solution

The example below shows how to bind two Grids to the same DataSource and allow the user to filter them independently.

1. Create an additional DataSource for each Grid that is not bound to data and has an initial filter criteria:

       @(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.ProductViewModel>()
           .Name("mainDS")
           .Ajax(dataSource => dataSource
               .Read(read => read.Action("Products_Read", "Grid"))
               .ServerOperation(false)
           )
       )
   
       @(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.ProductViewModel>()
           .Name("dataSourceGrid1")
           .Ajax(dataSource => dataSource
               .Filter(filters =>
               {
                   filters.Add(product => product.Discontinued).IsEqualTo(true);
               })
               .ServerOperation(false)
           )
       )
   
       @(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.ProductViewModel>()
           .Name("dataSourceGrid2")
           .Ajax(dataSource => dataSource
               .Filter(filters =>
               {
                   filters.Add(product => product.Discontinued).IsEqualTo(false);
               })
               .ServerOperation(false)
           )
       )
   
       @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
           .Name("grid1")
           .AutoBind(false)
           .DataSource("dataSourceGrid1")
           ...
       )
   
       @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
           .Name("grid2")
           .AutoBind(false)
           .DataSource("dataSourceGrid2")
           ...
       )
   

2. Within the $(document).ready() function, access the main DataSource and handle once its requestEnd event to access the data when it is received from the server. Use the data() method to set the received data to the additional DataSources that are used by the Grids.

   <script>
       $(document).ready(function () {
           mainDS.read();
           mainDS.one("requestEnd", function (e) {
               if (e.response.Data.length > 0) {
                   dataSourceGrid1.data(e.response.Data); // Set the received data to the DataSource of "grid1".
                   dataSourceGrid2.data(e.response.Data); // Set the received data to the DataSource of "grid2".
               }
           });
       });
   </script>
   
   

More ASP.NET MVC DataSource Resources

• ASP.NET MVC DataSource Documentation

• ASP.NET MVC DataSource Demos

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the DataSource for ASP.NET MVC

• Server-Side API Reference of the DataSource for ASP.NET MVC

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base