I need Pagging in which when user click on Page number then i will get pageNo, make Ajax call, Retrieve Data and Bind to Kendo Grid.
Is there any event to do this.
So far i have tried DataBound which give current selected Page no, but this event fire on Data bind too which call retrievedata function again and again.
I have Done Following
Creating Div,Defining Paging,sortable,events for Kendo Grid
@{
Layout = null;
}
@using Kendo.Mvc.UI
@using NewMSPConnect.Common;
<div id="ShowGridSLAPerformanceInfoDiv" style="float: left; width: 100%">
@(Html.Kendo().Grid<newmspconnect.models.usp_service_slaperformance_result>()
.Name("SLAPerformanceGrid")
.Columns(columns =>
{
columns.Bound(p => p.TicketNo).Width(100).Title("Ticket#");
columns.Bound(p => p.StartDate).Format("{0:dd-mmm-yyyy}").Width(100).Title("Start Date");
columns.Bound(p => p.EndDate).Width(100).Title("End Date");
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Events(events => events.DataBound("onDataBound"))
.EnableCustomBinding(true)
.Resizable(resize => resize.Columns(true))
.DataSource(Datasource => Datasource
.Ajax().PageSize(10)
.ServerOperation(false)
.Total(2000)
.Read(read => read.Action("abc", "abc"))
)
)
</newmspconnect.models.usp_service_slaperformance_result></div>
Script Defining Event and Retrieving Data
<script type="text/javascript">
var FirstTimeBind = true;
function onDataBound(arg) {
RetrievingSlaPerformance(PageNo);
}
function RetrievingSlaPerformance(PageNo) {
var downloadUrl1 = '@Url.Action("QBRTabDataPaging", "Services")?' + $.param({ companyId: 0, TabNumber: 3, PageNo: PageNo });
$.ajax({
type: 'POST',
url: downloadUrl1,
async: true,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (result) {
$("#LoadingDiv").css("display", "none");
var grid;
for (i = 0; i < result.Data.length; i++) {
result.Data[i].StartDate = Date(result.Data[i].StartDate);
result.Data[i].EndDate = Date(result.Data[i].EndDate);
}
alert(result.Data);
grid = $("#SLAPerformanceGrid").data("kendoGrid").dataSource.data(result.Data);
}
});
}
</script>