The built-in Grouping capability in WebGrid.NET Professional has been one of its key successor, which automatically handles rows grouping based on specified Columns' value. The Enterprise edition extends this feature by allowing the grouping to be performed on different Group Interval, instead of the Column's Value. There are about 8 new Group Interval modes that you can apply to the GroupColumn such as Text, Alphabetical, Date, Month, ShortTime and so on. As always, you can apply these GroupIntervals visually in the designer and doesn't require you to write any codes in order to make it work. This greatly increases your application's value by delivering better grouping capability to end users while saving development time with its easy to use designer.
During this walkthrough, you will learn how to do the following:
- Connect to a Microsoft Access database using Microsoft Jet 4.0 OLE DB Provider.
- Use Group Intervals function in WebGrid.
Prerequisites
In order to complete this walkthrough, you will need the following:
- Access to the Microsoft Access Northwind database.
- Visual Studio 2005 Application.
Step-By-Step Instructions
- Binding WebGrid to AccessDataSource.
- Configure the 'OrderDate' column.
The "OrderDate" column should be configured with "GroupRowInfoFormat" property value to [caption]: Year [value]. The "Caption" property will take the value from the name of the column which is "OrderDate". The "Value" property will take the value from the GroupRow value. - Configure the 'CustomerID' GroupColumn.
This GroupColumn is configured with 'Alphabetical' GroupInterval. With this configurations, the GroupRow will be shown like : CustomerID : A, CustomerID : B, CustomerID : C etc, according to the alphabetical order.
This GroupColumn is also configured 'Expanded' GroupMode. When the page is loaded, this GroupColumn is expanded by this configuration.
The most important configuration is the ColumnMember property. The ColumnMember property should be set to "CustomerID".
Additional setting is the SortOrder property. The SortOrder can be configured with 'Ascending' or 'Descending'. - Configure the 'OrderDate' GroupColumn.
Additional GroupColumn can be added to the WebGridGroup collection. Here we are adding another WebGridGroup object which is configured with 'OrderDate' value for the ColumnMember property.
Configure also the GroupInterval property to 'Year' so that the data will be grouped based on the year. The SortOrder property should be configured also the 'Ascending' -
Configure the below settings at the Advanced-WebGrid-LayoutSettings section:
Property Value Description GridLineStyle Solid Define the style for the gridline PagingMode VirtualLoad Configure the grid to utilize 'VirtualLoad' PagingMode AutoWidth True Configure the grid to resize its width automatically according to the browser window CellPaddingDefault 2 Define the default cell padding RowHeightDefault 20px Define the default row height AlternatingColors True Configure the grid to use different color for the AlternatingRow GridLineColor 236, 233, 216 Define the color for the gridline AutoHeight True Configure the grid to resize its height automatically according to the browser window HideColumnsWhenGrouped No Configure the grid to still display the column which has been used in the GroupColumn