Multiple Grids Same Page - Blocking Issue

[jhudson]

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.

[Vasil]

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

[jhudson]

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!

 

 

[jhudson]

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.

[jhudson]

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.

[Vasil]

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

[jhudson]

No need for a sample. Thanks Vasil! It's not a big issue. :)

[Amber]

I know this has been a bit, but if you set Autobind to false on all your grids and then initiate your grids via jquery, they will load at the same time.

[Alex Hajigeorgieva]

Hello, Amber,

Thank you for your input. Indeed if we set AutoBind(false) to both grids, we can read their data sources programmatically. Since the dataSource read() method returns a promise, we can chain them like this:

$(document).ready(function(){
   var totalsGrid = $("#totalsGrid").data("kendoGrid");
   var secondGrid = $("#totalsGrid").data("kendoGrid");

   totalsGrid.dataSource.read().then(function(){
       secondGrid.dataSource.read();
   });
});

Another option could be to start the second request when the first grid has finished with the one() method:

$(document).ready(function(){
   var totalsGrid = $("#totalsGrid").data("kendoGrid");
   var secondGrid = $("#totalsGrid").data("kendoGrid");

   totalsGrid.dataSource.one("requestEnd", function(){
       secondGrid .dataSource.read();
   });
    
   totalsGrid.dataSource.read();
});

Kind Regards,
Alex Hajigeorgieva
Progress Telerik