Grid with Ajax DataSource and custom filter operator function not refreshing

3 posts, 0 answers
  1. Troy
    Troy avatar
    5 posts
    Member since:
    Oct 2015

    Posted 18 Jan 2017 Link to this post

    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.

  2. Troy
    Troy avatar
    5 posts
    Member since:
    Oct 2015

    Posted 18 Jan 2017 in reply to Troy Link to this post

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

    should be 

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

    in the above.

  3. Troy
    Troy avatar
    5 posts
    Member since:
    Oct 2015

    Posted 18 Jan 2017 in reply to Troy Link to this post

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

    should be

     

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

    in the above.
Back to Top