[Solved] add a image to the top-left corner of the grid header

[Laurent]

Hello,
I’m developing an OOABL application using the Telerik GridView component.
How can I add an image to the top-left corner of the grid header?
And how can I add a context menu when the image is clicked?
Thank you for your feedback.

 

 

[Nadya | Tech Support Engineer]

Hello, Laurent,

The top-left cell in a RadGridView is the GridTableHeaderCellElement inside the row-header column (the indicator column). You can customize it using the ViewCellFormatting event and apply any custom image that you need. To apply a custom context menu, you can handle the ContextMenuOpening and wire up a context menu when the right mouse button is clicked.

I prepared a sample code demonstration for your reference:

private readonly RadContextMenu _headerContextMenu;

public RadForm1()
{
    InitializeComponent();

    // Build the context menu for the top-left header image
    _headerContextMenu = new RadContextMenu();
    _headerContextMenu.Items.Add(new RadMenuItem("Select All"));
    _headerContextMenu.Items.Add(new RadMenuItem("Clear Selection"));
    _headerContextMenu.Items.Add(new RadMenuItem("Export to Excel"));
}
private void RadGridView1_ViewCellFormatting(object? sender, CellFormattingEventArgs e)
{
    // Target the top-left header cell (intersection of row indicator column and header row)
    if (e.CellElement is GridTableHeaderCellElement headerCell &&
        e.CellElement.ColumnInfo is GridViewRowHeaderColumn)
    {
        headerCell.ImageLayout = ImageLayout.Center;
        headerCell.Image = SetImageIcon(14); // set your custom image here (e.g., a hamburger menu icon)
    }
}

 private void RadGridView1_ContextMenuOpening(object? sender, ContextMenuOpeningEventArgs e)
 {
     // Only replace the context menu when right-clicking the top-left header cell
     if (e.ContextMenuProvider is GridTableHeaderCellElement headerCell &&
         headerCell.ColumnInfo is GridViewRowHeaderColumn)
     {
         e.ContextMenu = _headerContextMenu.DropDown;
     }
 }

Here is the achieved result:

I hope this sample helps. Do not hesitate to contact me if you have other questions.

Regards,
Nadya | Tech Support Engineer
Progress Telerik