Kendo grid custom filter data is not persisting across result pages, for column with .Filterable(true)

[J]

Hello,

I have a Kendo grid with multiple columns, and only one of the columns has .Filterable(true). When the filter icon above this column is clicked, a custom filter menu pops up. This menu has fields to set the filter data for multiple columns all at once, and then a "Filter" button which sets the datasource filter data to these specifications.

This filtering is working correctly, however the issue is, when going to another page in the results, the column with .Filterable(true) has its filter data removed from the request that is sent to the Controller. All other columns have their filter data persisted across the pages, just not the one with .Filterable(true). This is the case for whichever column is given this attribute.

For example, if I have Column2 set to .Filterable(true), then filter Column2's data and click "Filter", the correct filtered results are populated in the grid. But after clicking to another page of the results, the results reset and no longer filter Column2's data. It also stays like this when clicking back to page 1.

When looking at the DataSourceRequest object passed to the Controller method that gets the grid results, I can see the filter data for this column is there after clicking the "Filter" button. But after clicking to another page in the results, the request object sent to the Controller method no longer has this column included in its filter data.

 

Any idea why this is happening or how to resolve?

I've included some code for the grid, the custom filter menu function, and the controller method. Please let me know if anything else is needed, thank you.

 

.cshtml Grid Code

    @(Html.Kendo().Grid<Model>()
    .Name("MyGrid")
    .HtmlAttributes(new { style = "height: 400px;font-size:12px;" })
    .Columns(columns =>
    {
        columns.Bound(m => m.Column1).Title("Column1").Width(90).Filterable(false);
        columns.Bound(m => m.Column2).Title("Column2").Width(90).Filterable(true);
        columns.Bound(m => m.Column3).Title("Column3").Width(90).Filterable(false);

    . . .

    })
            .Sortable()
            .AutoBind(false)
            .Pageable(p => p
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
            .Scrollable()
            .Filterable(f => f
                        .Mode(GridFilterMode.Menu)
                        )
            .Events(e => e
                .FilterMenuInit("OnFilterMenuInit")
            )
        .Resizable(rs => rs.Columns(true))
        .Navigatable()
        .Selectable(s => s
           .Mode(GridSelectionMode.Single)
           .Type(GridSelectionType.Row))
        .NoRecords("No Records!")
        .DataSource(ds => ds
            .Ajax()
            .Model(m=> m.Id(p => p.id))
            .PageSize(10)
                    .Read(read => read.Action("GetData", "Test").Data("{arg1: " + 1 + ", arg2:'testarg'}"))
            .Update(upd => upd.Action("EditData", "Test"))
            .Events(e => e.RequestEnd("onRequestEnd").Error("error_handler"))
            .ServerOperation(true))

 

 

.js OnFilterMenuInit function:

function OnFilterMenuInit(e) {

    e.container
      .empty()
        .append($('<div class="row"><div class="col-md-2"><span>Column1: </span></div><div class="col-md-1"><input id="col1-operators" /></div><div class="col-md-4"><input id="col1-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col1-logic" /> </div> </div>\
<div class="row"><div class="col-md-2"><span>Column2: </span></div><div class="col-md-1"><input id="col2-operators" /></div><div class="col-md-4"><input id="col2-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col2-logic" /> </div> </div>\
<div class="row"><div class="col-md-2"><span>Column3: </span></div><div class="col-md-1"><input id="col3-operators" /></div><div class="col-md-4"><input id="col3-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col3-logic" /> </div> </div>\
<div class="row"><div class="col-md-4"> <button type="submit" class="k-button k-primary" id="filter">Filter</button> </div><div class="col-md-4"><button type="reset" class="k-button" id="clear">Clear</button></div></div>'));

    $('#filter').kendoButton({
        click: function () {
            var col1 = $('#col1-tb').val();
            var col2 = $('#col2-tb').val();
            var col3 = $('#col3-tb').val();

            var col1Ops = $('#col1-operators').value();
            var col2Ops = $('#col2-operators').value();
            var col3Ops = $('#col3-operators').value();

            var col1Logic = $('#col1-logic').value();
            var col2Logic = $('#col2-logic').value();
            var col3Logic = $('#col3-logic').value();

            var orfilter = { logic: "or", filters: [] };
            var andfilter = { logic: "and", filters: [] };

            if (col1 != "") {
                if (col1Logic == 'and') {
                    andfilter.filters.push({ field: "Column1", operator: col1Ops, value: col1 })
                }
                else {
                    orfilter.filters.push({ field: "Column1", operator: col1Ops, value: col1 })
                }
            }

            if (col2 != "") {
                if (col2Logic == 'and') {
                    andfilter.filters.push({ field: "Column2", operator: col2Ops, value: col2 })
                }
                else {
                    orfilter.filters.push({ field: "Column2", operator: col2Ops, value: col2 })
                }
            }

            if (col3 != "") {
                if (col3Logic == 'and') {
                    andfilter.filters.push({ field: "Column3", operator: col3Ops, value: col3 })
                }
                else {
                    orfilter.filters.push({ field: "Column3", operator: col3Ops, value: col3 })
                }
            }
. . .

            andfilter.filters.push(orfilter);
            orfilter = { logic: "or", filters: [] };

            e.sender.dataSource.filter(andfilter);
            localStorage["kendo-grid-filter"] = kendo.stringify(e.sender.dataSource.filter().filters);

        }
    });

    $('#clear').kendoButton({
        click: function () {
            e.sender.dataSource.filter({});
            localStorage["kendo-grid-filter"] = kendo.stringify({});
        }
    })
}

 

 

.cs TestController GetData Method

        public ActionResult GetData([DataSourceRequest]DataSourceRequest request, int? arg1, string arg2, bool arg3 = false, bool arg4 = false)
        {
            DAL dal = new DAL();
            var result = dal.GetDataDAL(request, arg1, arg2, arg3);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

[Anton Mironov]

Hello J,

Thank you for the code snippets and details provided.

It seems that the paging of the Kendo UI Grid of your application is making a new request without assuming the custom filtering.

I tried to replicate the described behavior and the result could be observed in that sample project attached. I prepared it for the case, it is working as expected and contains:

• Kendo UI Grid with one filterable field.
• Kendo UI custom Button.
• An event handler for the Click event of the custom button.
• Custom logic for filtering the Grid in the event handler.

Make the needed tests locally - click the button to filter the Grid(the custom filter is: "ShipName contains 3"), use the pager, and observe the result.

Kind Regards,
Anton Mironov
Progress Telerik