One Header with multiple imagebutton columns.

[M Mayo]

Is there a way to create a grid that has a header that has multiple ImageButtons columns. For instance:

Header1    Header2    Header3                  Header4
data            data           data                           Edit-ImageButton1 Delete-Imagebutton2 

The reason I ask is that I can create this same grid however, I cant evenly decrease the width between ImageButtons 1 through 3 because Header 4 is now associated with only ImageButton1 (Only for display). Header 4 should however be the header for ImageButtons 1- 3. How do I do this? How can I make 1 header that is associated with three different columns which are ImageButtons without repeating the header name for each column.I am creating the entire grid dynamically using C#.

[Veli]

Hi M Mayo,

This scenario is not, by default, supported in RadGrid. All grid column types should each have a header cell of their own. However, you can use some javascript when the page loads to remove the header cells you do not want and stretch the previous header cell by settings the element's colspan property.

For example, suppose I have 2 button columns at the beginning of my columns collection:

<telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderText="2 column header"
    HeaderStyle-Width="60">
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete"
    HeaderStyle-Width="60">
</telerik:GridButtonColumn>

I can use the pageLoad() javascript function to remove the second header cell, and stretch the first header cell:

function pageLoad(sender, args)
{
    setTimeout(function()
    {
        var grid = $get('<%= RadGrid1.ClientID %>');
        var header = grid.getElementsByTagName("table")[0].tHead;
        var cells = header.rows[0].cells;

        cells[0].setAttribute("colspan", 2);
        cells[1].parentNode.removeChild(cells[1]);
    }, 0);
}

The result is two columns with a single header cell (screeshot attached). Note that we are breaking the default grid structure, and we can expect any functionality associated with the grid header (sorting, resizing, group drag, etc.) to also break. Therefore, this is not a recommended approach if you will be implementing advanced RadGrid client and server functionality.

Regards,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.