Multiple Grids Same Page - Blocking Issue

7 posts, 1 answers
  1. jhudson
    jhudson avatar
    11 posts
    Member since:
    Apr 2008

    Posted 22 Feb Link to this post

    I'm seeing an issue where if there are multiple grids on a page they do not load at the same time. One seems to load and then the other, while the other shows the ajax spinner. Here is the code in question:

     <div style="clear: both; padding-top: 10px; ">
            @(Html.Kendo().Grid<SalesSummary>()
                          .Name("totalsGrid")
                          .Columns(columns =>
                          {
                              columns.Bound(c => c.TotalInvoicedSales).Title("Invoiced Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" });
                              columns.Bound(c => c.TotalCalculatedSales).Title("Total Sale").Format("{0:c}").HtmlAttributes(new { @class = "money" });
                              columns.Bound(c => c.NumberOfOrders).Title("# of Orders").Format("{0:0}");
                              columns.Bound(c => c.NumberOfDistinctItems).Title("# Of Unique Items Sold").Format("{0:0}");
                              columns.Bound(c => c.TotalQtyOrdered).Title("Qty Ordered").Format("{0:0}");
                              columns.Bound(c => c.TotalQtyShipped).Title("Qty Shipped").Format("{0:0}");
                          })
                          .DataSource(dataSource => dataSource
                              .Ajax()
                              .Read(read => read.Url(Url.HttpRouteUrl("Default", new { controller = "SalesReps", action = "Sales_GetSalesTotalsData" })).Data("getFilterValuesForTotalsGridRead")))
            )
        </div>

        <div style="width: 100%;">
            <div style="float: left; width: 900px; margin-top: 10px; font-weight: bold; font-size: .9em;">
                Sales Reps:
            </div>
        </div>
        <div style="clear: both; padding-top: 10px; ">
            @(Html.Kendo().Grid<SalesRepSummaryItem>()
                          .Name("grid")
                          .NoRecords()
                          .Sortable()
                          .Columns(columns =>
                          {
                              columns.Bound(c => c.SalesRepFullName).Title("Sales Rep");
                              columns.Bound(c => c.TotalSales).Title("Invoiced Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" }).Width(150);
                              columns.Bound(c => c.CalculatedTotalSales).Title("Total Sales").Format("{0:c}").HtmlAttributes(new { @class = "money" }).Width(150);
                              columns.Bound(c => c.NumberOfOrders).Title("# of Orders").Format("{0:0}");
                              columns.Bound(c => c.NumberOfItems).Title("# Of Items").Format("{0:0}");
                              columns.Bound(c => c.TotalOrdered).Title("Qty Ordered").Format("{0:0}");
                              columns.Bound(c => c.TotalShipped).Title("Qty Shipped").Format("{0:0}");
                          })
                          .DataSource(dataSource => dataSource
                              .Ajax()
                              .Read(read => read.Url(Url.HttpRouteUrl("Default", new { controller = "SalesReps", action = "Sales_GetSalesData" })).Data("getFilterValuesForGridRead")))
            )
        </div>
    I'm seeing this on the main load as well as when I attempt to force a rebind:
      function rebindGrids() {
            var grid = $("#totalsGrid").data("kendoGrid");
            grid.dataSource.read();

            grid = $("#grid").data("kendoGrid");
            grid.dataSource.read();
        }

    It's not a speed issue, I can see that the second grid does not load until the first finishes. Commenting out the first grid makes the second grid render instantly. With the first grid showing the second does not render until the first grid shows data.

  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 24 Feb Link to this post

    Hi Joshua,

    Could you check the network tab in the browsers developer tools, to see what requests are made and how many time each request takes.

    If the second requests start after the first finishes, then it could be JavaScript problem.

    And if the both requests are started together, but the second one takes longer, then it is something into the server controller that waits first one to finish until handling the second.

    Regards,
    Vasil
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. jhudson
    jhudson avatar
    11 posts
    Member since:
    Apr 2008

    Posted 24 Feb in reply to Vasil Link to this post

    Hmmm, something is weird. I'll keep looking. The second request does seem to be taking a long time. The weird thing is if I remove the first gird that same call is much quicker. Maybe a database blocking issue.

     

    Thanks!

     

     

  5. jhudson
    jhudson avatar
    11 posts
    Member since:
    Apr 2008

    Posted 26 Feb in reply to jhudson Link to this post

    So, after more research this is not a database blocking issue. The actual data sources are getting called at different times. I have some logging code that logs the method calls to papertrail.com.

    Looking at the attached log Sales_GetSalesTotalsData is called 2016-02-26 08:54:57.4746

    it then returns at 2016-02-26 08:54:57.5016

    Only once it returns does the second grids call happen (Sales_GetSalesData) at 2016-02-26 08:54:57.9870 and returns at 2016-02-26 08:54:57.9960.

    Now the total time from first gird call to return of second grid all is only around half a second, but it is enough to show the ajax spinners on the second grid, which makes the page look slower than it should be.

  6. jhudson
    jhudson avatar
    11 posts
    Member since:
    Apr 2008

    Posted 26 Feb in reply to jhudson Link to this post

    When I was using the Webform Versions of the Telerik controls you could tell a progress spinner not to show up unless a certainamount of time had passed, is that possible with Kendo?

    This isn't really a question of slowness on the calls but perceived slowness. It does take a little bit to render as well, I'm only looking at the pure data calls above.

  7. Answer
    Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 01 Mar Link to this post

    Hi Joshua,

    The grid have no option for delaying the progress indicator.
    You can show/hide it using custom code as shown in this topic. If acceptable solution is to show the progress on both grids, until they both finish loading, I could prepare you a sample.

    Regards,
    Vasil
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. jhudson
    jhudson avatar
    11 posts
    Member since:
    Apr 2008

    Posted 04 Mar in reply to Vasil Link to this post

    No need for a sample. Thanks Vasil! It's not a big issue. :)
Back to Top
UI for ASP.NET MVC is VS 2017 Ready