GridComboBoxColumn add images or events

[Sistemas Samori]

Hi, I'm working with sfDataGrid and autogenerated columns, some of these columns are GridComboBoxColum, how can I add images/icons or draw colors to the GridComboBoxColumn?

I have tried the cellrenderer but can't understand it with your Sparkline example. My table is like: 

Id	Color
1	#9A727E
2	#3D323A

And I have another table with Country - Flag

Id	Name	imgFlag
1	England	url UK img
2	United States	url USA img

Also I search about sfComboBox drawItem, but how can I assign events to the GridComboBoxColumn?

https://help.syncfusion.com/windowsforms/combobox/appearance#setting-image-in-drop-down-list-item

 public class ComboCellRender : GridComboBoxCellRenderer
    {
        protected override void OnRender(Graphics paint, Rectangle cellRect, string cellValue, CellStyleInfo style, DataColumnBase column, Syncfusion.WinForms.GridCommon.ScrollAxis.RowColumnIndex rowColumnIndex)
        {

            if (column.GridColumn.MappingName == "IdColor")
            {
                ??
            }
            if (column.GridColumn.MappingName == "idCountry")
            {
                ??
            }

T
            base.OnRender(paint, cellRect, cellValue, style, column, rowColumnIndex);
            var dropDownbuttonRect = new Rectangle(cellRect.X + cellRect.Width - 17, cellRect.Y + (cellRect.Height / 2), 8, 4);
            paint.DrawLine(new Pen(Color.Gray), dropDownbuttonRect.X, dropDownbuttonRect.Y, dropDownbuttonRect.X + (dropDownbuttonRect.Width / 2), dropDownbuttonRect.Y + dropDownbuttonRect.Height);
            paint.DrawLine(new Pen(Color.Gray), dropDownbuttonRect.X + dropDownbuttonRect.Width, dropDownbuttonRect.Y, dropDownbuttonRect.X + (dropDownbuttonRect.Width / 2), dropDownbuttonRect.Y + dropDownbuttonRect.Height);
        }
    }

Thanks in advance

[Vasanthkumar Durairaj]

Hi Sistemas Samori,

We are a little unclear about your reported scenario. Please provide more information related to your query.

• You have mentioned the UG link to customize the SfComboBox drop-down item, but you have tried to customize the OnRenderer of GridComboBoxCellRenderer. Please specify your requirement: is it to display ComboxColumn with color or image, or do you want to display the flag images in the drop-down?   
  
  

• You have mentioned two tables, Color and Country-Flag, but in the customization, you have mentioned IdColor and IdCountry. Can you specify the property connection between DataSource and the mentioned table or your mapped column Mapping Name?

It will be more helpful for us to check the possibilities for resolving the reported problem.

[Sistemas Samori]

Hi, 

I have two autogenerated GridComboBoxColumn's, one with colors and the other with countries.

In the color ComboBox I want to show colors by the HexColor I stored.

In the Country ComboBox I want to show the name and Flag of each country.

I mentioned the link to customize the SfComboBox as reference that I want. 

Just to know how to set events or images to a autogenerated GridComboBoxColumn.

Thanks!

[Sathiyathanam Jeyakumar]

Sistemas Samori

We have prepared the sample based on your requirement, and you can access the sfcombox.DropDownListView.DrawItem event in GridComboboxCellRenderer's OnInitializeEditElement method And in a DrawItem event, you can make the customization based on your own. Refer to the attached screenshots and a sample to get more information.

public class ComboCellRender : GridComboBoxCellRenderer

{

    public ComboCellRender() : base()

    {

 

    }

    protected override void OnInitializeEditElement(DataColumnBase column, RowColumnIndex rowColumnIndex, SfComboBox uiElement)

    {

        uiElement.DropDownListView.DrawItem += DropDownListView_DrawItem; ;

        base.OnInitializeEditElement(column, rowColumnIndex, uiElement);

    }

 

    private void DropDownListView_DrawItem(object sender, Syncfusion.WinForms.ListView.Events.DrawItemEventArgs e)

    {

        if (e.Text == "Campinas")

            e.Image = Image.FromFile(@"..\..\Images\Japan.jpg");

        else if (e.Text == "Bruxelles")

            e.Image = Image.FromFile(@"..\..\Images\UK.jpg");

        else if (e.Text == "Bergamo")

            e.Image = Image.FromFile(@"..\..\Images\US.jpg");

        else if (e.Text == "Brazil")

            e.Image = Image.FromFile(@"..\..\Images\Japan.jpg");

        else if (e.Text == "Graz")

            e.Image = Image.FromFile(@"..\..\Images\US.jpg");

        else if (e.Text == "Århus")

            e.Image = Image.FromFile(@"..\..\Images\UK.jpg");

        else if (e.Text == "Montréal")

            e.Image = Image.FromFile(@"..\..\Images\US.jpg");

        else if (e.Text == "Cork")

            e.Image = Image.FromFile(@"..\..\Images\UK.jpg");

        else if (e.Text == "Helsinki")

            e.Image = Image.FromFile(@"..\..\Images\Japan.jpg");

        else if(e.ItemData == "#FF0000")

            e.Style.ForeColor = ColorTranslator.FromHtml("#FF0000");

        else if (e.ItemData == "#FFB6C1")

            e.Style.ForeColor = ColorTranslator.FromHtml("#FFB6C1");

        else if (e.ItemData == "#ADD8E6")

            e.Style.ForeColor = ColorTranslator.FromHtml("#ADD8E6");

        else if (e.ItemData == "#90EE90")

            e.Style.ForeColor = ColorTranslator.FromHtml("#90EE90");

 

        e.ImageAlignment = ContentAlignment.BottomLeft;

    }

 

}

If we misunderstood your requirement, please share more details regarding it.

Attachment: Sample_cb20d77f.zip