Custom Paging for ASP.Net MVC Kendo Grid - asp.net-mvc

Question

I have a MVC Kendo Grid as follows. It is working fine with default paging.
Now, I want to do custom paging. In the controller action we need to know the current page index. Also it should set the “total” count for the grid. [The actual data source will have only 2 records at a time even if there are 100 records in the database. So the grid must know the total number of records in database using “total” attribute.]
The query should return only 2 records from the database at a time.
How can we do this custom server paging using the MVC wrapper for Kendo Grid?
#using (Html.BeginForm())
{
#(Html.Kendo().Grid<KendoUIMvcSample.Models.Sample>()
.Name("ssgrid222")
.Columns(columns => {
columns.Bound(p => p.SampleDescription).Filterable(false).Width(100);
columns.Bound(p => p.SampleCode).Filterable(false).Width(100);
columns.Bound(p => p.SampleItems).Filterable(false).Width(100);
})
.AutoBind(false)
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(2)
.Read(read => read.Action("Orders_Read", "Sample")
)
)
)
}
Controller
public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
{
int currentPageNumber = request.Page;
return Json(GetOrders().ToDataSourceResult(request));
}

Answer 1

It is defined in the kendo site
CONTROLLER CODE
//Paging and Sorting
int currentPage = request.Page;
int pageSize = request.PageSize;
string sortDirection = "ASC";
string sortField = "UpdatedDateTime";
if (request.Sorts != null && request.Sorts.Count > 0)
{
sortField = request.Sorts[0].Member;
sortDirection = request.Sorts[0].SortDirection.ToString();
}
//Setting the TOTAL
var result = new DataSourceResult()
{
Data = orders,
Total = total // Total number of records
};
return Json(result);
VIEW
<div class="GridSearch">
#(Html.Kendo().Grid<MVC.Models.TransactionHistoryModel>()
.Name("TransactionHistroyGrid")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(25)
.ServerOperation(true)
.Read(read => read
.Action("TransactionHistorySearch_Read", "TransactionHistoryResults")
.Data("additionalData")
)
)
.Columns(columns =>
{
columns.Bound(p => p.UserId).Filterable(false).Width(40).Title("Userid");
columns.Bound(p => p.Reviewed).Template(#<text></text>).ClientTemplate("<input id='checkbox' class='chkbx' type='checkbox' />").Filterable(false).Width(30).Title("Reviewed");
columns.Bound(p => p.CreatedOnEnd).Format("{0:MM/dd/yyyy}").Filterable(false).Width(50).Title("Created On");
columns.Bound(p => p.UpdatedOnEnd).Format("{0:MM/dd/yyyy}").Filterable(false).Width(50).Title("Updated On");
columns.Bound(p => p.Comment).Filterable(false).Width(50).Title("Comment");
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:325px;" })
)
</div>

Answer 2

Here is a custom paging solution we have implemented for Kendo ListView. With minor modification it should work for the grid. The solution consists of a custom DataSoure Object and a custom JSonResult class.
The custom data source:
public class MyDataSource
{
public object AggregateResults { get; set; }
public object Data { get; set; }
public object Errors { get; set; }
public int Total { get; set; }
}
The custom ActionResult:
public class JsonNetResult : ActionResult
{
public Encoding ContentEncoding { get; set; }
public string ContentType { get; set; }
public object Data { get; set; }
public JsonSerializerSettings SerializerSettings { get; set; }
public Formatting Formatting { get; set; }
public JsonNetResult()
{
SerializerSettings = new JsonSerializerSettings();
}
public override void ExecuteResult(ControllerContext context)
{
if (context == null)
throw new ArgumentNullException("context");
HttpResponseBase response = context.HttpContext.Response;
response.ContentType = !string.IsNullOrEmpty(ContentType)
? ContentType
: "application/json";
if (ContentEncoding != null)
response.ContentEncoding = ContentEncoding;
if (Data != null)
{
var writer = new JsonTextWriter(response.Output) { Formatting = Formatting };
JsonSerializer serializer = JsonSerializer.Create(SerializerSettings);
serializer.Serialize(writer, Data);
writer.Flush();
}
}
A Typical use in an action method would be:
public ActionResult Orders_Read([DataSourceRequest] Object request)
{
int count = 0;
var ds = (DataSourceRequest)request;
var ListOfItemsToDisplay = GetItemsWithPagingInfo
(
MySearchParameters,
ds.PageSize,
ds.Page,
out count
);
return new JsonNetResult
{
Formatting = Formatting.Indented,
Data = new MyDataSource
{
Data = ListOfItemsToDisplay
Total = count,
AggregateResults = null,
Errors = null
}
};
}