Kendo Grid Filtering and Paging

7 posts, 0 answers
  1. Jayalakshmi
    Jayalakshmi avatar
    11 posts
    Member since:
    Sep 2012

    Posted 31 Mar 2012 Link to this post

    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
  2. Drew
    Drew avatar
    18 posts
    Member since:
    Dec 2011

    Posted 10 Apr 2012 Link to this post

    +1 here, I'm also seeing this problem. I am using the 2012.1.322 release.
  3. Kevin
    Kevin avatar
    2 posts
    Member since:
    Sep 2012

    Posted 12 Apr 2012 Link to this post

    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
    }

  4. Drew
    Drew avatar
    18 posts
    Member since:
    Dec 2011

    Posted 13 Apr 2012 Link to this post

    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.
  5. Martin
    Martin avatar
    2 posts
    Member since:
    Feb 2018

    Posted 25 May 2018 Link to this post

    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

     

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 29 May 2018 Link to this post

    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.


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


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Martin
    Martin avatar
    2 posts
    Member since:
    Feb 2018

    Posted 29 May 2018 in reply to Viktor Tachev Link to this post

    Thank you Victor,

    that's what i need.

    Regards

    Martin

Back to Top