Can your grid control do this? Part II

In my previous post I told you about the new interesting feature in RadGridView for WinForms - Row Layout customization. I also promised to provide some additional details about this feature, so here they are.

The view definition in RadGridView not only changes the row layout, it specifies the behavior and the appearance of the grid. All view definitions implement the IViewDefinition interface and you could create your own definitions, if you wish. To change the default view definition in RadGridView you need just to set the ViewDefinition property:

this.radGridView1.ViewDefinition = myViewDefinition;

We have included three different view definitions in our Q3 release. They are: TableViewDefinition, ColumnGroupsViewDefinition and HtmlViewDefinition. We plan to extend their functionality and to add new view definitions (for example the long awaited card view) in near future. Currently there is no graphical tool to customize them, but you should use code to do the magic. We are currently working on a graphical designer for this feature and it will be revealed soon.

Now let me explain how to use the different view definitions:

The TableViewDefinition is the default view. It contains all features of the standard table presentation that existed in the old RadGridView. The data is presented like a table and you can reorder, hide and pin columns. This is a typical table view:

 
ColumnGroupsViewDefinition - As its name suggests, this view enables grouping of columns. Every column group can have an unlimited number of sub groups or rows containing columns. To start using this view definition you need to add some groups:

ColumnGroupsViewDefinition view = new ColumnGroupsViewDefinition();

view.ColumnGroups.Add(new GridViewColumnGroup("Customer"));
view.ColumnGroups.Add(new GridViewColumnGroup("Details"));
view.ColumnGroups[1].Groups.Add(new GridViewColumnGroup("Address"));
view.ColumnGroups[1].Groups.Add(new GridViewColumnGroup("Contact"));

Then add at least one row which to contain the desired columns:

view.ColumnGroups[0].Rows.Add(new GridViewColumnGroupRow());
view.ColumnGroups[0].Rows[0].Columns.Add(this.radGridView1.Columns["ID"]);
view.ColumnGroups[0].Rows[0].Columns.Add(this.radGridView1.Columns["Name"]);
view.ColumnGroups[0].Rows[0].Columns.Add(this.radGridView1.Columns["Family"]);

Here is the result:

 
Of course, the ColumnGroupsViewDefinition enables resizing of column groups:

 
HtmlViewDefinition - The name of this view may lead to some confusion. No, RadGridView doesn't support html rendering, and we don't have plans to support it. Nevertheless, this view enables using row layout similar to the one existing in html tables. In fact, you can take an existing html table and use its html code in RadGridView. Sometimes this can save a lot of work. Just change the cell text to be the unique name of the desired column.

To use the HTML view just add rows and cells:

HtmlViewDefinition view = new HtmlViewDefinition();

view.RowTemplate.Rows.Add(new RowDefinition());
view.RowTemplate.Rows.Add(new RowDefinition());

view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("ID"));
view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Name"));
view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("City"));
view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Country"));
view.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Phone"));

Then we could specify some row and column spans:
view.RowTemplate.Rows[0].Cells[2].RowSpan = 2;
view.RowTemplate.Rows[0].Cells[3].RowSpan = 2;
view.RowTemplate.Rows[1].Cells[0].ColSpan = 2;

The code above can be replaced with the following html:

<table>
 <tr>
   <td>ID</td>
   <td>Name</td>
   <td rowspan=""2"">City</td>
   <td rowspan=""2"">Country</td>
 </tr>
 <tr>
   <td colspan=""2"">Phone</td>
 </tr>
</table>

You should use the ReadXml method of HtmlViewDefinition to load the definition.

And the result:

 
Note: I should point out that we support only a small piece of the functionality of the real html table. For example we don't support table headers or CSS.

These are our first steps in customizing row layouts and we intend to extend the functionality in our upcoming releases. Therefore, your feedback is highly appreciated. Any ideas, comments or suggestions are welcome.