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.