How to draw shape in sfdataGrid cell?

[ollie]

Hello.

How can I show/draw a triangle in an sfDataGrid cell using c#?

Picture for reference:

[Santhosh Govindasamy]

Hi Ollie,

To display or draw a rectangle in a cell of the SfDataGrid, you can utilize the DrawCell event and the GridImageColumn. The DrawCell event is triggered for each cell, allowing you to customize the cell's appearance by either loading an image or drawing directly within the cell.

The GridImageColumn is specifically designed to show image data within a column. For your convenience, we have provided a sample that demonstrates this functionality. Please refer to the sample for guidance.

Please find attached the UG link for handling GridImageColumn and DrawCell event.
 

GridImageColumn UG Link->  https://help.syncfusion.com/windowsforms/datagrid/columntypes#gridimagecolumn

DrawCell event UG Link-> https://help.syncfusion.com/windowsforms/datagrid/rows#using-drawcell-event

Please Refer code snippet:

public Form1()

{

     InitializeComponent();

     orderInfo = new OrderInfoCollection();

     sfDataGrid1.AutoGenerateColumns = false;

   

     sfDataGrid1.DataSource = orderInfo.Orders;

     //this.sfDataGrid1.ShowRowHeader = true;

    

     GridNumericColumn gridTextColumn1 = new GridNumericColumn() { MappingName = "OrderID", HeaderText = "Order ID" };

     GridTextColumn gridTextColumn2 = new GridTextColumn() { MappingName = "CustomerID", HeaderText = "Customer ID", AllowEditing = true };

     GridTextColumn gridTextColumn3 = new GridTextColumn() { MappingName = "CustomerName", HeaderText = "Arrow" };

     GridTextColumn gridTextColumn4 = new GridTextColumn() { MappingName = "Country", HeaderText = "Country" };

     GridTextColumn gridTextColumn5 = new GridTextColumn() { MappingName = "ShipCity", HeaderText = "Ship City" };

 

     sfDataGrid1.Columns.Add(gridTextColumn1);

     sfDataGrid1.Columns.Add(gridTextColumn2);

     sfDataGrid1.Columns.Add(gridTextColumn3);

     sfDataGrid1.Columns.Add(gridTextColumn4);

     sfDataGrid1.Columns.Add(gridTextColumn5);

 

     sfDataGrid1.DrawCell += SfDataGrid1_DrawCell;

}

private void SfDataGrid1_DrawCell(object sender, Syncfusion.WinForms.DataGrid.Events.DrawCellEventArgs e)

{

    if (!sfDataGrid1.ShowRowHeader && e.RowIndex <= 10)

    {

        double value = (e.DataRow.RowData as OrderInfo).OrderID;

        if (e.ColumnIndex == 2)

        {

            e.Handled = true;

           

            Rectangle rect = new Rectangle(e.Bounds.X + 3, e.Bounds.Y + 5,20,20);

 

 

            e.Graphics.FillRectangle(new SolidBrush(sfDataGrid1.Style.RowHeaderStyle.BackColor), new Rectangle(e.Bounds.X + 1, e.Bounds.Y + 1, e.Bounds.Width - 1, e.Bounds.Height - 1));

            //Draw the image on RowHeader

            if (value==1010)

                e.Graphics.DrawImage(new Bitmap(Image.FromFile(@"..\..\Arrow_Images\Green.png")), rect);

            else

                e.Graphics.DrawImage(new Bitmap(Image.FromFile(@"..\..\Arrow_Images\Red.png")), rect);

           

        }

    }

}

Please refer the output:

Regards,
santhoshG

Attachment: SfDataGrid_Demo_4_8_d3ab94ee.zip