1. Home
  2. Forum
  3. WinForms
  4. SfDataGrid and row header image - how?

SfDataGrid and row header image - how?

Hi!
On top of data I have 3 rows: Header, Filter and AddNew. 
I want to display a hourglass image on Row Header of the Filter row, just like there is a "+" image on AddNew row.
The following code (OnDrawCell event handler) displays an hourglass image only on Header, when RowIndex == 1.
How to display hourglass image on Filter row?

private void OnDrawCell(object sender, DrawCellEventArgs e)
{
if (sfDataGrid1.ShowRowHeader && e.RowIndex != 0)
{
if (e.ColumnIndex == 0)
{
if (e.RowIndex > 2)
e.DisplayText = (e.RowIndex - 2).ToString();
else if (e.RowIndex == 2)
e.Graphics.DrawImage(Resources.magnifying_glass_16, new PointF(6.0F, 6.0F)); 
}
}
}

5 Replies
MA Mohanram Anbukkarasu Syncfusion Team July 16, 2018 11:08 AM UTC

Hi Tipal, 

Thanks for contacting Syncfusion support.  

You can achieve your requirement of adding image within in the RowHeader of the FilterRow either by using DrawCell event or by creating CustomRowHeaderCellRendere. Please refer the solutions given below. 

Using DrawCell Event 
To draw an image within a cell, you can handle the DrawCell event for the specific cell before drawing the image. Please refer to the below code example and sample from the given location. 

To draw image inside the RowHeader of the FilterRow using DrawCell event, you should handle the DrawCell event for the specific row header cell and draw the image. If you are using this solution, you should draw the entire cell’s backcolor, border line. Please refer to the below code example and sample from the given location. 

Code Example: 
void sfDataGrid_DrawCell(object sender, Syncfusion.WinForms.DataGrid.Events.DrawCellEventArgs e) 
{ 
    if (sfDataGrid.ShowRowHeader && e.RowIndex != 0) 
    { 
        if (e.ColumnIndex == 0) 
        { 
            if (e.RowIndex > 2) 
                e.DisplayText = (e.RowIndex - 2).ToString(); 
            else if (e.RowIndex == 1) 
           { 
                e.Handled = true; 
                e.Graphics.FillRectangle(new SolidBrush(sfDataGrid.Style.RowHeaderStyle.BackColor), e.Bounds); 
                e.Graphics.DrawImage(new Bitmap(Image.FromFile(@"../../search.png")), e.Bounds); 
                Pen borderPen = new Pen(ColorTranslator.FromHtml("#CCCCCC")); 
                e.Graphics.DrawLine(borderPen, e.Bounds.Left, e.Bounds.Bottom, e.Bounds.Right, e.Bounds.Bottom); 
            } 
        } 
    } 
} 





Using custom RowHeaderCellRenderer 
You can also draw image within the RowHeader of the FilterRow by creating a custom RowHeaderCellRenderer. If you are using this solution, you need not to draw the borderline and backcolor. It will be handled by cell renderer itself. Please refer to the below code example and sample form the given location. 

Code Example: 
public partial class Form1 : Form 
{ 
    public Form1() 
    { 
        InitializeComponent(); 
        sfDataGrid.FilterRowPosition = RowPosition.Top; 
    this.sfDataGrid.CellRenderers["RowHeader"] = new CustomRowHeaderCellRenderer(sfDataGrid); 
    } 
} 
 
 
public class CustomRowHeaderCellRenderer : GridRowHeaderCellRenderer 
{ 
    SfDataGrid DataGrid { get; set; } 
 
    public CustomRowHeaderCellRenderer(SfDataGrid dataGrid) 
    { 
        DataGrid = dataGrid; 
    } 
    protected override void OnRender(Graphics paint, Rectangle cellRect, string cellValue, CellStyleInfo style, DataColumnBase column, RowColumnIndex rowColumnIndex) 
    { 
        base.OnRender(paint, cellRect, cellValue, style, column, rowColumnIndex); 
        if (DataGrid.IsFilterRowIndex(rowColumnIndex.RowIndex)) 
            paint.DrawImage(new Bitmap(Image.FromFile(@"../../search.png")), cellRect); 
    } 
}   




 
 
 
Regards, 
Mohanram A. 


T T July 16, 2018 06:47 PM UTC

Thank you very much, it was very helpful!

MG Mohanraj Gunasekaran Syncfusion Team July 17, 2018 07:30 AM UTC

Hi Tipal,  
 
Thanks for your update. 
 
We are glad to know that your reported problem has resolved. 
 
Please let us know if you any other queries. 
 
Regards, 
Mohanraj G 


KP KP January 5, 2025 01:14 AM UTC

Hello, I am following your example but I don't get it working. I set a breakpoint in OnRender but it is never called.

I added the renderer via:

    this.sfDataGrid.CellRenderers["RowHeader"] = new CustomRowHeaderCellRenderer(sfDataGrid);

And also tried this:

    this.sfDataGrid.FilterRowCellRenderers["RowHeader"] = new CustomRowHeaderCellRenderer(sfDataGrid);

The result is the same, the renderer is not called.

Is "RowHeader" the wrong key or which keys can be used?


(Syncfusion.SfDataGrid.WinForms 26.1462.35.0)


SB Sweatha Bharathi Syncfusion Team January 6, 2025 01:27 PM UTC

Hi Tipal,  

We have reviewed your query and attempted to replicate the scenario in the version you specified (26.1.35). In our provided sample, the image loaded correctly in the row header, and the breakpoint was triggered in the OnRender method.
In the code snippet you provided, adding the renderer as shown below is the correct approach. The "RowHeader" key appears to be accurate for fulfilling your requirement of displaying the image in the row header for both the FilterRow and AddNewRow:
this.sfDataGrid.CellRenderers["RowHeader"] = new CustomRowHeaderCellRenderer(sfDataGrid);
Can you please provide your sample where you are facing the issue that the breakpoint is not hit in the OnRender method? This will assist us in thoroughly analyzing the issue and delivering a solution as promptly as possible.

Regards,
Sweatha.B





Loader.
Up arrow icon