CODEWITHSUNDEEP
c#asp.net-mvckendo-uikendo-gridkendo-asp.net-mvc
Nic
Nic

Reputation: 12846

Pagination does not work

I've got a Kendo MVC Grid where the pagination does not work. It's loading the resultset in a single page, and clicking the page buttons does not do anything.

The script files are loaded correctly and in the right order (jquery-1.11.2.min.js, kendo.all.min.js and kendo.aspnetmvc.min.js).

I'm using Kendo UI version 2015 Q1 (2015.1.318.545).

View

@(Html.Kendo().Grid<MyModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Type);
        columns.Bound(c => c.Count);
        columns.Bound(c => c.Date);
    })
    .Filterable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(10)
        .PageSizes(new[] { 20, 50, 100 }))
    .DataSource(ds => ds
        .Ajax()
        .Read(r => r.Action("GetGridData", "Home", new { code = "code" }))
        .PageSize(20)
    )
)

Controller

public ActionResult GetGridData([DataSourceRequest]DataSourceRequest request, string code = "")
{
    var result = MyService.GetGridData(code);
    return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

Service

public IQueryable<MyModel> GetGridData(string code) 
{
    using (var dbContext = new MyEntities())
    {
        return dbContext.Products.Where(w => w.Code == code)
                                 .Select(s => new MyModel {
                                     Type = s.Type,
                                     Count = s.Count,
                                     Date = s.Date
                                 });
    }
}

When loading the page, the DataSourceRequest looks like this:

Kendo DataSourceRequest

Without a proper page size the result is the full dataset, as seen here:

Kendo DataSourceResult

Upvotes: 0

Views: 1083

Answers (2)

Nic
Nic

Reputation: 12846

I ended up fixing it by adding .Type(HttpVerbs.Get) to the read method. I have no idea why this fixes the issue, because it was already doing a Get. With .Type(HttpVerbs.Get) it properly adds the DataSourceRequest parameters to the url.

@(Html.Kendo().Grid<MyModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Type);
        columns.Bound(c => c.Count);
        columns.Bound(c => c.Date);
    })
    .Filterable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(10)
        .PageSizes(new[] { 20, 50, 100 }))
    .DataSource(ds => ds
        .Ajax()
        .Read(r => r.Action("GetGridData", "Home", new { code = "code" }).Type(HttpVerbs.Get))
        .PageSize(20)
    )
)

Upvotes: 0

SBirthare
SBirthare

Reputation: 5137

Hey I tried your code and it works fine on my machine. I could see PazeSize=20 in GetGridData method.

The only change I had to do to run your code is change below line:

.Read(r => r.Action("GetGridData", "Home", new { code = 'code' }))

to:

.Read(r => r.Action("GetGridData", "Home", new { code = "code" }))

I however doubt that would be the reason for your problem as with above line you will get error "Bad compile time constant" which you are not getting.

I suspect the reason could be a mismatch in jquery and kendo java script file.

I suggest you take this code out in a sample mvc application and try there using Kendo suggested js versions. For example if you are using Kendo 2014 Q3 then:

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.aspnetmvc.min.js"></script>

Just in case if it helps full view code Test.cshtml:

@using Kendo.Mvc.UI
@using MvcApplication16.Controllers
@model MvcApplication16.Controllers.MyModel

@{
    ViewBag.Title = "Test";
    Layout = null;
}

  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.aspnetmvc.min.js"></script>

@(Html.Kendo().Grid<MyModel>()
      .Name("Grid")
      .Columns(columns =>
      {
          columns.Bound(c => c.Type);
          columns.Bound(c => c.Count);
          columns.Bound(c => c.Date);
      })
      .Filterable()
      .Pageable(pageable => pageable
          .Refresh(true)
          .PageSizes(true)
          .ButtonCount(10)
          .PageSizes(new[] { 20, 50, 100 }))
      .DataSource(ds => ds
          .Ajax()
          .Read(r => r.Action("GetGridData", "Home", new { code = "code" }))
          .PageSize(20)
      ))

Upvotes: 1

Related Questions