CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3kendo-uikendo-gridkendo-asp.net-mvc
Peter Channon
Peter Channon

Reputation: 131

KendoUI Grid binding remote data to showing

I have a kendoUI grid on the *.cshtml page. I'm trying to implement server side paging to the grid. It will only return 10 records at a time, as that is the page size, and a count of all the active records to determine the number of pages needed. The data is being returned from the method but not displaying on the front end. Please see below,

It shows the total number of pages passed through but not the data

Data is being passed front end when I look at the passed JSONResult,

Passed Data from the JSONResult

*.cshtml -

@(Html.Kendo()
        .Grid<Reckon.Service.Payroll.Data.DTO.EmployeeDto>()
        .Name("EmployeeGrid")
        .Columns(cols =>
        {
            cols.Bound(emp => emp.Id).Title("ID").Hidden();
            cols.Bound(emp => emp.EmployeeNumber).Title("Employee ID").Width(100);
            cols.Bound(emp => emp.IsPayRunReady).Title("Status").Width(10).ClientTemplate("<span title='This employee is #= IsPayRunReady ? '': 'not '#payrun ready.' class='#= IsPayRunReady ? 'okICN-small' : 'alertICN-small'#'>#= IsPayRunReady ? '': 'Not' # #= IsPayRunReady ? 'P':'p'#ayrun ready</span>");
            cols.Bound(emp => emp.FirstName).Title("First Name").Width(100);
            cols.Bound(emp => emp.LastName).Title("Last Name").Width(100);
            cols.Bound(emp => emp.DateOfBirth).Title("DOB").Format("{0:dd/MM/yyyy}").Width(100);
            cols.Template(@<text></text>).ClientTemplate("<a href='" + Url.Action("EmployeeDetailEdit", "EmployeeDetail") + "/#=Id#'>Edit</a>").Width(50);
            cols.Template(@<text></text>).ClientTemplate("<a href='" + Url.Action("EmployeeDetailRead", "EmployeeDetailRead") + "/#=Id#'>View</a>").Width(50);
            cols.Template(@<text></text>).ClientTemplate("<a class='k-button xxx' tag='#=Id#'>Delete</a>").Width(50);
        })
        .Pageable(pageable => pageable.ButtonCount(5))
        .Sortable(sortable => sortable.AllowUnsort(false))
        .Filterable()
        .Resizable(resize => resize.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .Navigatable()            
        //.Events(evt => evt.DataBound("afterGridLoaded"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .PageSize(10)
            .ServerOperation(true)
            .Model(model => { model.Id(emp => emp.Id); })
            .Read(read => read.Action("EmployeeListPerPage", "EmployeeDetail"))
    )
)

Controller.cs -

public ActionResult EmployeeListPerPage([DataSourceRequest] DataSourceRequest request)
    {
        Dispose();
        EmployeeListRequest empList = new EmployeeListRequest();
        empList.PageNum = request.Page;
        empList.PageSize = request.PageSize;

        var dataSource = _payrollService.GetEmployeeListPerPage(empList);
        var model = new EmployeeListModel(dataSource);
        return Json(new
        {
            Data = model.Employees.ToDataSourceResult(request),
            Total = dataSource.Total
        }, JsonRequestBehavior.AllowGet);

        //return Json(model.Employees.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

This will gives me the option to set the number of pages but the data is not being display on the page. When I used the return JSON at the bottom which is commented out, it will display the data on the grid but then will only show one page. Please see below,

Only showing one page

Any help would to correct this issue would be greatly appreciated.

Upvotes: 2

Views: 2082

Answers (1)

CodingWithSpike
CodingWithSpike

Reputation: 43718

Your returned JSON in the screenshot has incorrectly nested fields:

{
  Data: {
    Data: [],
    Errors: ,
    Total: 10
  },
  Total: 10001
}

The DataSource is looking for your data in the Data property, but the array is actually in Data.Data so no data is being displayed.

The line that is commented out looks like it should be correct, but it looks like it is returning a Total of only 10. That is the reason only 1 page is displayed when you use that code, I can't tell from the code you have posted why .ToDataSourceResult() would not find the correct total.

Can you do this instead?

var dataSourceResult = model.Employees.ToDataSourceResult(request); // let Kendo build the data
dataSourceResult.Total = dataSource.Total; // replace total with your own count.
return Json(dataSourceResult, JsonRequestBehavior.AllowGet); // return as JSON

Upvotes: 2

Related Questions