Kendo, how to do Grid server paging using mvc4 helper

Question

I am using mvc4. On one of my page, it has Kendo Grid. I want to show 5 rows per page. I have no problem doing it using pure javascript, however, If I am using mvc helper. I got lost, couldn't find any samples online.

here's my javascript code.

        <script language="javascript" type="text/javascript">

            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "json",
                        serverPaging: true,
                        pageSize: 5,
                        transport: { read: { url: "Products/GetAll", dataType: "json"} },
                        schema: { data: "Products", total: "TotalCount" }
                    },
                    height: 400,
                    pageable: true,
                    columns: [
                            { field: "ProductId", title: "ProductId" },
                            { field: "ProductType", title: "ProductType" },
                            { field: "Name", title: "Name" },
                            { field: "Created", title: "Created" }
                        ],
                    dataBound: function () {
                        this.expandRow(this.tbody.find("tr.k-master-row").first());
                    }
                });
            });

now if i am using mvc helper

            @(Html.Kendo().Grid(Model)
                .Name("Grid")  //please help me to finish the rest

Update:

Adding the action code.

    [HttpPost]
    public ActionResult GetAll([DataSourceRequest]DataSourceRequest request, int id)
    {
        var products= ProductService.GetAll(id);

        return Json(products.ToDataSourceResult(request));
    }

GetAll method in the service layer:

    public IQueryable<Product> GetAll(int id)
    {
        var products= ProductRepository.Get(p => p.Id== id && p.IsActive == true, null, "ProductionYear")
                    .OrderBy(o => o.Name); //.ToList();

        return Product.Select(p => new ProductVM()
        {
            Name = p.Name,
            ProductionYear= p.ProductionYear.Year.ToString()
            Id = p.Id
        }).AsQueryable();
    }

now, if I run the app, i will get following error:

"LINQ to Entities does not recognize the method 'System.String ToString()' method, and this method cannot be translated into a store expression."}

in the GetAll method, I comment out the "ToList()". If I use ToList, everything works. but I will query all the rows back instead just those rows I needed for that page.

Answer 1

You can set the PageSize inside the DataSource method. So you will need something like:

@(Html.Kendo().Grid(Model)
     .Name("Grid") 
     .DataSource(dataSource => dataSource.Ajax()
                                    .PageSize(5)
                                    .Read(c => c.Action("GetAll", "Products")
                                    .Model(s => s.Id(m => m.Id)))
     .Columns(columns =>
     {
        columns.Bound(m => m.ProductId).Title("ProductId");
        //other colums
     })
    .Events(g => g.DataBound("somefunction"))
    .Pageable(true))

You can find more info the KendoUI Grid's Asp.NET MVC wrappers documentation.

Answer 2

If you are not using Kendo's ASP.NET MVC wrappers and are using the Kendo JavaScript objects directly and you are trying to do server side paging, then you need to create your datasource as follows:

var dataSource = {
    "type":"aspnetmvc-ajax",
    "serverSorting": true,
    "serverPaging": true,
    "page": 1,
    "pageSize": 8,
    "schema": {
      "data":"items",
      "total":"count",
      "errors":"errors"
    }
};

And your Read controller method will look something like:

    public ActionResult List_Read([DataSourceRequest]DataSourceRequest request) {
        try {
            var model = null /* prepare your model object here contain one page of grid data */;

            // using Json.NET here to serialize the model to string matching the
            // schema expected by the data source
            var content = JsonConvert.SerializeObject(new { count = model.Count, items = model.Items }, Formatting.None);

            return Content(content, "application/json");
        }
        catch (Exception exception) {
            // log exception if you need to

            var content = JsonConvert.SerializeObject(new { errors = exception.Message.ToString() }, Formatting.None);

            return Content(content, "application/json");
        }
    }

type, serverSorting and serverPaging are important to make sure paging and sorting happens server-side. type must be aspnetmvc-ajax, otherwise the query data will not be recognized by the model binder that has been specified by the [DataSourceRequest] attribute in the Read method. You cannot omit that attribute unless you want to write your own custom modelbinder to parse the query data sent by the kendo dataSource, which does not conform to the modelbinding conventions used by the DefaultModelBinder in ASP.NET MVC.

Answer 3

The other answer will work if you are using Kendo UI for ASP.NET MVC. If you don't you need to implement paging yourself. The Kendo DataSource will send pageSize and current page when making a request. You can use that to do the paging. It also sends "take" and "skip" which makes things even easier (hint Linq).

Answer 4

The error "LINQ to Entities does not recognize the method 'System.String ToString()' method, and this method cannot be translated into a store expression."} is self explanatory, to gat around this, you should do something like

return Product.**AsEnumerable**.Select(p => new ProductVM()
        {
            Name = p.Name,
            ProductionYear= p.ProductionYear.Year.ToString()
            Id = p.Id });

using AsEnumerable brings all records from the db, so best to use after any filtering

products.where(x => x.active = true).AsEnumerable

rather then products.AsEnumerable.where(x => x.active = true)

Answer 5

Download kendo examples, then unzip and follow <your directory>\Kendo UI for ASP.NET MVC Q1 2013\wrappers\aspnetmvc\Examples\Areas\razor\Views\web\grid\ for the view index and <your directory>\Kendo UI for ASP.NET MVC Q1 2013\wrappers\aspnetmvc\Examples\Controllers for IndexController

in your view you might also want .ServerOperation(true) as bellow to avoid Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property. If you have big data to fetch

@(Html.Kendo().Grid(<yourmodel>)
    .Name("Grid")
    .Columns(columns =>
       ...
    })

        .Filterable()
        .Pageable()

        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(8)
            .ServerOperation(true) )

            .Model(model =>
            {
                model.Id(p => p.Id);
                ...
            })
        )
    )

also in controller in ActionResult Products_Read consider

  DataSourceResult result = GetProducts().ToDataSourceResult(request,  o => new { Id = o.Id, ... } );
  return Json(result , JsonRequestBehavior.AllowGet);