Adding a Header Row to Telerik RadGrid Programmatically

So here’s the idea. I’ve got a RadGrid on my page that is populated programmatically. I build a DataTable from various different sources and once I’m satisifed with how my DataTable looks, I set the grid’s DataSource property and bind.

That’s all good, except now I want to insert a header row in the middle of my grid. The idea behind this row is to simply provide a clear segregation between my different sources of data. It’s all one grid remember, but I wanted a way to distinguish between the data.

I came up with the idea to simply add a header row at the point I needed, set the ColumnSpan to match the number of columns I have in my grid, set the HorizontalSpan to center the text and finally set the Visibility on all other columns to false.

Here is what I ended up with. The grid is setup with 5 columns: Name, Address, City, Province and Country. At the point where I’d like my see my header row in the grid, I set the Name column to the text I’d like the header to contain. Keep in mind that I have rows being added before and after the code sample below. I’ve inserted the code exactly where I want my header to appear:

1
2
3
DataRow row = dt.NewRow();
row["Name"] = "My heading that I'd like to show";
dt.Rows.Add(row);

Now in the ItemDataBound event, I can modify this particular row that I just created so that it spans all the columns and is centered as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem) 
    {
        GridDataItem dataItem = e.Item as GridDataItem;
 
        // i use the second index to get at the name column. the first two indexes
        // are empty for me and don't contain any valuable data
        if (dataItem.Cells[2].Text == "My heading that I'd like to show")
        {
            dataItem["Name"].ColumnSpan = 8;
            dataItem["Name"].HorizontalAlign = HorizontalAlign.Center;
 
            dataItem["Name"].BackColor = System.Drawing.Color.Black;
            dataItem["Name"].ForeColor = System.Drawing.Color.White;
 
            dataItem["Address"].Visible = false;
            dataItem["City"].Visible = false;
            dataItem["Province"].Visible = false;
            dataItem["Country"].Visible = false;
       }
    }
}

That’s what I came up with and it seems to work great. If anyone has a better technique for implementing this, please let me know.

5 Responses to “Adding a Header Row to Telerik RadGrid Programmatically”

  1. c August 3, 2011 at 3:43 am #

    i want to display rad grid with multiple headers can u please help me …

  2. shereen August 10, 2011 at 3:07 pm #

    Hi c,

    Can you give me a little more info in terms of what you mean by ‘multiple headers’?

  3. manisha December 16, 2011 at 7:12 am #

    Hi, I want to add multiple headers in a row in dynamically bound radgrid.
    I have Property_begining and Property_ending values . I want to make it look like

    Property
    Begining Ending

    There are many columns like this which are bound dynamically dependeing on client selection. any help is greatly appreciated

  4. shereen December 19, 2011 at 11:45 am #

    Hi manisha,

    I’m not sure I understand 100% what you’re asking. If you want to have multiple rows that span across all cells (like a header), the technique would be the same for those rows, just set the appropriate ColumnSpan attribute.

    Maybe you can attach a screenshot that demonstrates what you’re looking for?

  5. Ray July 8, 2012 at 11:08 pm #

    Hi,
    I am Using RadGrid for my application. I want to add Multiple column Header Like

    —————————————————————————
    | Media | Textiles | Market |
    —————————————————————————
    | TV | Radio | Cotton | Silk | Chennai | Goa |
    —————————————————————————

    My header wants to look like this, and in my Item Template i need check boxes.

    Can any one Please find a solution for me ..
    :(

Leave a Reply