Cell Merging in WebDataGrid and WebHierarchicalDataGrid

Jordan Tsankov / Friday, June 8, 2012

With the NetAdvantage 12.1 release , all grid controls now have the cell merging feature added to them. This includes NetAdvantage for ASP.NET’s WebDataGrid and WebHierarchicalDataGrid. This post will guide you through using this feature. Damyan Petev wrote a blog post about the same feature used with the jQuery grids so make sure to check that out as well !

What this feature is about is readability. Cells are merged upon sorting a column and what really happens is that repeated values are grouped under a single entry. It looks something like this:

Notice that the Country column is sorted , also notice how there are only two entries in – this is an improvement over the following grid:

On the first screen , it is much easier to quickly identify repeating values ( since they are just marked with a blank entry where there should be one ). It would also be a lot easier to notice “odd one out” – have a single different value in a long list of repeating values.

Enabling cell merging

Since this feature comes in use when a column is sorted , you enable it in the Behaviors tag. You should need enable Sorting and just toggle on the property responsible for cell merging – here is how you do it in code:

<ig:WebDataGrid runat="server" Height="350px" Width="600px" ID="webDataGrid" 

    AutoGenerateColumns="False" DataSourceID="SqlDataSource1">

    <Columns>

        <ig:BoundDataField DataFieldName="EmployeeID" Key="EmployeeID">

            <Header Text="Employee ID" />

        </ig:BoundDataField>

        <ig:BoundDataField DataFieldName="FirstName" Key="FirstName">

            <Header Text="First Name" />

        </ig:BoundDataField>

        <ig:BoundDataField DataFieldName="LastName" Key="LastName">

            <Header Text="Last Name" />

        </ig:BoundDataField>

        <ig:BoundDataField DataFieldName="Country" Key="Country">

            <Header Text="Country" />

        </ig:BoundDataField>

    </Columns>

    <Behaviors>

        <ig:Sorting Enabled="True" EnableCellMerging="True" SortingMode="Multi"></ig:Sorting>

    </Behaviors>

</ig:WebDataGrid>

On line 18 , the sorting feature is defined and the cell merging property is set to true. With this done , you enable both sorting and cell merging. You could still have the old sorting functionality by not enabling cell merging – you can not , however , only have cell merging enabled on a column. In case you’re wondering , the SortingMode property defines whether or not you can sort more than one column at a time. When you have it set to Multi , you can hold down the Control key on your keyboard and click on multiple columns – all of them will become sorted.

Working with the WebHierarchicalGrid is no different than the WebDataGrid. You need to keep in mind that if you require cell merging on all child grids , you will need to define the behavior for each hierarchical level. Here’s an example of a grid with no cell merging:

And now , here’s the same grid with sorting and cell merging. Please note how both the child grid and the root level grid are sorted and have the sorted columns with merged cells.

To make the transition , you need the following code. It does not differ from the way you enable cell merging for a WebDataGrid , except now you have to do it for every child grid as well.

<ig:WebHierarchicalDataGrid runat="server" Height="350px" Width="600px" 

    ID="webHierarchicalGrid" DataSourceID="WebHierarchicalDataSource1" AutoGenerateColumns="true">

    <Bands>

        <ig:Band DataMember="AccessDataSource1_DefaultView" DataKeyFields="EmployeeID" AutoGenerateColumns="true">

            <Behaviors>

                <ig:Sorting Enabled="true" EnableCellMerging="true" SortingMode="Multi" />

            </Behaviors>

        </ig:Band>

    </Bands>

    <Behaviors>

        <ig:Sorting Enabled="true" EnableCellMerging="true" SortingMode="Multi"></ig:Sorting>

    </Behaviors>

</ig:WebHierarchicalDataGrid>

On line 6 we take care of the sorting & cell merging issue for the first level child grids. Further down , line 11 , we do the same for root level. Sorting is independent on all levels – selected columns will not reset if you interact with a different level grid.

Merging.zip