[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

[Laurent]

Thank you for your feedback,
But is it possible to add this image without using the viewCellFormatting method?
This method is called constantly when using the grid. So there’s no point in repeating the process x times, is there?

[Nadya | Tech Support Engineer]

Hello, Laurent,

Yes, for this specific cell you can add an image without using the ViewCellFormatting event. But please keep in mind, that for all other cells RadGridView uses UI virtualization and it is needed to use formatting event to apply style properly. More information is available here: WinForms GridView Fundamentals UI Virtualization

For the GridTableHeaderCellElement at top left side, you can use the following approach (without ViewCellFormatting):

protected override void OnShown(EventArgs e)
{
    base.OnShown(e);
    AddImageButtonToHeaderCell();
}

private void AddImageButtonToHeaderCell()
{
    GridTableHeaderRowElement headerRow = radGridView1.TableElement.GetRowElement(
        radGridView1.MasterView.TableHeaderRow) as GridTableHeaderRowElement;

    if (headerRow != null)
    {
        GridTableHeaderCellElement topLeftCell = null;
        foreach (GridCellElement cell in headerRow.VisualCells)
        {
            if (cell is GridTableHeaderCellElement hCell && hCell.ColumnInfo is GridViewRowHeaderColumn)
            {
                topLeftCell = hCell;
                string fileName = @"Grid\Altri_dati.svg";
                topLeftCell.SvgImage = RadSvgImage.FromFile(fileName); 
                break;
            }
        }
    }
}

You can access the visual row/cells elements after the grid is fully initialized, this is why it is recommended to use Load/Shown event.

I hope this helps.

[Laurent]

Hi,

It works almost perfectly.
It displays the image, but as soon as I'm on the grid, it removes it.
Since it constantly runs `viewcellFormatting`, I get the impression that it's resetting the cell.

[Nadya | Tech Support Engineer]

Hello, Laurent,

It is not resetting on my side, the icon stays there. See the attached GIF file, it shows the result when using the AddImageButtonToHeaderCell() approach. I am not familiar with your exact setup, you can remove the reset part in the ViewCellFormatting event for this special cell, if such exists on your side.