New to Telerik UI for WinForms? Download free 30-day trial

HTML View

The name of this view may lead to some confusion. RadGridView does not support HTML rendering, and there are no plans to support it. 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.

WinForms RadGridView HTML View

To use an HTML view we should instantiate HtmlViewDefinition and add the desired rows and cells.

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("CustomerID"));
view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("CompanyName"));
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"));

Dim view As New HtmlViewDefinition()
view.RowTemplate.Rows.Add(New RowDefinition())
view.RowTemplate.Rows.Add(New RowDefinition())
view.RowTemplate.Rows(0).Cells.Add(New CellDefinition("CustomerID"))
view.RowTemplate.Rows(0).Cells.Add(New CellDefinition("CompanyName"))
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"))

The HtmlViewDefinition adds row and column spanning feature like in HTML table. This features enables spanning cells across more than one column or row. To specify a column spanning, set the ColSpan property of the CellDefinition:

Set column spans

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

view.RowTemplate.Rows(1).Cells(0).ColSpan = 2

The RowSpan property sets the row spanning:

Set row spans

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

view.RowTemplate.Rows(0).Cells(2).RowSpan = 2
view.RowTemplate.Rows(0).Cells(3).RowSpan = 2

You have to set the Height property of the RowDefinition to change the row height:

Set row height.

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

view.RowTemplate.Rows(0).Height = 40

Using HTML-like syntax:

    <table>
    <tr>
       <td>CustomerID</td>
       <td>CompanyName</td>
       <td rowspan="2">City</td>
       <td rowspan="2">Country</td>
    </tr>
    <tr>
       <td colspan="2">Phone</td>
    </tr>
    </table>

Use HTML template

view.RowTemplate.ReadXml(@"..\..\GridView\ViewDefinitions\myViewDefinition.htm");

view.RowTemplate.ReadXml("..\..\GridView\ViewDefinitions\myViewDefinition.htm")

At the end simply set the ViewDefinitions property to the newly created ViewDefinition instance.

radGridView1.ViewDefinition = view;

RadGridView1.ViewDefinition = view

You need to assign the view definition to the ViewDefinition property of RadGridView as described in theoverview section.

You need to either create the columns manually or supply a data source which will generate them.

See Also

In this article