Dynamic Filter with logic "or" not working

[Christy]

I have 2 comboboxes that will be used to filter data in a kendo grid.  I am trying to filter the second combobox's data based on the selection from the first combobox.  Both comboboxes retrieve their data from Angular service methods.  The data is an array, and then I add an extra record at the beginning of each array in case no filter is requested.  In the select option of the first combobox, I have a method that will place a filter on the second combobox's dataSource.  It requires two filters due to including the extra record.  I have included an "or".  However, when I run the code, my filter is showing up with an "and".  Is it not possible to use two filters that filter on different fields with an "or"?

I am including the important parts of the code below. I was trying to follow the examples, but it just seems to use "and" for my filter.  

Thanks for any assistance on this!!

myService.availableCategories.get(
    null,
    function (data) {
        var results = data.results;
        results.unshift({
            categoryID: 0,
            categoryName: "All",
            sortOrder: 0
        });
        vmFilters.categoryOptions = {
            dataSource: new kendo.data.DataSource({
                data: results
            }),
            dataTextField: "categoryName",
            dataValueField: "categoryID",
            filter: 'contains',
            value: vmFilters.selectedCategory,
            select: function (e) {
                var dataItem = this.dataItem(e.item.index());
                onCategorySelect(dataItem.categoryID);
            }
        };
    },
    function (error) {
        console.log(error);
    });

myService.availableOptions.get(
    null,
    function (data) {
        vmFilters.optionListAll = data.results;

        var initialItem = {
            optionID: 0,
            optionName: "All"
            categoryID: 0
        };
        vmFilters.optionListAll.unshift(initialItem);
        vmFilters.optionOptions = {
            dataSource: new kendo.data.DataSource({
                data: vmFilters.optionListAll
            }),
            dataTextField: "optionName",
            dataValueField: "optionID",
            value: vmFilters.selectedOption
        };
    },
    function (error) {
        console.log(error);
    });


function onCategorySelect(categoryID) {
    if (categoryID !== 0) {
      vmFilters.optionOptions.dataSource.filter({
          logic: "or",
          filters: [
           { field: "categoryID", operator: "eq", value: categoryID },
           { field: "optionID", operator: "eq", value: 0 }
           ]
      });
    } else {
        vmFilters.optionOptions.dataSource.filter({});
    }
    vmFilters.optionOptions.dataSource.read();
    console.log(vmFilters.optionOptions.dataSource);
}

[Boyan Dimitrov]

Hello Christy,

Actually there is built-in functionality Cascading ComboBoxes that comes with Kendo UI ComboBox. The cascading ComboBox is a series of two or more ComboBoxes in which each ComboBox is filtered according to the selected options in the previous ComboBox.

If this is what you are trying to achieve I would suggest to use the information provided in the article instead of writing custom filtering code. 

Regards,
Boyan Dimitrov
Telerik

 

 

[Christy]

That should work really well if I can tweak the filters a little.  

1. I need to have all of the children show if the parent has "All" selected (so no filter on the child then).  
2. I need to have the option of "All" always show as if it is an option.  I tried a placeholder, but once they select something, they can never go back to the placeholder it seems.  

For the first issue, I started without cascadeFrom assigned and then assign it in the select function of the parent.  This also allows me to set the placeholder on the child so that it starts with "All" showing, even though this is not technically an option.  That worked really well for showing everything initially and then filtering.  Unfortunately, I can't figure out how to remove the cascadeFrom when the user selects "All" again in the parent.  I have tried setting it to both null and an empty string, but neither works.  

For allowing the user to reselect "All" (or remove selection), I don't see how I can do this.  It just seems to disappear once the first selection is made.  Is there a way to allow a user to unselect what was selected?    

I feel as if I'm really close to an answer on this, but just can't get the complex filtering I need.  Is there a way to do this with the cascading comboboxes?  I noticed there was a cascade option which allows a function, but I have found no examples of what the function can do.

Thanks!

[Christy]

I figured out a work-around for this case.  The data comes from vmFilters.optionListAll, which is set up already so that the first item is always the 'All' item.  If I just change the categoryID of the first item to that of the selected item in the onCategorySelect method, I can eliminate the second filter and the 'All' optionOption will still appear at the top of the child list.

Thanks for your help!