Kendo UI Grid ASP.NET MVC - UI Weird

Question

Well I'am using Kendo UI grid inside an ASP.NET MVC Application. My goal is to remove some items on a filter A when a particular javascript event is raised by another filter B.

So, I've started with setting up a custom UI for my column CategoryId :

 @(Html.Kendo().Grid(Model.Items)
                  .Name("grid")
                  .Columns(columns =>
                  {
    ....
     columns.ForeignKey(p => p.CategoryId, Model.Categories, "CategoryId", "CategoryName")
    .Filterable(filterable => filterable.UI("categoryFilter")));
    ....
}

Somewhere before the above I've defined my javascript UI function :

function categoryFilter(element) {
    console.log('Kendo UI will never run me '); // Unreachable part
    element.kendoAutoComplete({
        dataSource: customDataSource, 
        optionLabel: "--Select Value--"
    });
}

Kendo grid never call function categoryFilter , nevertheless an error is raised by kendo when I try to use an invalid function name, eg :

....
// Kendo raise an error here
.Filterable(filterable => filterable.UI("functionWitchDoesntExist")));
....

Question : What have I miss to make my UI filter work?

Another solution for my issue is if I can just get by jQuery the existing filter. Something like :

$('#grid').find('.kendoautocompletefilter').options('.....')

Answer 1

you can use the databound event:

Events(Function(o) o.DataBound("YourFunction")

and add or remove filter in the javascript:

YourFunction function (yourValues)
{
    var filter = {
        logic: "or",
        filters: []
    };

    filter.filters.push(
        { field: "Status", operator: "contains", value: yourValues },
        { field: "PriorityLevelDisplayText", operator: "or", value: yourValues},

    );

    myGrid.dataSource.filter([filter]);
};