I am looking for a help where I need to recreate the options for column filter values when the data on left hand side filter changes?

I have a drop down list country on left hand side and when ever user select the country the column(region), filter (custom filter, based on column on the grid) all the checkboxes for the custom filter should reflect the region as per the country selected.

When I select a filter dropdown value, it gets populated into other filter fields as well.

I have checked my grid configurations, but couldn't figure our what issue is there.

PS: The attachment is an GIF screen recording of the issue.

We are facing filter issue on Kendo Grid when filter value is mapped to 0, below is the piece of code.

(We are applying existing filters to the new datasource to get the expected result)

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.

Kindly let us know how to fix this issue.