Data Grid WinForms Control

Use view definition to customize visual appearance and behavior for GridView in .NET

Home > WinForms UI Controls > User Manual > Grid Column Group View in C#

Column Groups View and HTML View for GridView

With the view definition, the Kettic GridView allows the users to create column groups view and HTML view for the data in grid. A single column group is able to hold any number of subgroups or rows in grid columns. However, the HTML view does not means that the grid data can be rendering in html. The HTML view allows the users to use an existing html table and apply the html code in Kettic GridView. This design save much time of the users and just need modify the cell text to the desired column.

How to Create Column Groups View in C#

The sample below shows that how create groups view from column. And the grid is bound to the Customers table from the database.

C# code for creating groups for columns in grid


ColumnGroupsViewDefinition view = new ColumnGroupsViewDefinition();
view.ColumnGroups.Add(new GridViewColumnGroup("ProductCategory"));
view.ColumnGroups.Add(new GridViewColumnGroup("Description"));
view.ColumnGroups[1].Groups.Add(new GridViewColumnGroup("ProductName"));
view.ColumnGroups[1].Groups.Add(new GridViewColumnGroup("Price"));

C# code for adding rows to groups in grid


view.ColumnGroups[0].Rows.Add(new GridViewColumnGroupRow());
view.ColumnGroups[0].Rows[0].Columns.Add(this.ketticGridView1.Columns["Company"]);
view.ColumnGroups[0].Rows[0].Columns.Add(this.ketticGridView1.Columns["Address"]);
view.ColumnGroups[0].Rows[0].Columns.Add(this.ketticGridView1.Columns["Contact"]);

Finally, change the ViewDefinitions property of Kettic GridView to the ViewDefinition that has just been created.


ketticGridView1.ViewDefinition = view;

How to Create HTML View in C#

The GridView allows the users to apply an HTML view to their grid view data. The HTML view requires the HTMLViewDefinition being instantiated and added to the desired row and cells in grid.

C# code for adding rows and cells in grid


HtmlViewDefinition view = new HtmlViewDefinition();

view.RowTemplate.Rows.Add(new RowDefinition());
view.RowTemplate.Rows.Add(new RowDefinition());
view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Car Brand"));
view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Sales Shop"));
view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Address"));
view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("City"));
view.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Contact"));

The GridView allows the users to add rows and column spanning functionality like in html table by using the HtmlViewDefinition. The functionality is able to enable the cells to span more than one columns or rows.

C# code for setting column spans in grid


view.RowTemplate.Rows[1].Cells[0].ColSpan = 3;

C# code for setting row spans in grid


view.RowTemplate.Rows[0].Cells[2].RowSpan = 3;
view.RowTemplate.Rows[0].Cells[3].RowSpan = 3;

C# code for setting row height in grid


view.RowTemplate.Rows[0].Height = 70;

UI Controlsfor Windows Forms

.NET WinForms UI Overview .NET WinForms UI Features .NET WinForms UI Guide C# WinForms UI Design VB.NET WinForms UI Design

WinForms UI Controls