title: Telerik Kendo UI grid: grouping and sorting survive grid.refresh() but collapsed groups get expanded; how to preserve state
body: <p>As is typical for grids in a "dashboard" application that monitors dynamically changing data, my (Telerik) Kendo UI grid is refreshed with fresh data periodically, every 60 seconds:</p>
  
  <pre class="lang-js prettyprint-override"><code>grid.dataSource.data(freshData);
  grid.refresh();  // have been informed this refresh may not be necessary
  </code></pre>
  
  <p>The schema does not change, but some new rows might show up in the dataset and some might have been removed.</p>
  
  <p>Although the <code>grid.refresh()</code> leaves the groupings intact, and the sort state is also preserved, any collapsed groups get expanded. </p>
  
  <p>QUESTION: How to preserve (or restore) the expanded/collapsed state of the groups (so a user focusing on a particular expanded group with the other groups collapsed is not inconvenienced/frustrated by the periodic updates in which every group gets re-expanded by default)? </p>
  
  <p>EDIT: Some Winforms grids provide a way to "take a snapshot" of the group expand/collapse state before refreshing data, and then to reapply that state after the datasource refresh. <strong>If the group header rows in the Kendo UI grid had UIDs (that survived a refresh) it could be done.</strong>  But see the suggested approach below that does not involve persistent UIDs.</p>
  
  <p>USE CASE:
  Here is a typical if somewhat dramatic use case for this feature. Center for Disease Control is monitoring real-time outbreaks of a particular strain of flu, by city. Every 15 seconds the dataset is being refreshed. They happen to be focusing at the moment on Los Angeles and have that city expanded, and the other cities collapsed. If every 15 seconds the entire grid expands, it pisses off the doctors at the CDC and they go in and strangle the programmer and then they go home to play golf, and everyone in Los Angeles succumbs. Does Kendo really want to be responsible for that disaster?</p>
  
  <p>POSSIBLE FEATURE ENHANCEMENT SUGGESTION:
  Ignore my suggestion about a UID above. Here's a better way.
  The grid has </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="k-group-indicator" data-field="{groupedByDataFieldName}"&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, if that k-group-indicator div could contain a list of the distinct values of <code>data-field</code> with each key's associated data being the expanded/collapsed state of the corresponding section, it would then be possible to save that list to a buffer before making a call to the dataSource.data( someNewData) method, and then in the eventhandler listening for dataBound event, those expand states could be reapplied. To find the corresponding grouping section for the grouping value, it would be very helpful if the <code>k-grouping-row</code> could have a property called <code>group-data-value</code> which held the grouping value of the particular grouping section, e.g. "Sales" or "Marketing" if one were grouping by a data-field called Department.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="k-group-indicator" data-field="dept" data-title="Dept" data-dir="asc"&gt;
         ...
     &lt;div class="k-group-distinct-values"&gt;
       &lt;div group-data-value="Sales" aria-expanded="false" /&gt;
       &lt;div group-data-value="Events Planning" aria-expanded="true" /&gt;
     &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>and then in the <code>k-grouping-row</code>:  <code>&lt;tr class="k-grouping-row" group-data-value="Sales"&gt;</code></p>