Displaying grid data after switching to Server Side paging

Question

I am converting my application to use Server Side Paging with the Kendo Grid UI. Prior to switching serverPaging to true, I was properly displaying my grid contents, and paging on the client side. However, once I turned on the serverPaging, my data was no longer visible. I have checked the network call, and my data is returning (only 2 records of 8 total) as expected, but I am not seeing it in the grid.

Here is the grid construction:

$v.KendoGrid.makeGrid(gridName, {
  columns: [
    { field: 'IdentifierCode', title: 'User Name' },
    { field: 'CompanyName', title: 'Company' },
    { field: 'Email', title: 'Email' }
  ],
  dataSource: {
    pageSize: 2,
    schema: {
      data: 'Data', // records are returned in the data section of the response
      model: {
        id: 'Id',
        fields: {
          IdentifierCode: { type: 'string' },
          CompanyName: { type: 'string' },
          Email: { type: 'string' }
        }
      },
      total: 'Total'    // total number of records are in the total section of the response
    },
    serverPaging: true,
    transport: {
      read: {
        url: window.urlConfigs.root + "Security/UserAccount/PagedListing"
        dataType: "json",
        type: "GET"
      }
    }
  },
  editable: false,
  filterable: true,
  height: 464,
  pageable: true,
  scrollable: true,
  sortable: true
});

Here is the MVC Controller method:

public ActionResult PagedListing(int pageSize, int skip)
{
    var entities = ReadRepo.All();
    var total = entities.Count();
    var data = entities.Skip(skip).Take(pageSize).Select(MapEntityToViewModel).ToList();

    return Json(new { Total = total, Data = data }, JsonRequestBehavior.AllowGet);
}

And here is the data I get back on the network call:

{"Total":8,"Data":[{"Id":"928f0bb2-608b-417b-bf6e-e5c58f85fec2","IdentifierCode":"admin","FirstName":"Administrator","MiddleName":"of","MiddleNameHuman":"of","LastName":"GasStream","DisplayName":"Administrator of GasStream","Email":"[email protected]","IsExternal":false,"UserTypeHuman":"Internal","CompanyId":"75bb05a4-1ec2-4042-aeba-a229008aca9f","CompanyName":"Entessa Pipeline & Terminal, MLP","CompanyIdentifierCode":"SHA","Password":"wFg/a/NEU6WM8z4YZBUduitIDROfeFz/+Za6leAHnBE=","PasswordChanged":false,"ForceNewPasswordFlag":false,"Settings":[],"RoleGroups":[]},{"Id":"47c29025-cfa8-4447-9ab7-a229008ad088","IdentifierCode":"contractcarl","FirstName":"Carl","MiddleName":null,"MiddleNameHuman":"","LastName":"Smithers","DisplayName":"Carl Smithers","Email":"[email protected]","IsExternal":false,"UserTypeHuman":"Internal","CompanyId":"75bb05a4-1ec2-4042-aeba-a229008aca9f","CompanyName":"Entessa Pipeline & Terminal, MLP","CompanyIdentifierCode":"SHA","Password":"IWdH+qDIOucNrre6V4AgI6Exm2Vq5qkIdXdsWfP6jn4=","PasswordChanged":false,"ForceNewPasswordFlag":false,"Settings":[],"RoleGroups":[]}]}

I suspect I have missed something small, but after looking at this and trying all sorts of possible work-arounds, I cannot see it, so I am asking for some help. I thought once I got the data to return small sets from the Server, things would get simpler.

Thanks in advance,

Drew

Answer 1

I ended up finding the answer. the $v.KendoGrid was a method that wrapped the kendoGrid call itself, and in there something was getting reset to not allow the data to be parsed properly when it came back from the server properly paged.

I have since re-worked the mess so I can establish the necessary parameters in the $v.KendoGrid call for just my type of grid.

Thanks for the help, and the eyes to catch the comma, Brett.

Drew