We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Client-side refresh pagination

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.


1 Reply

ES Eswari S Syncfusion Team June 27, 2011 01:11 PM UTC

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




Loader.
Live Chat Icon For mobile
Up arrow icon