Infragistics UltraWebGrid offers a nice grouping feature: when the grid is in OutlookGroupBy mode, you can group similar data with very little coding required, you can go from this view:

to this:

by just dragging columns to designated area.

But what if you want to group by first letter of a name or a year of a date? New WebHierarchicalDataGrid control offers this functionality after 10.2 release of Infragistics NetAdvantage, but if you invested years of work in classic UltraWebGrid – it’s not easy to move to a brand new control cold turkey. There’re other methods that offer custom grouping for UltraWebGrid, but the ones I found were pretty convoluted (like create a hidden column, populate it with data to group by etc.) Here is a simpler approach.

This method assumes that the data for the grid is retrieved into ADO.NET DataTable and that DataTable is stored in a session variable. It also uses DataTable’s versioning feature: if value of any cell is changed DataTable keeps both new and original value. Here’s the code that performs the magic:

Sub FormatCellValueForGrouping(ByVal i_oColumn As UltraGridColumn)

Dim dtTable As DataTable = Session("Data")

   For Each oRow As DataRow In dtTable.Rows

      If i_oColumn.IsGroupByColumn Then
          oRow(i_oColumn.BaseColumnName) = _
          Year(oRow(i_oColumn.BaseColumnName))
      Else
          oRow(i_oColumn.BaseColumnName) = _
          oRow(i_oColumn.BaseColumnName, DataRowVersion.Original)
      End If

   Next

End Sub

The code accepts a grid column object as a single parameter, then retrieves data stored in a session variable. It then loops thru every row in the data table and on every iteration checks column’s IsGroupByColumn property.

If IsGroupByColumn is true, that means grid is being grouped, so we replace actual data in the cell that belongs to the current iteration’s row and passed-in column (hence oRow(i_oColumn.BaseColumnName)) with data for grouping (in this case Year portion of the date)

If IsGroupByColumn is false, that means grid is being un-grouped, so we restore the original cell value, using DataRowVersion.Original version.

The only thing left is to place call to this code into grid’s GroupColumn & UnGroupColumn events:

Protected Sub xuwgGrid_GroupColumn(ByVal sender As Object, ByVal e As UltraWebGrid.ColumnEventArgs) Handles xuwgGrid.GroupColumn

   FormatCellValueForGrouping(e.Column)
   RebindGrid()

End Sub

Protected Sub xuwgGrid_UnGroupColumn(ByVal sender As Object, ByVal e As UltraWebGrid.ColumnEventArgs) Handles xuwgGrid.UnGroupColumn

   FormatCellValueForGrouping(e.Column)
   RebindGrid()

End Sub

These event handlers are called when a grid column is either dragged into grouping area (grid is being grouped) or dragged off the grouping area (grid is being ungrouped). We catch the column in question and pass it to the data-altering function. After that grid is rebound to the data (use your own RebindGrid method, at the very simplest it should reassign grid’s DataSource to the cached data. The result after grouping:

And after grid is ungrouped – the original unchanged values are back.