Kendo UI Progress Indicator with Large Grid Disappears

Recently I have been working on a rather large application for a re-insurance company and they often have extremely large complex grids of information they want to display and interact with.  There are times where we have to manipulate the data after it’s returned from the ajax call and before it’s rendered to the user.  The issue here is that the native progress indicator that displays when a grid is loaded is actually only displayed when the call is initiated but disappears after the data call is returned, not when the data is rendered.  Depending on the amount of data you are returning and how much manipulation you have to perform, there could be quite a delay between the time the progress indicator disappears and when the grid is actually rendered leaving the user to think something is wrong.  We are using the KendoUI MVC controls in Razor.  The solution I came up with was to hook into the RequestStart event on the datasource to turn the progress indicator on and the DataBound event on the grid to turn the indicator off.  This will now keep the progress indicator displayed until the DataBound is called which is essentially the same as when the grid is rendered.

Razor Code:

@(Html.Kendo().Grid()
   .Name("k-grid-payLogs")
   .DataSource(dataSource => dataSource
      .Ajax()
      .Aggregates(aggregates =>
      {
         aggregates.Add(p => p.AmountBilled).Sum();
         aggregates.Add(p => p.BillReviewFees).Sum();
         aggregates.Add(p => p.RepricedPaidAmount).Sum();
         aggregates.Add(p => p.TotalMccaPaymentRequest).Sum();
         aggregates.Add(p => p.ExpAdjustmentAmount).Sum();
         aggregates.Add(p => p.LossAdjustmentAmount).Sum();
         aggregates.Add(p => p.AdjustedPaymentRequestAmount).Sum();
       })
       .Read(read => read.Action("getDataJsonAjax", "reimbursementrequest")
       .Data("pageModule.getPayLogCriteria"))
       .PageSize(100)
       .Events(e => e.RequestStart("pageModule.onRequestStart"))
    )
   .Pageable(pageable => pageable.Refresh(true)
   .PageSizes(new[] { 10, 20, 50, 100 })
   .ButtonCount(5))
   .Sortable()
   .Filterable()
   .ColumnMenu()
   .Reorderable(reorder => reorder.Columns(true))
   .Resizable(resize => resize.Columns(true))
   .Events(e => e.DataBound("pageModule.onDataBound"));

Javascript:

this.onRequestStart = function (e) {
    kendo.ui.progress($("#k-grid-payLogs"), true);
};

this.onDataBound = function (e) {
    kendo.ui.progress($("#k-grid-payLogs"), false);
});

blog_spacer

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s