Prepopulating Grid with Filter

2 posts, 0 answers
  1. Jim
    Jim avatar
    18 posts
    Member since:
    Dec 2014

    Posted 19 Mar 2015 Link to this post

    I have a grid in an MVC view, and upon a button click i am sending its DataSource info to the controller via the parameterMap() and an ajax() posting.  something like this:

    function sendData() {
        var grid = $("#Grid").data("kendoGrid"),
            parameterMap = grid.dataSource.transport.parameterMap;
        var data = parameterMap({ sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: });
            url: "/Home/UpdateCreateDelete",
            data: data,
            type: "POST",

    This works great, the controller gets the datasourcerequest info.  I can use the DataSourceRequest fields to send them later on back to a view with a grid and i can initialize that grid to use the DataSourceRequest fields like this:

    // note grid.autobind() set to false, so we can load upon dom ready below:
    $(function() {
       @{ var request = TempData["request"] as DataSourceRequest;  }
        var grid = $("#mygrid").data("kendoGrid");
               page:  @request.Page,            // WORKS PERFECTLY!
               pagesize: @request.PageSize,      // WORKS PERFECTLY!
               filter: null,                // FAILS IF I use filter: @request.Filter
               sort:  null,                 // FAILS IF I use sort: @request.Sort
               group: null,                 // FAILS IF I use group: @request.Group 

    The problem is that the loading does not support the filters, sorts, or groups fields from the DataSourceRequest object.  How do i convert those DataSourceRequest fields into something that is in proper format for the the Grid.query() function?

    Bottom line is that i want to be able to initialize my grid with the filters, sorts, and groupings that were saved from a previous DataSourceRequest.
  2. Dimo
    Dimo avatar
    8482 posts

    Posted 23 Mar 2015 Link to this post

    Hello Jeff,

    @request.Page and @request.PageSize represent scalar numeric values, that's why they work in your case. However, the other three parameters represent server-side objects, which can't be transformed to the required client-side Javascript objects automatically. You need transform and serialize them manually before sending them to the client, and then deserialize them in order to obtain the required client-side object with a structure, which is described in the documentation:

    Generally, if you preserve the information, which is initially sent from the client (e.g. grid.dataSource.filter() ), it will be easier for you to return it to the client in the same format.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top