kendo ui grid complete server side paging and setting total count

Question

I am using kendo grid with server side paging. I do sorting and fetching of data at database side itself which gives me only pagesize number of records. I also get count of total records from backend itself. I just want to bind this data to kendo grid with showing page number according to count I return.

i.e. for every next page request I just return pagesize(e.g. 15) number of records with total count of record. Below is my code for kendo grid. Please help me to bind this records and show page numbers according to total count.

@(Html.Kendo().Grid(Model.InvoiceList)
.Name("InvoiceGrid")
.Columns(columns =>
{
columns.Bound(p => p.CompanyName).Title("Company Name").Width(80);
columns.Bound(p => p.Account).Title("Account").Width(60);
columns.Bound(p => p.MerchantNumber).Title("Merchant No.").Width(60);
columns.Bound(p => p.InvoiceAmount).Title("Invoice Amount").Width(60);
columns.Bound(p => p.ReferralPercentage).Title("Referral %").Width(60);
columns.Bound(p => p.ReferralCommission).Title("Referral Com.").Width(60);
columns.Bound(p => p.DeveloperPercentage).Title("Developer %").Width(60);
columns.Bound(p => p.DeveloperCommission).Title("Developer Com.").Width(60);
})
.Pageable(
 )
.Sortable()
.Filterable(filterable => filterable
    .Extra(false)
    )
.DataSource(dataSource => dataSource
 .Ajax()
    .Batch(false)
    .PageSize(15)
      .ServerOperation(true)
      .Read(read => read.Action("Index", "Invoice")
      ).Total(Model.count)
 )
 )

My server side code I am using to fetch records is as below.

public async Task<ActionResult> IndexAsync(int pageNo=0,int numberOfRecord=15)
    {

        //InvoicePaging has invoice list of 15 records and count = 400
        InvoicePaging ip = await InvoiceDAL<FileRecord>.getAllInvoices("SProcGetInvoiceList", pageNo, numberOfRecord);
        return View("InvoiceList",ip);
    }

Invoice paging class -

public class InvoicePaging
{
    [JsonProperty(PropertyName = "InvoiceList")]
    public List<Invoice> InvoiceList { get; set; }

    [JsonProperty(PropertyName = "count")]
    public int count { get; set; }
}

Nadeem Shaikh Nadeem Shaikh · Accepted Answer · 2016-12-27T04:23:15

After searching for solution to problem I got the following code working for me.

@(Html.Kendo().Grid<Commission.Vault.Models.Invoice>()
.Name("InvoiceGrid")
.Columns(columns =>
{
columns.Bound(p => p.CompanyName).Title("Company Name").Width(80);
columns.Bound(p => p.Account).Title("Account").Width(60);
columns.Bound(p => p.MerchantNumber).Title("Merchant No.").Width(60);
columns.Bound(p => p.InvoiceAmount).Title("Invoice Amount").Width(60);
columns.Bound(p => p.ReferralPercentage).Title("Referral %").Width(60);
columns.Bound(p => p.ReferralCommission).Title("Referral Com.").Width(60);
columns.Bound(p => p.DeveloperPercentage).Title("Developer %").Width(60);
columns.Bound(p => p.DeveloperCommission).Title("Developer Com.").Width(60);
})

.EnableCustomBinding(true)
.BindTo(Model.InvoiceList)
.Pageable(
 )
.Sortable()
.Filterable(filterable => filterable
    .Extra(false)
    )
.DataSource(dataSource => dataSource.Server().Total(Model.count).PageSize(15)
 )
 )

And code behind for it in Asp.net is

public async Task<ActionResult> IndexAsync([DataSourceRequest(Prefix = "InvoiceGrid")] DataSourceRequest request)
    {
        List<Invoice> il = new List<Invoice>();
        int pageNo = request.Page-1,numberOfRecord=15;
        InvoicePaging ip = await InvoiceDAL<FileRecord>.getAllInvoices("SProcGetInvoiceList", pageNo, numberOfRecord);
        return View("InvoiceList",ip);
    }

The only thing is that I am always getting the pageSize as 0. Other everything working perfectly.

kendo ui grid complete server side paging and setting total count

1 Answers