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:

enter image description here

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?

Brett · Answer 1 · 2011-08-03T20:56:51.803

3

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);
})

edited Aug 03 '11 at 20:56

answered Aug 03 '11 at 20:33

Brett

8,575
5
38
51

Yes.. I figured it out... I had only to add JsonRequestBehavior.AllowGet and your approach is correct. Thank you – iLemming Aug 03 '11 at 20:42
the only thing that bothers me, that GridCommand sends PageSize always 10, even if you override it in the markup – iLemming Aug 03 '11 at 20:49
I posted my associated view. I'm not sure why you're binding the ondatabound event. See .DataBinding() method above. – Brett Aug 03 '11 at 20:57
Brett I can't use Ajax().Select, I have to send data to the server that I can get only by traversing DOM elements! – iLemming Aug 03 '11 at 21:50
+ 1 The devil is in the details. Thanks for answer @Brett. I forgot to set the EnableCustomBinding. – Samuel Nov 09 '12 at 19:19

score 2 · Accepted Answer · answered Aug 04 '11 at 19:02

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
         },

Telerik MVC Grid, Truly Ajax custom binding

2 Answers2