Missing Grid options when using attributes

[eduardo]

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([DataSourceRequest] DataSourceRequest 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!

[Atanas Korchev]

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

[eduardo]

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.

[Atanas Korchev]

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

[eduardo]

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

[Atanas Korchev]

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