Missing Grid options when using attributes

6 posts, 1 answers
  1. eduardo
    eduardo  avatar
    8 posts
    Member since:
    Jul 2012

    Posted 14 Dec 2012 Link to this post

    Hello.
    I am trying to use the Kendo UI Grid with the DataSourceRequest object, in an MVC3 web application.
    When I use the MVC helpers to define the grid with razor notation, it works correctly, with paging, filtering, sorting, etc.
    But, because of our architecture, we have to use the attribute-driven notation, like so:

    <div id="userGrid"
      data-role="grid"
      data-columns='[{ "field": "Name", "title": "Users"}]'
      data-filterable='true'
      data-navigatable="false"
      data-pageable='true'
      data-selectable="row"
      data-sortable='{"mode": "single", "allowUnsort": true}'
      data-bind="source: userDataSource"></div>

    The controller's action code is exactly the same in both situations:

    public ActionResult ListUsers([DataSourceRequestDataSourceRequest request)
    {
      return Json(GetUsers().ToDataSourceResult(request));
    }
    
    When using attribute-driven, the grid works fine listing the records and the paging also works.
    But not the filter and sorting.
    Debugging the controller, I found out that the "request" parameter only has the Page and PageSize values, while
    the Filter and Sort properties are null.
    Looking at the POST request sent by each version of the grid, I found some differences.
    This is the request sent by the Grid created with the MVC helper:
    
    sort:
    page:1
    pageSize:10
    group:
    filter:Name~contains~'aaa' And this is the request sent by the attribute-driven: take:30
    skip:0
    page:1
    pageSize:30
    sort[0][field]:Name
    sort[0][dir]:asc
    filter[filters][0][field]:Name
    filter[filters][0][operator]:contains
    filter[filters][0][value]:25
    filter[logic]:and

    That's probably why the option parameters are not being sent to the action, but what do I have to do to format the options correctly?
    This is the script I'm using to define the transport read function for the datasource:

    read: function (options) {
      $.ajax({
        url: '/home/ListUsers',
        type: 'POST',
        data: options.data,
        success: function (data, textStatus, jqXHR) {
          options.success(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
          alert(errorThrown);
        }
      });
    }

    What do I have to do to send the options data correctly?

    Thanks!
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 17 Dec 2012 Link to this post

    Hi,

     Currently the DataSourceRequest and ToDataSourceResult are intended to be used only from the MVC wrappers. Serialization of the data source parameters in the required format is performed by code which is in kendo.aspnetmvc.min.js. You need to configure the data source like this:

    dataSource: {
          type: "aspnetmvc-ajax",
          schema: {
                data: "Data",
                total: "Total"
          }
          /*other configuration*/
    }

    Have in mind that this usage scenario is not documented.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. eduardo
    eduardo  avatar
    8 posts
    Member since:
    Jul 2012

    Posted 17 Dec 2012 Link to this post

    Hello Atanas. Thanks for the suggestion.
    I included the type: "aspnetmvc-ajax" parameter to the transport object, but after a few tries, I found out that using a function for the read action doesn't work:

    userDataSource: new kendo.data.DataSource({
    type: "aspnetmvc-ajax",
    transport: {
    read:  function(options) {
    $.ajax({
    url: '/home/ListUsers',
    type: 'POST',
    data: options.data,
    success: function (data) {
    options.success(data);
    },
    error: function (errorThrown) {
    alert(errorThrown);
    }
    });
    }
    },
    schema: {
    model: {
    id: 'ID',
    fields: {
    ID: {
    type: 'number'
    },
    Name: {
    type: 'string'
    }
    }
    },
    data: 'Data',
    total: 'Total'
    },
    page: 1,
    pageSize: 30,
    serverPaging: true,
    serverSorting: true,
    serverFiltering: true,
    serverAggregates: true,
    sort: { field: 'Name', dir: 'asc' }
    })
    });

    If I don't use a function, like this, it works:

    userDataSource: new kendo.data.DataSource({
    type: "aspnetmvc-ajax",
    transport: {
    read: {
    url: '/home/ListUsers'
    }
    (....)

    The problem is that, by doing this, I don't have access to the success and error methods and the loading animation doesn't show the first time the grid is loaded. Is there something else I have to do to be able to use a function?

    Are there any plans to include the support of DataSourceRequest for this approach? If so, in which version should we expect it?
    There are many scenarios where this approach is necessary, so it should work for both. Since we can (and already could) create and configure the kendo grid using javascript view models, it doesn't make sense if we can't take advantage from the DataSourceRequest class.

  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 17 Dec 2012 Link to this post

    Hello,

     Yes, this is not supported. Why do you need to have a function for transport.read? You can use the dataSource requestStart/requestEnd events to show/hide loading animations.

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. eduardo
    eduardo  avatar
    8 posts
    Member since:
    Jul 2012

    Posted 17 Dec 2012 Link to this post

    Hello Atanas and thanks again for the suggestion.

    I was trying to make it work with transport.read because that was the way we were doing before (before we had the DataSourceRequest class), so I was hoping I could still use that and minimize the changes we will have to make.

    Anyway, I see now that, either way, we will have to make a big change. Either we continue using our MVVM approach and change the way we instantiate the DataSources or we opt for using the MVC wrappers, no longer configuring the DataSources in the view model script class.

    Which do you recommend?
    If we opt for continue using our MVVM architecture and change the way we instantiate the DataSources, making the modifications you suggested, do we have a guarantee that this solution will still work in future versions of Kendo UI?

    Thanks,
    Eduardo
  6. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 18 Dec 2012 Link to this post

    Hello,

    If you want to use the DataSourceRequest without using the mvc wrappers you should follow the configuration that I described earlier. It is guaranteed to work in the future because this is the same configuration the MVC wrappers are rendering.

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top