Filter feature doesn't work for value mapped to 0

[Cantaloupe Developer]

Here is demo code:

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category", values: [
      { text: "Beverages", value: 1 },
      { text: "Food", value: 2 },
      { text: "Filter not working value", value: 0 }
    ] }
  ],
  dataSource: [
    { productName: "Tea", category: 1 },
    { productName: "Ham", category: 2 },
    { productName: "Bread", category: 0 }
  ],
  filterable: true
});
</script>

 

Replication steps:open filter menu for "category" column and pick "Filter not working value" (very important that it's value = 0)

Actual result:grid is empty

Expected result: grid is filtered to have the only row with product name "Bread"

 

Please help me understand what I'm doing wrong or confirm that it's a bug.

[Stefan]

Hello Igor,

The result is not displayed correctly because the 0 is handled in a special way in JavaScript. In this scenario, the Kendo UI Grid is trying to check if the number 0 is equal to the string '0'.

There are three possible options to resolve the issue:

- Specify that the category field is of type number in the schema configuration of the DataSource. It is always recommended to define the data type of all non-string fields so that sorting and filtering work correctly.

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema

- Use string values for the category field.

- Use non-zero values for the category field.

If you have any other questions on this matter, do not hesitate to ask.

Regards,
Stefan
Telerik

 

 

[Mark]

Hello Stefan,

even we are facing similar type of issue can you please let us know how we can resolve the issue.
Below is the piece of code and filter.

Code:

BulkTaggingDataSource.read().then(function () {
  var filter = {};
  if ($("#FoodGrid").data("kendoGrid").dataSource.filter()) {
       filter.filter = $("#FoodGrid").data("kendoGrid").dataSource.filter();
  }
  var query = kendo.data.Query.process(BulkTaggingDataSource.read.data(), filter);
  $.each(query.data, function (index, content) {
         $.each(query.data, function (index, content) {
if ($.inArray(content.id, checkedIds) < 0) {
    checkedIds[content.id] = state;
}
         })
   })
});

Filter which we get from $("#FoodGrid").data("kendoGrid").dataSource.filter(): is 

 

In our case if the {field: 'TotalHours', operator: 'eq', value: '0'} if the filter value is '0'
we get the query.data as empty array and we wont get the expected result.

and filter will work if the {field: 'TotalHours', operator: 'eq', value: '5'}

we are facing issue only for '0' filter. and in schema we have declared 'TotalHours' as number.

 

CC: @Stefan  

 

                              

[Georgi Denchev]

Hi, Mark,

Thank you for the provided code snippets and screenshot.

Based on what I am able to observe, there seems to be a problem with the schema configuration because the value is still in string format instead of number.

I've modified the example from the initial post with a working schema,  you can take a look at it here:

https://dojo.telerik.com/@gdenchev/oCIyEteL 

Best Regards,

Georgi

[Cantaloupe Developer]

Thanks, schema works perfectly.