Using kendo grid we are able to load the data at the first time. On click of a data from the grid, we are using the ajax call and loading the data to grid on success of the ajax call. On success we have to set the Total paging count, since we are fetching only the required data (10 records per call). But the paging should be available based on the total no record count. On ajax success we are not able to set the Total paging. Kindly provide us the sample code, how to set the paging in grid.
In Index.cshtml view
@(Html.Kendo().Grid<IndexModels>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.FolderName).ClientTemplate("# if (FolderName!=null) { #" +
"<listleft><img title='' src='" + Url.Content("/Content/Images/folder.gif") + "'\"/><file-folder-names><a data-role=\"button\" onclick=\"onClickDoc('#: data.ObjectId#');\" id=\"testa\">#:FolderName#</a></file-folder-names></listleft>"
"# } #"
);
})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:400px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("ReadDataonPaging", "Home").Data("additionalInfo"))
)
.Events(events => events.DataBound("dataBound"))
)
Jquery Ajax call function on click of the row data
function onClickDoc(id) {
$.ajax({
type: "POST",
url: "/Home/getValuesonNodeClick",
data: { node: id, fromIndex: miniCount, toIndex: maxCount }, // the data in JSON format. Note it is *not* a JSON object, is is a literal string in JSON format
success: OnGetSelectNodeSuccess,
error: OnGetMemberError
});
}
function OnGetSelectNodeSuccess(datasource1, status) {
var TestSource = JSON.parse(datasource1);
$('#grid').data('kendoGrid').dataSource.data(TestSource);
}
In Index.cshtml view
@(Html.Kendo().Grid<IndexModels>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.FolderName).ClientTemplate("# if (FolderName!=null) { #" +
"<listleft><img title='' src='" + Url.Content("/Content/Images/folder.gif") + "'\"/><file-folder-names><a data-role=\"button\" onclick=\"onClickDoc('#: data.ObjectId#');\" id=\"testa\">#:FolderName#</a></file-folder-names></listleft>"
"# } #"
);
})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:400px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("ReadDataonPaging", "Home").Data("additionalInfo"))
)
.Events(events => events.DataBound("dataBound"))
)
Jquery Ajax call function on click of the row data
function onClickDoc(id) {
$.ajax({
type: "POST",
url: "/Home/getValuesonNodeClick",
data: { node: id, fromIndex: miniCount, toIndex: maxCount }, // the data in JSON format. Note it is *not* a JSON object, is is a literal string in JSON format
success: OnGetSelectNodeSuccess,
error: OnGetMemberError
});
}
function OnGetSelectNodeSuccess(datasource1, status) {
var TestSource = JSON.parse(datasource1);
$('#grid').data('kendoGrid').dataSource.data(TestSource);
}