Grid rendering is slow even with less data

[Venkat]

Dear All,

One of our web pages is taking nearly 10 – 12 seconds to load. I analyzed the issue and realized that at server it is taking only 4 seconds and immediately I assumed that the remaining time is taken at the client side to load. I did the following to prove my assumption:

 

I have a Rad splitter and two Rad grids are enclosed in the Rad splitter. The OnClientLoad property of the Rad Splitter is assigned with the javascript method OnClientLoad. Under client events of RadAjaxManager  the OnResponseEnd property is assigned with "responseEnd" javascript mehtod.

 

 

         
--------------------------
   <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal"

                ResizeMode="AdjacentPane" OnClientLoad="OnClientLoad"    Style="height: auto !important;"

                Width="100%" BorderSize="0">

 

 

 

     
-------------------------------------
   <ClientEvents OnRequestStart="requestStarted" OnResponseEnd="responseEnd" />

    </telerik:RadAjaxManager>

 

 

I declared global variables and assigned the time when these two events were fired and finally read those variables at the end of responseEnd method by calling alert function to show these variable values in a message box.

 

From these values I observed that the time difference is 6 seconds.

 

From the above observation I concluded that the rendering time of the grids is taking nearly 6 seconds.

 
When user click on the search button in the web page the first rad grid is shown. And when the user clicks on one of the link buttons which is there on every row in the first grid an ajax call is made and the second grid is displayed. Data bind happens to both the grids on the server side during the ajax call.

 
Around 130 rows are displayed in the second grid. And only one column has editable text box. I am using Rad Input Manager control. There are no other calls being made once the page start loading at the client 

Is my above analysis and assumptions are correct? If it is correct, what I can do to improve performance of rendering the grid. Is this an expected behavior for that amount of data?

 

[Angel Petrov]

Hello Venkat,

Your assumptions are correct but it is hard to tell for sure why are you experience such behavior. Generally you should experience such performance when displaying a large number of rows and columns in the grid as there is a lot of HTML that needs to be rendered. In order to increase the performance I suggest that you enable the paging mechanism of the grid and display a smaller amount of rows and columns. Please note that after the response from the server has returned not only the HTML is being rendered but also scripts,images and skins are being loaded which also increases the load time. Could you please elaborate more on how many rows and columns are displayed in the two grids?

I strongly suggest that you examine our performance section in which you can find different tips and tricks on how to optimize the performance.

All the best,
Angel Petrov
the Telerik team

[khawar]

Hello Telerik Team. I have issue with performance with Kendo Grid basically i am displaying grid into gird like first im displaying categories and then course for each category. but when i render its take so long. Please help me with this

 

@model ASPDP.Client.Models.CourseSearchViewModel
  
@(Html.Kendo().Grid<ASPDP.Client.Models.CourseCatalogSearchCategoryViewModel>()
    .Columns(columns =>
    {
        columns.Bound(o => o.Id).Hidden();
        columns.Bound(o => o.sCategoryName).Template(c => "<font color='#6699CC' size='3' >" + c.sCategoryName + "</font> ");
    })
    .Name("CourseCategoryGrid")
    .Scrollable(scrollable => scrollable.Virtual(true))
    .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(100)
            .Read(read => read.Action("Search", "Course").Data("PassParameter"))
    )
    .Groupable(fc => fc.Enabled(false))
    .Events(e => e.DetailExpand("detailExpand"))
    .ClientDetailTemplateId("template") 
    .Events(events => events.DataBound("dataBound").DetailExpand("detailExpand"))

)

<script id="template" type="text/kendo-tmpl">

    @(Html.Kendo().Grid<ASPDP.Client.Models.CourseCatalogViewModel>()
            .Name("CourseCategory_#=Id#")
            .Columns(columns =>
            {
                columns.Bound(c => c.ClassCourseCode).ClientTemplate("<a href='" + Url.Action("Details", "Course", new { Id = "\\#:ClassId\\#" }) + "' class='lnkClassCode' >\\#:ClassCourseCode\\#</a>").Width(120);
                columns.Bound(c => c.CourseMediumDescription).HeaderHtmlAttributes(new { @class = "colwrap" }).Width(120);
                if (Request.IsAuthenticated && Model.Role == "Administrator")
                {
                    columns.Bound(c => c.OrganizationName).HeaderHtmlAttributes(new { @class = "colwrap" }).ClientTemplate("<a href ='javascript:void(0);' onclick='GetEducationProviderDetail(\\#= ProviderId \\#)' >\\#= OrganizationName \\#</a>").Width(140);
                }
                else
                {
                    columns.Bound(c => c.OrganizationName).HeaderHtmlAttributes(new { @class = "colwrap" }).ClientTemplate("<a href =' javascript:void(0);' onclick='GetEducationProviderDetail(\\#= ProviderId \\#)' >\\#= OrganizationName \\#</a>").Width(100);
                }
                columns.Bound(c => c.Location).HeaderHtmlAttributes(new { @class = "colwrap" }).Width(85);
                columns.Bound(c => c.BeginDate).HeaderHtmlAttributes(new { @class = "colwrap" }).Width(90);
                columns.Bound(c => c.EndDate).HeaderHtmlAttributes(new { @class = "colwrap" }).Width(90);
                columns.Bound(c => c.EPTotalFee).HeaderHtmlAttributes(new { @class = "colwrap" }).Width(70);
                columns.Bound(c => c.TotalFee).HeaderHtmlAttributes(new { @class = "colwrap" }).Width(70);
                columns.Bound(c => c.AvailableSeats).HeaderHtmlAttributes(new { @class = "colwrap" }).Width(80);
                columns.Bound(c => c.lstComponentIDs).HeaderHtmlAttributes(new { @class = "colwrap" }).Width(90).ClientTemplate("\\#= generateComponentLink(lstComponentIDs) \\#");
                if (Request.IsAuthenticated)
                {
                    if (Model.Role == "Participant" || ViewBag.ParticipantId != null)
                    {
                        columns.Bound(p => p.CartErrorMessage).Title("Action").ClientTemplate(
                            "\\#  if (CartErrorMessage == null) { \\#" +
                                "<a href='" + Url.Action("CheckAndAddToCart", "Cart", new { classId = "\\#= ClassId \\#", participantId = ViewBag.ParticipantId }) + "' class='btn btn-success lnkAddtoCart' > <i class='fa fa-shopping-cart' aria-hidden='true'></i> Add to Cart</a>" +
                            "\\# }  \\#").HtmlAttributes(new { @class = "cart-btn" }).Width(130);
                    }

                    if (Model.Role == "Administrator")
                    {
                        columns.Bound(c => c.CourseId).HeaderHtmlAttributes(new { @class = "colwrap" }).ClientTemplate("<a class='btn btn-primary' href='" + Url.Action("Update", "Course", new { Id = "\\#= CourseId \\#", returnUrl = HttpContext.Current.Request.RawUrl }) + "'>Edit</a>").Width(80).Title("Action").HtmlAttributes(new { @class = "cart-btn" });
                    }

                }

            })
        .Sortable()
        .HtmlAttributes(new { @class = "common-grid" })
        .ToClientTemplate()
    )

</script>

<script>
    function dataBound() {

 var grid = this;
        grid.tbody.find("tr").each(function (e) {
             
            var $target = $(e.target);
            if (!$target.hasClass("sample-link")) {
                var $this = $(this);
                var $link = $this.find("td.k-hierarchy-cell .k-icon");
                $link.click();   

            }
        });
    }

    function detailExpand(e) {

        var dataItem = e.sender.dataItem(e.masterRow);

        // get the data from the dataitem and pass it to the data source of the child grid.
        e.detailRow.find(".k-grid").data("kendoGrid").dataSource.data(dataItem.CourseCatalogs);
    }
</script>