Telerik MVC Grid, Truly Ajax custom binding

Question

I'm using grid that looks like that:

 Html.Telerik().Grid(Model).Name("preciousGrid").
     ... bla bla bla..
     .ClientEvents(events => events.OnDataBinding("onDataBinding"))
     .Columns(columns =>
         {
           columns.Bound(o => o.Date);
           columns.Bound(o => o.Name);

Yes, I'm totally ignoring .DataBinding stuff to use custom ajax call. Why? I need to send to the server more data, rather than a simple id. And the only way to gather that data is by traversing DOM elements. So, none of the methods suggested by Telerik wouldn't work in my case.

Everything works - in onDataBinding, after the necessary data gathered and sent to the server, server returns results, grid displays that data.

But still there is a problem. Paging doesn't work. And the footer shows something like that:

Any ideas?

UPD: Oh... maybe I should send to the server paging info and return results based on that? How to do that? Can you show me a sample?

UPD2: GridCommand command doesn't send Paging info to the server by default(if I omit it in $.ajax and still put a GridCommand parameter in the action method it would send something to the controller, but PageSize is always equals 10 (default value), and Page is always 1. So I guess I have to hardcodedly include these values in $.ajax. But I don't know how can I get PageSize and Page values on the client?

Answer 1

If you're doing custom data binding, you must handle the paging and sorting yourself, something like that shown below. The example on the demo site is pretty reasonable...

[GridAction(EnableCustomBinding = true)]
public ActionResult _Index(GridCommand command)
{
    IEnumerable<MyObject> data = GetData(command.Page - 1, command.PageSize);
    int count = GetDataCount();
    return View(new GridModel { Data = data, Total = count });
}

in the view you have:

.DataBinding(dataBinding => dataBinding.Ajax().Select("_Index", "Subjects"))
.Pageable(p =>
{
    p.PageSize(Model.PageSize, Model.PageSizes);
    p.Style(GridPagerStyles.PageInput | GridPagerStyles.NextPreviousAndDropDown);
})

Answer 2

Ok... apparently you can do truly custom ajax binding

You have to define databinding although it's not gonna be used by the grid, but you need it in order to be able to make the grid Pageable.

 .DataBinding(binding => binding.Ajax().Select("GetList","Home")) // Although I guess you can put whatever here
                        .ClientEvents(events => events.OnDataBinding("Grid_onDataBinding"))

Next, in the Grid_onDataBinding javascript function you have to do something like that

var grid = $('#ConflictsGrid').data('tGrid');
$.ajax({ 
        url: "GetList",
        contentType: 'application/json; charset=utf-8',
        type: "GET",
        data: { 
               page: JSON.stringify({currentPage: grid.currentPage, pageSize: grid.pageSize }),
               // any other data you want to send to the server 
         },
         success: function (data) {
             grid.dataBind(data); // Here, the data that server returns will be actually bound to the grid
         },