Grid with Ajax DataSource and custom filter operator function not refreshing

[Troy]

I have a Grid created with an ASP.NET partial view:

   @(Html.Kendo().Grid<MyApp.ViewModels.ComponentDisplayInfo>()

        .Name("component_template_grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name);
            columns.Bound(c => c.Description);

        })
        .Scrollable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("ComponentAdmin_Read", "Home"))
            .PageSize(20)
        )

)

there is also a text input users can type into to change the filter values, and I bind the change event on this to:

 

    componentGridFilterInput(e: JQueryInputEventObject) {

        let filters = [];
        let name_input = $("#component_name").val();
        if (name_input.length > 0)
            filters.push({ field: "Name", operator: (item, value) => this.filterFunction(item, value), value: name_input });

        let grid_table = $("#component_template_grid").data("kendoGrid");
        grid_table.dataSource.filter({ logic: "and", filters: filters });
    }

this.filterfunction() is:

    filterFunction(item: string, value: string): boolean {

        let test = item.indexOf(value);

        return test > -1;
    }

the problem is the grid is not updated with this filtering, the filter function is not even called once.

but, if I replace the functional operator for the filter with:

            filters.push({ field: "Name", operator: "contains", value: name_input });

this is working as expected.

Additionally, if on page load I replace the grid's datasource with:

            let grid_table = ("#component_template_grid").data("kendoGrid");

            grid_table.setDataSource(new kendo.data.DataSource({
                    data: [
                        { Name: "Test 1", Description: "Test 1" },
                        { Name: "Test 2", Description: "Test 2" }
                    ]
             }));

 

the functional filter is working as expected.

Only the combination of the functional filter + ajax datasource isn't re-filtering the table when I programmatically change the filter after the table is displayed ...

Thanks for any help.

[Troy]

            let grid_table = ("#component_template_grid").data("kendoGrid");

should be 

            let grid_table = $("#component_template_grid").data("kendoGrid");

in the above.

[Troy]

            let grid_table = ("#component_template_grid").data("kendoGrid");

should be

 

            let grid_table = $("#component_template_grid").data("kendoGrid");

in the above.