Using FilterMenuInit causes cannot read properties of null in Kendo Grid

[Monty]

We're using Kendo Grids for our .NET Core application. We display checkbox lists in the column headers so the user can filter in the Kendo Grid. The problem is that the items in these checkbox list are not sorted (even if we pass sorted items to it).

We tried to add a fix by adding the following FilterMenuInit client side event to try to sort the checkbox list column header items

function onFilterMenuInit(e) {
        var filterMultiCheck = this.thead.find("[data-field='" + e.field + "']").data("kendoFilterMultiCheck");

        if (filterMultiCheck) { 
            filterMultiCheck.container.empty();
            filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" });
            filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
            filterMultiCheck.createCheckBoxes();
        }
}

The fix is causing the following issue:

VM4956:3 Uncaught TypeError: Cannot read properties of null (reading 'Id')
    at eval (eval at filter (kendo.min.js:9:168981), <anonymous>:3:25)
    at r.filter (kendo.min.js:9:169113)
    at r.process (kendo.min.js:9:171128)
    at init._queryProcess (kendo.min.js:9:190070)
    at init.query (kendo.min.js:9:191247)
    at init._query (kendo.min.js:9:191778)
    at init.filter (kendo.min.js:9:192662)
    at init._filter (kendo.min.js:9:918467)
    at HTMLFormElement.r (website.min.js:14:21692)
    at HTMLFormElement.dispatch (website.min.js:14:57771)

 

This is happening on the Kendo side. Is this a bug? Is there an alternative way to sort these checkbox list in the column headers?

[Alexander]

Hi Monty,

Thank you for reaching out and for taking the time to share the relevant information on your end, it is greatly appreciated.

I noticed that there is not a Telerik UI for ASP.NET Core license associated with your account which limits the availability of our support services for the product. In this regard, It is recommended that you either purchase or renew your license in order to gain access to the latest updates, fixes, features, and support regarding the Telerik UI for ASP.NET Core components. More information regarding the currently available plans can be reviewed here:

• Support Plans

That being said, I noticed the current implementation follows an approach identical to that of the following knowledge base article:

• Sort Multiple Checkbox Filter - Kendo UI for jQuery

Having this in mind, at first glance, I did not see anything obvious within the Grid's configuration that could potentially cause the sporadic behavior from occurring. Thus, could you please consider sharing additional details about the current Grid configuration at your end? For example, a code snippet would be beneficial for the case.

Nevertheless, if the server-side implementation is used, then it is important to specify the data source for the multi-checkbox in order for the sort to work out. Similar to the following example:

• Grid Filter Multi Checkboxes Demo - open the "View Source" tab to see the Grid's configuration

The highlight snippet would be:

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

Alternatively, we also have a dedicated knowledge base article that tackles how the MultiCheckBox filters can be sorted particularly for the Telerik UI for ASP.NET Core suite that can be found here:

• Sort the Grid MultiCheck Filter Items - Telerik UI for ASP.NET Core

The approach used within the article relies on the specification of a DataSource for the filtering of an arbitrary column whilst configuring the sort option of the DataSource. Here is an example:

View:

columns.Bound(p => p.Freight).Filterable(ftb =>
{
    ftb.Multi(true);
    ftb.Search(true);
    ftb.CheckAll(true);
    ftb.DataSource(dataSource => dataSource
        .Custom()
        .Transport(t => t.Read("FreightData", "Grid"))
        .Sort(sort =>                                     
        {                                                        
            sort.Add("Freight").Descending();
        })                                                       
      );
});

Controller Action:

public ActionResult FreightData()
{
  var result = gridDataCollection.GroupBy(p => p.Freight).Select(grp => grp.FirstOrDefault()); // Creates a projection over the specified group whilst returning a new set of elements.
  return Json(result);
}

Nevertheless, I am also attaching a runnable Telerik REPL example used for testing purposes that tackles the approach mentioned within the first linked knowledge base article for the "ProductName" field. If the above does not help, it would also be really helpful if you consider replicating the observed error within the example and send it back for further observation:

• Telerik REPL for ASP.NET Core Example

Please give the above suggestions a try and let me know how it works out for you.

Kind Regards,
Alexander
Progress Telerik