Kendo Grid not Paging data

Question

I use Kendo Grid for my ASP.NET MVC app which uses ajax binding for the read. It binds the data to the first page but does not show the number pages for the grid. it shows (|< < 0 > >|).

Index.cshtml

        @(Html.Kendo().Grid<Club.Areas.Admin.Models.Users>()
            .Name("grid")                
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("List1", "Home"))
                .PageSize(5)                                                
            )                
            .Columns(columns =>
            {
                columns.Bound(p => p.Id).Filterable(false).Width(100);
                columns.Bound(p => p.NickName).Width(100);
                columns.Bound(p => p.UserVisitLastDate).Format("{0:MM/dd/yyyy}").Width(140);                    
                columns.Bound(p => p.Mobile).Width(100);
            })
            .Pageable()                
            .Sortable()                
            .HtmlAttributes(new { style = "width:500px;height:430px;" })                
    )

HomeController

    public class HomeController : Controller
{        
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult List1([DataSourceRequest]DataSourceRequest request)
    {
        List<Users> U = new List<Users>();
        for (int i = 0; i < 100; i++)
        {
            U.Add(new Users
            {
                NickName = "Mehdi",
                Company = "Taral",
                Email = "[email protected]",
                Family = "FT",
                HomeAddress = "Isfahan",
                HomePhone = "03112332940",
                IsActive = true,
                Mobile = "09131025834",
                Name = "Mehdi",
                UserCreateDate = DateTime.Now,
                UserVisitLastDate = DateTime.Now,
                WebSite = "",
                WorkAddress = "Mehdi",
                PostalCode = "1234567890",
                Id = i,
                WorkPhone = "03117726250"
            });
        }
        DataSourceResult result = U.ToDataSourceResult(request);            
        return Json(result,JsonRequestBehavior.AllowGet);            
    }
}

Answer 1

You will have to set serverPaging: true of the DataSource and make sure that the response from server has total field with the amount of the items.

Answer 2

My answer is not completely related to MVC approach, I have used this with WebAPI controller. The datasource should look something like this:

var sampleDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: svcSampleUrl,
            contentType: "application/json; charset=utf-8",
            type: "POST",
            dataType: "json"
        },
        parameterMap: function (options) {
            model.Take = options.take;
            model.Skip = options.skip;
            model.Sort = options.sort;
            model.Filter = options.filter;
            return kendo.stringify(model);
        }
    },
    schema: {
        data: "sampleDTOList",
        total: "totalItems",
        model: {
            fields: {
                ID: { type: "number" },
                Label: { type: "string" },
                Description: { type: "string" }
            }
        }
    },
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
});

The total attribute in the schema is where it gets the total number of records and calculates the number of pages to show. In your case you are receiving the data of the first page, and the grid does not know how much data there is in order to calculate the total number of pages there needs to be.