Filtering Components Independently that Use a Shared DataSource

Environment

Product Version	2023.2.829
Product	DataSource for ASP.NET MVC

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.

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")
        ...
    )

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>

Filtering Components Independently that Use a Shared DataSource

Environment

Description

Solution

More ASP.NET MVC DataSource Resources

See Also

Getting Started

Support Resources

Community