Client-side refresh pagination

[Sergio Escalada]

Hello, I would like to know if it's possible to refresh grid's pagination by client-side (important: I'm using Custom Binding).

I must implement my own filtering methods (due to some business logic, default grid filtering is not sufficient). So, imagine that I initially have 100 elements in my grid, and in my view, I have a button that does a filtering from the data, and then returns only 20 elements. How can I refresh the pagination after button is clicked and data is filtered (with custom binding)?

Is there a way to do it easily?

Thanks.

[Eswari S]

Hi Sergio,

Thank you for your interest in Syncfusion products.

It is possible to implement client-side paging through the client-side API available in the Syncfusion MVC Grid. We have prepared a sample to demonstrate implementing client-side paging using Json mode and the same can be downloaded from the following link.


CustomBinding1980112721.zip


[Please choose the appropriate configuration setting (Debug MVC3/Release MVC3) if you want to run the sample with ASP.NET MVC 3]

Here are some relevant code snippets from the sample along with some explanation

1) Retrieving all the records in the OnLoad event

[JavaScript]

function GetTotalRecords(sender, args) {
$.ajax({
type: "POST",
url: "CustomBinding/GetRecords", // Get the data from the Json records

dataType: "json",
success: function (data) {
totalRecords = data;
}
});
gridObj = $find("OrdersGrid");
gridObj._RevertAction = function () { };
}


[Controller]

public ActionResult GetRecords()
{
var data = new NorthwindDataContext().OrdersViews.ToList();
return Json(data); // returns the data to the Onload event
}

[Aspx]

<%=Html.Syncfusion().Grid("OrdersGrid")

.ActionMode(ActionMode.JSON)
.Column(column => {
…..
column.Add(p => p.OrderID).HeaderText("Order ID");

})

.ClientSideEvents(eve=>{
eve.OnActionBegin("ClientSidePaging"); //used for client-side functions
eve.OnLoad("GetTotalRecords"); // used to get total records
})

%>

2) client-side paging

We have implemented client-side paging through linq-Jquery . Skip and Take methods are used to page the data's.


function ClientSidePaging(sender, args) {

if (args.requestType == "paging") { //// here we are checking the condition for paging to cancel the default paging.

var json = Sys.Serialization.JavaScriptSerializer.deserialize(args.data.ClientObject);
args.cancel = true;
processedData = $.Enumerable.From(totalRecords).ToArray();
if (json.AllowPaging == true) {
processedData = $.Enumerable.From(processedData).Skip(args.data.StartIndex).Take(args.data.PageSize).ToArray();
}
var griddata = { TotalRecordsCount: totalRecords.length };
gridObj.jsonModeMgr.set_dataSource(processedData);
gridObj._CommonSuccessAction(griddata);
gridObj._reLoadEssentialsAtGridReferesh(gridObj, args.requestType); //these methods are used to refresh the grid after paging and sorting

}
}


Please let us know if you would require any further assistance.

Regards,
Eswari.S