Automatically Refresh a Data Grid Web Part

Date: 09.12.2011

The MatchPoint Data Grid Web Part is a great component to display aggregated data coming from different data sources. The aggregated data can be filtered and sorted by the configured columns.
But one thing that one might miss in the feature list of the Data Grid Web Part is the possibility to enable automatically refreshing of the displayed data. This means that the user has to refresh the page to check if new data is available to be displayed. But if it is not possible to enable it in the web part configuration does not mean that it is not possible at all. Therefore I will show you how you can easily implement this functionality with MatchPoint components, namely with the Composite Web Part and the help of the Connection Framework.

How to do it

I assume that you have placed a Data Grid Web Part on a page. In the configuration of this web part the name is set to 'NewsDataGrid'. The goal is to automatically refresh this data grid web part every 30 seconds. Additionally a refresh button is displayed, which refreshs the data and resets the interval when the user clicks on it.

Put the Composite Web Part on the same page. In its configuration add a PatternTransformer configuration node and define the following HTML/JavaScript in the EmptyDataTemplate property.

<script type="text/javascript">

  var intervalId;

  function refreshNews()
  {
    MP.ConnectionManager.NotifyBehavior('NewsDataGrid');    
  }

  function refresh_Click()
  {
    refreshNews();
    setAutoRefresh();
  }

  function setAutoRefresh()
  {    
    if (intervalId)
    {
      window.clearInterval(intervalId);
    }
    intervalId = window.setInterval(refreshNews, 30000);
  }

  setAutoRefresh(); 

</script>

<a href="javascript:void(0)" onclick="refresh_Click(); return false;">Refresh</a>

The most important line is the call to update the Data Grid Web Part by using the MatchPoint Connection Framework.

MP.ConnectionManager.NotifyBehavior('NewsDataGrid');

This tells the ConnectionManager to refresh the component with the name NewsDataGrid.

Caution

Please keep in mind that querying the data displayed in the Data Grid Web Part requires resources such as network bandwith, CPU time and memory on the server. Thus setting the interval delay to a too short time may leed to performance issues!
Also, choose a delay time that is longer than the retrieving of the data takes. In cases where data retrieving may take a longer time it is maybe more advised to implement an interval loop with the JavaScript window.setTimeout function as mentioned here https://developer.mozilla.org/en/window.setInterval under "Dangerous Usage".