Kendo Grid Filtering and Paging

[Jayalakshmi]

Kendo Grid Filtering doesn't work with paging

          Filter works in page1 but once we move to page 2 or 5 .... and apply filtering , filters doesn't work. Kendo Grid results into an empty data. how could this be resolved.


                Thanks in advance

[Drew]

+1 here, I'm also seeing this problem. I am using the 2012.1.322 release.

[Kevin]

What kind of datasource are you using and how is it configured? It is working fine for me. I have to massage how requests are made and how to read the results... but it works fine for me. It may be in your specific implementation. Post your code.

Here's a snippet of my datasource in the grid init:

dataSource:

{

    schema: {

        model: {

            id: "List",

            fields:

            {

                ProductIdentity: { type: "number" },

                Name: { type: "string" },

                GroupName: { type: "string" },

                Manufacturer: { type: "string" },

                PartNo: { type: "string" },

                UnitsLeft: { type: "number" },

                NetAmount: { type: "number" },

                IsActive: { type: "boolean" }

            }

        },

        data: function (data) {

            var newdata = Sys.Serialization.JavaScriptSerializer.deserialize(data).d;

            return newdata.List; // <-- Results returned in List array from server

        },

        total: function (data) {

            var newdata = Sys.Serialization.JavaScriptSerializer.deserialize(data).d;

            return newdata.Count; // my object returns a Count property

        }

    },

    transport: {

        read:  {

            url: "/AjaxHandler.ashx/WebServiceGridCall",

            contentType: "application/json; charset=utf-8",                         type: "POST"

            },

        parameterMap: function (data, operation) {                         

            if (operation == "read") {                              

                var sortString = '';

                var filterString = '';

                // run sorter

                        if (data.sort) {

                    $.each(data.sort, function (index, value) {

                        sortString += value.field + " " + value.dir + ',';

                    });

                    sortString = sortString.rtrim(','); // custom rtrim() method

                }

                // filter - build my own custom string that is Dynamic Linq friendly                    (Google DynamicQueryable.cs)

                if (data.filter) {

                    $.each(data.filter.filters, function (index, value) {

                        filterString += value.field + '.ToLower().Contains("' + value.value + '")';

                        if (index < (data.filter.filters.length - 1))

                        filterString += " AND ";

                    });

                }

                return JSON.stringify( // stringify my own custom object to be parsed in Page Handler

                {

                    serviceCallName: "GetProducts",

                    parameters: {

                        "startIndex": data.skip, // <-- start Index which will be used on the server side to get the start index of the collection to be returned. You will need to send the start index and pageSize to the server so the server can either query based on that or extract those specific results from whatever Array is returned before returning it to the client.

                        "maxRows": data.pageSize, // <-- # of rows to return (per page)

                        "sortExpressions": sortString,

                        "filterExpressions": filterString,

                        "defaultSortExpression": ""

                    }

                });

            }

        }

    },

    pageSize: 10,

    serverPaging: true,

    serverFiltering: true,

    serverSorting: true

}

[Drew]

You've given me an idea...I know where my issue is.

It's in the grid setup code, it's because I'm using templates on certain fields to craft the data. This is what I had before:

columns:

[

    {

        field: 'referencecode',

        title: 'Reference Code'

    },

    {

        field: 'description',

        title: 'Description'

    },

    {

        template: '#= GetJsonTextByValue(gblProductCategories, category) #',

        title: 'Category'

    },

    {

        template: '#= GetJsonTextByValue(gblUnitsOfMeasure, unitofmeasureid) #',

        title: 'Unit Of Measure'

    },

    {

        template: '#= GetJsonTextByValue(gblBufferGroups, buffergroupid) #',

        title: 'Buffer Group'

    }

]

School-boy error; without the 'field' on each of those latter 3 columns it has nothing to filter by for those latter columns.

Only problem I now have is that by adding the fields in they of course don't match what is actually displayed in the columns, as the fields are GUID key values rather than meaningful text, so the user can't really use them to filter anyway. Looks like I'll have to have a rethink on my design, back to the drawing board for me on this one.

[Martin]

Hi,

is there a sample how to display on filtermenu ALL available values on pagination to support filtering over all pages. In my case only the filter values from current page are displayed.

 

Thanks in advance

Martin

 

[Viktor Tachev]

Hello,

When server operations are enabled it is possible for the filter to display only the options on the current page. This can happen when there is no explicit dataSource specified for the filter. Please define a separate DataSource for the filter as illustrated in the following example and see how the behavior changes.

• https://demos.telerik.com/kendo-ui/grid/filter-multi-checkboxes

Note that the Read action for the filter DataSource should return all available items for the given field.


Regards,
Viktor Tachev
Progress Telerik

[Martin]

Thank you Victor,

that's what i need.

Regards

Martin