New to Telerik UI for ASP.NET Core? Download free 30-day trial

Filtering Components Independently that Use a Shared DataSource

Environment

Product Version 2023.2.829
Product DataSource for ASP.NET Core

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")
            ...
        )
    
        @addTagHelper *, Kendo.Mvc
    
        <kendo-datasource name="mainDS" type="DataSourceTagHelperType.Ajax" server-operation="false">
            <transport>
                <read url="@Url.Action("Products_Read", "Grid")" />
            </transport>
        </kendo-datasource>
    
        <kendo-datasource name="dataSourceGrid1" type="DataSourceTagHelperType.Ajax" server-operation="false">
            <filters>
                <datasource-filter logic="and">
                    <filters>
                        <datasource-filter field="Discontinued" operator="eq" value="true"></datasource-filter>
                    </filters>
                </datasource-filter>
            </filters>
        </kendo-datasource>
    
        <kendo-datasource name="dataSourceGrid2" type="DataSourceTagHelperType.Ajax" server-operation="false">
            <filters>
                <datasource-filter logic="and">
                    <filters>
                        <datasource-filter field="Discontinued" operator="eq" value="false"></datasource-filter>
                    </filters>
                </datasource-filter>
            </filters>
        </kendo-datasource>
    
        <kendo-grid name="grid1" datasource-id="dataSourceGrid1" auto-bind="false">
            ...
        </kendo-grid>
    
        <kendo-grid name="grid2" datasource-id="dataSourceGrid2" auto-bind="false">
            ...
        </kendo-grid>
    
  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 Core DataSource Resources

See Also

In this article