Progress bar while refreshing rows

[mshapiro]

I have a grid that gets updated after the user initiates a calculation function.  This might take 30 seconds or more if there are 150+ rows.  trackModel is on.

The slow part of the update is after the calculations when the updated column values are displayed using updateRow :

                $gridEmployees.pqGrid("updateRow", {
                      rowIndx: ratingCalculations.rownum, row: {
                      'PeerGroupRank': ratingCalculations.Rank,
                      'PeerGroupQuartile': ratingCalculations.Quartile
                      }, checkEditable: false
                  });

I have a progress bar to display during  the whole process

    <div id="calcprogress" class="progress progress-striped active" style="display: none;">
        <div class=" progress-bar" role="progressbar" style="width:100%;">Calculating...</div>
    </div>

I can't get $("#calcprogress").show(); to work while the grid is being updated with updateRow.  Is there a way around this?  Thanks.

[mshapiro]

This should have been posted in the Pro forum.