Kendo grid total didn't bind after ajax get

Question

I am having kendo grid which loads initially with these data.

 @(Html.Kendo().Grid<GridModel>()
              .Name("Grid")
              .Columns(columns =>
              {
                  columns.Bound(p => p.ID).Hidden(true);
                  columns.Bound(p => p.Name);
                  columns.Bound(p => p.Village);
                  columns.Command(command =>
                  {
                      command.Custom("ButtonP");
                      command.Custom("ButtonEdit");
                      command.Custom("ButtonActive");
                      command.Custom("ButtonPause");
                  }).Width("20%").HtmlAttributes(new { @class = "Custom" });
              })
              .Reorderable(reordering => reordering.Columns(true))
              .HtmlAttributes(new { style = "margin-bottom: 20px;" })
              .Sortable()
              .EnableCustomBinding(true)
              .ColumnMenu()
        .AutoBind(false)
              .Pageable(pageable => pageable
                  .Refresh(true)
                  .PageSizes(true)
                  .ButtonCount(5))
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .Read(read => read.Action("GetData", "Home"))
                 // .PageSize(30)
                  .ServerOperation(true)
             )
              .Events(e => e.DataBound("ModifyButtons"))
              )

After this there is a search button which calls the backend to get the records and total by a ajax call.If I include all records it goes for paging but when I go for server paging It is not fetching count or total records. Working ajax

var dataSource = new kendo.data.DataSource({
                    data: response
                });
$("#Grid").data("kendoGrid").setDataSource(dataSource);

and backend

var searchItems = Service.Search(SearchModel).Select(GridModel);
                return Json(searchItems, JsonRequestBehavior.AllowGet);

But I want to do server paging and when I return this (Non Working Ajax)

var dataSource = new kendo.data.DataSource({
                    data: response.Data,
                    total: response.Total
                });
$("#Grid").data("kendoGrid").setDataSource(dataSource);

and backend

var searchItems = Service.Search(SearchModel).Select(GridModel);
                 var records = new 
                {
                    Data = searchItems,
                    Total = 90
                };
                return Json(records, JsonRequestBehavior.AllowGet);

==Hard coded total to test. SearchModel contains parameters for a complex search

Please tell me how to find the total from server side it is just showing current page size as total count.

David Shorthose David Shorthose · Accepted Answer · 2016-05-12T17:27:14

If you are using the wrappers then this may be an easier solution for you.

If you are doing server side operations then change your controller signature to be something like this Note: I am assuming it is not set up like below:

public JsonResult GetData([DataSourceRequest] DataSourceRequest request, SearchModel mySearchObject){
 //stuff happens here. 
 //get some results.
var model = someresults; 
//more stuff happens here....

return Json(model.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);


}

ensure you have the following usings added though for this to work:

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;

this will then return back a new datasource object for you, so the grid should bind correctly and give you the total, data etc. you are after.

without seeing more of what you are doing this is assuming a number of things but should hopefully give you the pieces on first glance which look missing from your code.

Kendo grid total didn't bind after ajax get

1 Answers