Grid not loading big data

3 posts, 0 answers
  1. Peer
    Peer avatar
    2 posts
    Member since:
    May 2016

    Posted 20 Jun Link to this post

    Hi,

    I have a problem while loading data to a grid. I want to disable Pagination and show all data on one page.

     

    @(Html.Kendo().Grid<WasteGridViewModel>()
          .Name("gridAllWaste")
          .Columns(columns =>
          {
              columns.Bound(c => c.LocationCode).Title(@Helpers.Localize("gridLabel_locationCode").ToString());
              columns.Bound(c => c.Timestamp).Format("{0:dd-MM-yyyy}").Title(@Helpers.Localize("gridLabel_timestamp").ToString());
              columns.Bound(c => c.Value).Title(@Helpers.Localize("gridLabel_value").ToString());          
              if (User.Identity.IsInRole(UserRole.EditWaste))
              {
                  columns.Command(command =>
                  {
                      command.Edit().Text(@Helpers.Localize("edit").ToString());
                      if (User.Identity.IsInRole(UserRole.AllAccess))
                      {
                          command.Custom(@Helpers.Localize("delete").ToString()).Click("openWindow");
                      }
                  }).Width(250);
              }
     
          })
          .ToolBar(toolbar =>
          {
              if (User.Identity.IsInRole(UserRole.EditWaste))
              {
                  toolbar.Create().Text(@Helpers.Localize("wasteGrid_add").ToString());
              }
          })
          .Scrollable(s => s.Height("auto"))
          .Groupable()
          .Sortable()
          .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("WasteEdit").DisplayDeleteConfirmation(false))
          .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
          .Pageable(pageable => pageable
              .Refresh(true)
              .PageSizes(true)
              .ButtonCount(5))
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(50)
              .Events(events =>
              {
                  events.Error("errorHandler");
                  events.RequestEnd("onRequestEnd");
     
              })
              .Model(model => model.Id(p => p.WasteId))
              .Read(read => read.Action("GetAllWaste", "Waste"))
              .Create(update => update.Action("CreateWaste", "Waste"))
              .Update(update => update.Action("UpdateWaste", "Waste"))
              .Destroy(update => update.Action("DeleteWaste", "Waste"))
          ))

     

    Above code works fine, but when I remove Pageable and change PageSize to bigger number, for example 6000 grid doesn't show any data. I get respone 302 on my request:

    Request URL:http://localhost:29786/Waste/GetAllWaste
    Request Method:POST
    Status Code:302 Found
    Remote Address:[::1]:29786
    Referrer Policy:no-referrer-when-downgrade
    Repose Headers:
    Cache-Control:private, s-maxage=0
    Content-Length:157
    Content-Type:application/json; charset=utf-8
    Date:Tue, 20 Jun 2017 09:04:53 GMT
    Location:/Error/?aspxerrorpath=/Waste/GetAllWaste
    Server:Microsoft-IIS/10.0
    X-AspNet-Version:4.0.30319
    X-AspNetMvc-Version:5.2
    X-Powered-By:ASP.NET
    X-SourceFiles:=?UTF-8?B?QzpcUmVwb3NpdG9yaWVzXFdhc3RlXHNyY1xFbmdpZS5XYXN0ZVxFbmdpZS5XYXN0ZVxXYXN0ZVxHZXRBbGxXYXN0ZQ==?=

     

    Thanks in advance for any help.

  2. Peer
    Peer avatar
    2 posts
    Member since:
    May 2016

    Posted 20 Jun Link to this post

    Ok, problem solved :)

    The solution was to increase JSON length in controller return method:

    return new JsonResult() { Data = _wasteService.GetAllWastesForGrid().ToDataSourceResult(request), JsonRequestBehavior = JsonRequestBehavior.AllowGet, MaxJsonLength = Int32.MaxValue };
  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1789 posts

    Posted 22 Jun Link to this post

    Hello Peer,

    Indeed when a lot of data is passed from the server the MaxJsonLength may be exceeded. You can modify it, however, have in mind that this can result in decreased performance in some scenarios. 

    When having a large number of records it is recommended to enable paging for the Grid component. This way only the items for the current page can be returned from the server.

    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top