Add item for null / undefined values to ASP.NET Core Grid Filter Multi Checkboxes

[David]

Hi,

We have a Kendo Grid bound to a ViewModel with a string value that can be null. If we use NullValueHandling.Include in our MVC project Startup NewtonsoftJson.SerializerSettings:

.AddNewtonsoftJson(o =>
{
    o.SerializerSettings.ContractResolver = new DefaultContractResolver();
    o.SerializerSettings.NullValueHandling = NullValueHandling.Include;
})

this results in the null value being included in the Grid Multi Filter (see attached). If we use NullValueHandling.Ignore, this results in no value being included in the Grid Multi Filter and we can't filter on empty values. This seems odd, as the Grid is bound to a ViewModel which has the property declared on it. In KendoReact Grids, the value is correctly included in the Grid Multi Filter as 'undefined'  when using NullValueHandling.Ignore e.g. https://stackblitz.com/edit/react-ycmafw?file=app%2Fproducts.json.

1. Is there any way to force the ASP.NET Core Grid to include the property as undefined?
2. If not, is there any way to add a custom item to the Grid Multi Filter list that will match undefined values?

Kind regards,

David

[Georgi]

Hi David,

Both `null` and `undefined` are not very expressive to nontechnical people. So I wouldn't recommend relying on any of them.

The MVC grid gives you the option to supply a DataSource for the checkbox items as shown in the following demo:

• https://demos.telerik.com/aspnet-mvc/grid/filter-multi-checkboxes

This gives you the flexibility to create a custom null record with a more self-explanatory label like "empty".

I hope this helps.

[Mark]

Hi Georgi,

This feels like a bug to me, as our models are correctly returning an 'undefined' or 'null' value in our result. The multi picker is simply ignoring these and not providing the option to users.

I can assure you, our users are more upset the 'null' option has disappeared and they have to find the data manually!

Supplying the data source for hundreds of columns on our grids is going to be very time consuming.

Note, the demo also contains a bug where the filter multi picker values are not sorted. Check the sample where there are numeric values presented. We have a javascript work-around attached to every grid that fixes the sort order.

Can you think of any good work-arounds for this situation? Or could a fix be made to the grid to properly pick up the 'null' / 'undefined' values and include them as a blank option in the picker? Bonus points for allowing 'null' / 'undefined' values to have a default value that we can supply - such as 'empty' or 'unknown'!

[Georgi]

Hi David,

Before proceeding to a workaround, please share your current configuration with us. This thread is labeled as UI for ASP.Net Core, but the supplied example uses the Kendo React library to configure the grid. It is essential to know which exact is used, as they don't share the same codebase for the grid.

[David]

Hi Georgi,

We are using Telerik UI for ASP.NET Core version 2023.2.606, and we would like either a bug raised to fix the issue in Telerik UI for ASP.NET Core or a suitable workaround. As stated in the original post, the KendoReact example was provided to show you that undefined is correctly presented in Grid Multi filters there.

Kind regards,

David

[Alexander]

Hi David,

My name is Alexander and I will be currently taking hold of the current thread.

I have gone through the established communication with my colleague Georgi thus far in order to get more familiar with the current subject matter.

Generally, both the default and Newtonsoft JSON serializer incarnations will output a null the instant it encounters one and will make no attempt to process it.

Nonetheless, I understand the importance this may have for you. Thus, I pondered over any potential customary alternatives that may achieve the desired outcome as well as prevent code repetition - when larger portions of columns are integrated into the Grid.

Please allow me to share a potential alternative in a more step-like manner:

• Create a predefined array that will contain the column field names that will utilize a multi-checkbox filter. Note that providing the array is open to experimentation but it would be up to the developer to do so based on his requirements:
  

var nullableFields = ["ShipName", "ShipCity"]

• Subscribe to the FilterMenuOpen event which will be fired once the grid filter menu is opened:
  

.Events(events => events.FilterMenuOpen("onFilterMenuOpen"))

• Within the handler, assert whether the given field supplemented in the event data is persistent in the previously defined array. From there, obtain the data source in the filterMenuInit for the checkboxes and change the "<li>" element that contains null as textual content programmatically:
  

<script>
    var nullableFields = ["ShipName", "ShipCity"]


    function onFilterMenuOpen(e){
        if (nullableFields.indexOf(e.field) != -1) { // Assert whether the current field is within the nullableFields array.
            var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck"); // Gather the filter multi check widget reference.

            var pristineData = filterMultiCheck.dataSource._pristineData; // Gather the raw data of the filter multi check widget.

            var li = $(filterMultiCheck.container).find("li"); // Get the <li> elements.

            $(li).each((index, element) => { // Traverse through each of the <li> elements.
                var span = $(element).find("span"); // Find the <span> element that contains the textual content.

                if($(span).text() == "null"){ // Based on the assertion, alter the textual content.
                    $(span).text("Empty");
                }

            })
        }
    }
</script>

The aforementioned approach would then produce the following result within the filter menu:

Another alternative would be to translate null values to a plain string by using implementing a custom JsonConverter to control the serialization (and deserialization) process of an object. However, this is generally considered a custom approach and it would be up to the developer to provide such an implementation on his application premises. Nevertheless, I have found the following article that could potentially prove helpful:

• Handling Null And Empty Strings With System.Text.Json

For your convenience, I am also attaching a runnable sample for you to review that tackles the initially recommended approach.

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

[Mark]

Thanks for this Alexander.

The ability to detect null/undefined and replace it with a more friendly Empty option is interesting. Would that work if run on FilterMenuInit?

We already have call in place based on:
https://www.telerik.com/forums/validation-for-new-record-in-batch-edit-grid

It's a shame all of this is not out of the box behaviour.

[Alexander]

Hi Mark,

In general, the FilterMenuInit event will be only when the filter menu is initially instantiated. In the context of the previously mentioned approach, this will not be applicable as the text needs to be changed each time the filter menu is opened.

You can try the previous suggestion my colleague Georgi mentioned in his previous reply which involves the incorporation of a DataSource mediator that will be primarily responsible for fetching the checkbox items. However, I am not completely certain if this might be applicable to your scenario if large portions of columns would have to utilize this.

Nevertheless, if you consider this a feasible feature that should be introduced in our suite, I would recommend logging a feature request within our Feedback Portal:

https://www.telerik.com/support/feedback

In general, feature requests are prioritized based on the community interest, demand, and severity. And based on those factors, is therefore considered for future implementation.

[David]

Hi Alexander,

I appreciate all the suggestions so far, however I believe we haven't had the original question answered. Using the KendoReact Grid as an example only:

• If I set the ProductName of one of the product objects to null, then 'null' is included in the ColumnMenuFilter and can be used to filter that product in the Grid: https://stackblitz.com/edit/react-hiemep?file=app%2Fproducts.json
• If I remove the ProductName of one of the product objects completely, then 'undefined' is included in the ColumnMenuFilter and can be used to filter that product in the Grid: https://stackblitz.com/edit/react-ycmafw?file=app%2Fproducts.json

So the question remains: why isn't 'undefined' included in the ASP.NET Core Grid Multi Filter if an object doesn't have a property, even though the Grid is bound to a ViewModel which has the property declared on it? I would like to raise this as a bug. I don't believe your argument that "Both `null` and `undefined` are not very expressive to nontechnical people" is valid given that the KendoReact Grid functions perfectly in this way, and our users are very comfortable with this terminology.

We use a mixture of Telerik UI for ASP.Net Core and KendoReact in our system so it's disappointing that they don't behave in a consistent manner.

[Alexander]

Hi David,

I completely understand your concerns and I am sorry to hear that the disparity between the suites may prove counter-productive from a developers standpoint. Given the fact, that customary client or server-side interventions should be aditionally implemented.

Without further delay this matter, I have further addressed your concerns to our respective developer subject matter experts. In order to ensure that your point of you is taken into account.

After further discussion, I have logged an enhancement item within our public repository for the inclusion of such functionality for the MultiCheckBoxes in the Grid. The reason for the item being marked as "enhancement" is solely related to the fact this is a behavior expected from clients rather than a bug that is currently breaking the Grid's built-in functionalities.

Here is the GitHub issue for you to track additionally:

• https://github.com/telerik/kendo-ui-core/issues/7453

Feel free to give any further details regarding the subject if you find it plausible.

For additionally bringing this to our attention, I have also updated your Telerik points as a token of appreciation.