MVC Kendo Grid conversion ToDataSourceResult taking long, how to speed up

Question

I am new to MVC and absolutely a beginner in Kendo.

I have a Kendo grid on an MVC page which is taking too long to load, after a bit of investigation I discovered that the following line is the culprit

return Json(result.ToDataSourceResult(request));

What are the alternatives to DatasourceResult? How can i speed things up?

My method looks like this:

public ActionResult GetExportJobDetails([DataSourceRequest] DataSourceRequest request, string hubId)
{
    string jobStratNumber = "";
    if (!string.IsNullOrEmpty(hubId))
    {
        jobStratNumber = getJobsStartNumber(hubId);
        TempData["hubId"] = hubId;
    }
    var result = helperServiceLayer.getExportJobsNotDeclared(jobStratNumber);
    //var x = result.ToDataSourceResult(request);
    string jsonResponse = JsonConvert.SerializeObject(result);

    var returnResult = new JsonResult
    {
        Data = JsonConvert.DeserializeObject(jsonResponse)
    };

    // Builds but the grid does not show any data.
    //return Content(jsonResponse, "application/json");
    //return Content(returnResult, "application/json");
    //return returnResult;

    // Works and grid shows data but it is extremely slow.
    return Json(result.ToDataSourceResult(request));
}

My grid code (CSHTML) looks like this:

@(Html.Kendo().Grid<DT.SInt.Models.JobDetails>()
                .Name("Grid")
                    //.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                    .Editable(editable => editable.Mode(GridEditMode.InCell))
                .Columns(columns =>
                {
                    @*columns.Template(@<text></text>).ClientTemplate("<a href='' onclick=\"save('#=JobNumber#','#=ConsignmentNumber#')\">Send</a>").Width(50).Locked(true).Lockable(false);*@
                    columns.Template(@<text></text>).ClientTemplate("<div class='sendClass'><a href='' >Send</a></div>").Width(38);
                    columns.Bound(j => j.JobNumber).Width(78)
                    .Filterable(ftb => ftb.Cell(cell => cell.Operator("Contains").SuggestionOperator(FilterType.Contains).ShowOperators(false).InputWidth(100)))
                    .HeaderHtmlAttributes(new { style = "font-weight:bold;" });
                    columns.Bound(j => j.ConsignmentNumber).Title("Consignment").Width(84).Filterable(false).HeaderHtmlAttributes(new { style = "font-weight:bold;" });
                    columns.Bound(j => j.ShipperCode).Width(60).Filterable(false).HeaderHtmlAttributes(new { style = "font-weight:bold;" });
                    columns.Bound(j => j.ShipperName).Width(220).Filterable(false).HeaderHtmlAttributes(new { style = "font-weight:bold;" });
                    //columns.Bound(j => j.ConsigneeName).Width(165).Lockable(false);
                    columns.Bound(j => j.HomeModel.SAddressCode).Title("SCode").Width(70).Filterable(false).HeaderHtmlAttributes(new { style = "font-weight:bold;" });
                    columns.Bound(j => j.JobType).Width(50).Filterable(false).HeaderHtmlAttributes(new { style = "font-weight:bold;" });
                    columns.Bound(j => j.FlightNumber).Title("Flight No.").Width(60).Filterable(false).HeaderHtmlAttributes(new { style = "font-weight:bold;" });
                    columns.Bound(j => j.FlightDate).Width(80).Filterable(false).HeaderHtmlAttributes(new { style = "center;font-weight:bold;" }).HtmlAttributes(new { @class = "flight-date" });
                    //columns.Bound(p => p.HomeModel.DeclarationType).Width(140).ClientTemplate("#= HomeModel.DeclarationType #").Width(50).HeaderHtmlAttributes(new { style = "font-weight:bold;" });
                    columns.Template(@<text></text>).ClientTemplate("<div class='amendUcrClass'><a href='' >Shippers UCR</a></div>").Width(70);
                    //columns.Bound(j => j.HomeModel.GoodDescription).Width(115);
                    //columns.Bound(j => j.FlightDate).Width(120).EditorTemplateName("dateTimeEditor")
                    //                .ClientTemplate("#= FlightDate ? kendo.toString(kendo.parseDate(FlightDate), 'dd/MM/yyyy') : '' #");

                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(25)
                    .ServerOperation(false)
                    .Batch(true)
                    .Model(m =>
                    {
                        m.Id(p => p.ConsignmentNumber);
                        //m.Field(p => p.HomeModel.DeclarationType).DefaultValue(1);
                        m.Field(p => p.JobNumber).Editable(false) ;
                        m.Field(p => p.ConsignmentNumber).Editable(false);
                        m.Field(p => p.ShipperCode).Editable(false);
                        m.Field(p => p.ShipperName).Editable(false);
                        m.Field(p => p.HomeModel.SAddressCode).Editable(false);
                        //m.Field(p => p.ConsigneeName).Editable(false);
                        m.Field(p => p.JobType).Editable(false);
                        m.Field(p => p.FlightNumber).Editable(false);
                        m.Field(p => p.FlightDate).Editable(false);
                        m.Field(p => p.HomeModel.GoodDescription).Editable(false);
                    })
                    .Read(r => r.Action("GetExportJobDetails", "Home").Data("getAdditionalParam"))
                    .Events(events => events.Sync("sync_handler_ShipmentGridNotDeclared"))
                )
                .Events(events => events.DataBound("onDataBound_NotClearedGrid"))
                //.AutoBind(true)
                .Sortable(sortable => sortable
                    .AllowUnsort(true)
                    .SortMode(GridSortMode.MultipleColumn)
                    .ShowIndexes(true))
                //.Filterable()
                .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                //.ColumnMenu()
                //.Groupable()
                .HtmlAttributes(new { @class = "small", style = "height:68.00em;" })
                .Pageable(p => p.Refresh(true).ButtonCount(10).PageSizes(new int[] { 25, 50, 100, 200 }))
                .Scrollable()
                .NoRecords(x => x.Template("<div class='empty-grid'></div>"))
//.Resizable(r => r.Columns(true))
//.Reorderable(r => r.Columns(true))

)

What if you get rid of that like `return Json(result);` ? I never needed that method to work with MVC and Kendo UI. You should also add your grid code, are you using kendo for jQuery or for ASP.Net ? — DontVoteMeDown, Oct 15 '19 at 11:41
@DontVoteMeDown - Thanks for your comment. I have updated my question now to show the datagrid code (I am assuming you wanted to see the CSHTML). I am using Kendo for ASP.NET. Very funny username by the way. — Abe, Oct 15 '19 at 11:51
Make sure your result is an `IQueryable`. If your service layer is doing a `ToList()` it hits the database and then applies the paging. Should not need that serialize/deserialize code. See example [here](https://demos.telerik.com/aspnet-mvc/grid) — Steve Greene, Oct 15 '19 at 22:53

Richard · Answer 1 · 2021-03-08T13:06:02.217

1

Does the result have a lot of rows ?

Remove the

.ServerOperation(false) //Paging, sorting, filtering, and grouping will be done client-side.

When server operation is false the entire query result is sent back to the browser, so this could be millions of records depending.

When server operation is true the request contains the clients page, pageSize, filtering information, etc which the server-side utilizes during

result.ToDataSourceResult(request)

the end effect being at most pageSize rows being sent back to the client.

edited Mar 08 '21 at 13:06

answered Oct 16 '19 at 15:01

Richard

25,390
3
25
38

Yes the result has tons of rows. Every week we get 15000 records added especially the initial page needs to display all results (paged). – Abe Oct 17 '19 at 07:43
By removing the ServerOperation setting the default `true` will be used. After taking the advice to simply `Json(result)` what kind of timing and data transfer size are you seeing in the browser Developer Tools/Network tab for the Read call? – Richard Oct 17 '19 at 11:55

MVC Kendo Grid conversion ToDataSourceResult taking long, how to speed up

1 Answers1