I use ToDataSource to return a subset of records to display in the grid, using the DataSourceRequest's Page and PageSize to determine which rows to return. What I can't figure out is how to indicate to the grid how many total records there are, so that it can display the right page count. Is this as simple as returning a different structure that includes the total record count or what? I cannot find any examples of this online.
return Json(enumerable.ToDataSourceResult(request));
3 Answers, 1 is accepted
Hello Eric,
The ToDataSourceResult extension method converts the collection of items to a Kendo.Mvc.UI.DataSourceResult object. This extension method will page automatically the data using the information provided by the DataSourceRequest object. More information can be found in the following Ajax binding article:
However, in some scenarios, the predefined Ajax settings do not help us and our project requires full control over the DataSource client-side API options. Here Custom DataSource can be used, for instance:
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.DataSource(dataSource => dataSource
.Custom()
.PageSize(10)
.ServerPaging(true)
.ServerSorting(true)
.ServerFiltering(true)
.Transport(transport => transport
.Read(read => read.Action("Read", "Home"))
)
.Schema(schema => schema
.Data("Data")
.Total("Total") //The field from the server response which contains the total number of data items.
)
)
)For more information on Custom DataSOurce please refer to the following article:
Let me know if the above answers the question.
Regards,
Nikolay
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Veteran
Iron
I eventually discovered that DataSourceResult has a Total property. I just happened to stumble on that, as I could not find any examples of this online anywhere. I wish this had just been included in the online tutorial examples.
var gridModel = results.ToDataSourceResult(request);
gridModel.Total = resultsPackage.TotalRecords;
return Json(gridModel);
Hello Eric,
I am glad to hear my suggestions are helping you move forward with the project.
I will bring up the topic to the Team and if necessary this will be further added to the documentation.
Regards,
Nikolay
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Rank 1
Veteran
Iron
@sandeep, did you see the answer I posted earlier in the thread?
https://www.telerik.com/forums/how-to-specify-total-items-with-server-paging-in-grid#5094438
Rank 1
Rank 1
Rank 1
Veteran
Iron
I never used that schema property. Just made sure server side code was returning the properly populated DataSourceResult.
@(Html.Kendo().Grid<ProspectiveAdvantage.ViewModels.Audit.AuditViewModel>().Name("Members").TableHtmlAttributes(new { @class = "tblPatient" })
.AutoBind(Model.AutoPopulateResults)
.Columns(columns =>
{
columns.Bound(theMember => theMember.ProviderLastName).HeaderTemplate("Provider<br />LastName").Width(30);
columns.Bound(theMember => theMember.ProviderFirstName).HeaderTemplate("Provider<br />FirstName").Width(30);
columns.Bound(theMember => theMember.PatientName).HeaderTemplate("Patient Name").Width(30);
columns.Bound(theMember => theMember.InterventionType).HeaderTemplate("Intervention Type").Width(30);
columns.Bound(theMember => theMember.AuditingStatus).HeaderTemplate("Auditing Status").Width(30);
columns.Bound(theMember => theMember.AuditAssignmentDate).HeaderTemplate("Assignment<br />Date").Format("{0:MM/dd/yyyy}").Width(30);
columns.Bound(theMember => theMember.Quarter).HeaderTemplate("Quarter").Width(30);
columns.Bound(theMember => theMember.AuditType).HeaderTemplate("AuditType").Width(30).Sortable(false);
columns.Bound(theMember => theMember.MemberID).Hidden(true);
columns.Bound(theMember => theMember.ClientID).HeaderTemplate("ClientID").Hidden(true);
columns.Bound(theMember => theMember.MemberCampaignAppointmentID).Hidden(true);
columns.Bound(theMember => theMember.MemberCampaignID).Hidden(true);
columns.Bound(theMember => theMember.PractitionerGroupID).Hidden(true);
})
.DataSource(dataBinding => dataBinding.Ajax()
.Read(read => read.Action("_CustomBinding", "Audit").Data("members_FetchSearchParameters"))
.Events(events => events.Error("handleAjaxErrorFromGrid").RequestEnd("handleAjaxOnRequestEndFromGrid"))
.ServerOperation(true)
.PageSize(Model.PageSize).Model(model => { model.Id(e => e.MemberID); model.Field(f => f.ProviderFirstName); })
//default sort DisplaySignatureDue column by ascending
.Sort(sort => {
//if (!AssessmentExpired) { sort.Add("DisplaySignatureDue").Ascending();}
//if (AssessmentExpired) { sort.Add("DisplayExpiredDate").Descending();}
})
.PageSize(10)
)
.Pageable(pageable => pageable
.PageSizes(true)
.Refresh(true)
.PageSizes(new int[] { 10, 50, 100, 1000, })
)
.Sortable()
.NoRecords("No records found.")
.Selectable()
.Events(events => events.Change("handleGridRowSelected").DataBinding("handleDataBinding").DataBound("handleDataBound").Filter("onFiltering"))
.HtmlAttributes(new { style = "height:470px;cursor:pointer;border: 0px; display:flex;" })
.Scrollable()
)
Hello Eric,
Thank you for sharing your solution.
You are correct, thus you will be able to achieve the desired result. Modifying the Total property of the DataSourceResult would change the Total property of the Grid data source.
However, the approach suggested above with the Schema property is also applicable, but the Schema configuration is available only if a custom binding is used, since the Ajax() configuration applies predefined options for the Schema.