New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Customizing with GridTemplateColumn

There are cases in which you may want to have two level headers or custom complex structure for your table cells. This appearance is attainable using GridTemplateColumns with HTML tables in the HeaderTemplate/ItemTemplate. Here is an example which holds two tables inside those templates:

Customizing the HeaderTemplate

ASP.NET
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AllowSorting="True" AutoGenerateColumns="false">
  <MasterTableView>
    <Columns>
      <telerik:GridBoundColumn HeaderText="ContactName" DataField="ContactName" UniqueName="ContactName">
      </telerik:GridBoundColumn>
      <telerik:GridTemplateColumn UniqueName="TemplateColumn">
        <HeaderTemplate>
          <table id="Table1" cellspacing="1" cellpadding="1" width="300" border="1">
            <tr>
              <td colspan="2" align="center">
                <b>Address</b>
              </td>
            </tr>
            <tr>
              <td width="50%">
                <b>City</b>
              </td>
              <td width="50%">
                <b>Postal code</b>
              </td>
            </tr>
          </table>
        </HeaderTemplate>
        <ItemTemplate>
          <table id="Table2" cellspacing="1" cellpadding="1" width="300" border="1">
            <tr>
              <td width="50%">
                <%# DataBinder.Eval(Container.DataItem, "City") %>
              </td>
              <td width="50%">
                <%# DataBinder.Eval(Container.DataItem, "PostalCode") %>
              </td>
            </tr>
          </table>
        </ItemTemplate>
      </telerik:GridTemplateColumn>
    </Columns>
  </MasterTableView>
</telerik:RadGrid>

Handle the NeedDataSource event in the code behind:

C#
private void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
    OleDbConnection MyOleDbConnection = new OleDbConnection(("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/Nwind.mdb")));
    OleDbDataAdapter MyOleDbDataAdapter = new OleDbDataAdapter();
    MyOleDbDataAdapter.SelectCommand = new OleDbCommand("SELECT TOP 5 ContactName, Address, City, PostalCode FROM Customers", MyOleDbConnection);
    DataTable myDataTable = new DataTable();
    MyOleDbConnection.Open();
    try
    {
        MyOleDbDataAdapter.Fill(myDataTable);
    }
    finally
    {
        MyOleDbConnection.Close();
    }
    RadGrid1.DataSource = myDataTable.DefaultView;
}

You may also refer to the following online example of Telerik RadGrid which demonstrates the usage of GridTemplateColumn.

Not finding the help you need?
Contact Support