Kendo Grid MVC - column with multi checkbox filter enabled not loading for large dataset

[Karthik]

hi,

When Multi checkbox column is enabled in MVC Kendo Grid, it keeps spinning and not loading filter checkboxes for large dataset.
Please find the sample code attached.

We use Kendo.Mvc, Version=2022.1.412.0.
This sample code uses lesser version.

@(Html.Kendo().Grid<TelerikMvcApp6.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity).Filterable(f => f.Multi(true).Search(true));
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )

Regards

Karthik

[Ivan Danchev]

Hello Karthik,

You can't use Filter Multi for such a large dataset, because in order to get the data and display the checkboxes, the Grid sends a request to the Orders_Read action. If you check the browser devtools Network tab, you will see that this request fails with:

500 Internal Server Error

And the response contains the following message:

Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.

This is because the request is so big that it exceeds the limit of the MVC framework. Since the request fails and the data never reaches the Grid, it shows a loading icon.

The Grid itself is capable of binding to large data, because it uses paging. So even if you you have 5 mln records on the server, with paging enabled, the Grid will request only the data for the current page. However, the Filter Multi option does not use paging. So all the items are requested and this causes the issue described above. We would recommend disabling Filter Multi in such scenarios.

Regards,
Ivan Danchev
Progress Telerik

[Karthik]

hi Ivan Danchev,

Thanks for confirming issue with Muti checkbox filter column for large dataset. Its a shame we can't use it out of box. Could you let me know an alternate approach for this scenario?

Perhaps, I was wondering, having a datasource defined for each multi checkbox filter column to talk to an api endpoint and getting just the filter values for that column might help? Do you have any sample code for this approach?

Regards

Karthik

[Ivan Danchev]

Karthik,

See this demo: https://demos.telerik.com/aspnet-mvc/grid/filter-multi-checkboxes

The bottom Grid has DataSource configured in the Filterable configuration of its columns, for example:

 columns.Bound(e => e.Country).Width(220).Filterable(ftb => ftb.Multi(true).ItemTemplate("itemTemplate")
                    .DataSource(ds => ds.Read(r => r.Action("Unique", "Grid").Data("{ field: 'Country' }")))
                );

The filter will send requests to the specified action ("Unique") and pass the field the columns is bound to to the action. In the example above "Country".

However, even with this approach you could hit the limitations of the framework, if the data you return is huge.

You can review the configuration of the Grid and the actions that it calls in the demo's View Source tab.