This is a migrated thread and some comments may be shown as answers.

Combobox with Image and Text

2 Answers 331 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Peter Bogoyavlensky
Top achievements
Rank 1
Peter Bogoyavlensky asked on 13 Nov 2014, 02:49 PM
Would it be possible to create combobox (within GridViewComboBoxColumn) with image and text (as it was done for RadDropDownList)?

2 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 18 Nov 2014, 01:04 PM
Hello Peter,

Thank you for writing.

In order to display an image inside the RadDropDownListEditor, you can subscribe to the RadDropDownListEditorElement.VisualItemFormatting event and set the VisualItem.Image property to the desired image:
private void Form1_Load(object sender, EventArgs e)
{
    this.categoriesTableAdapter.Fill(this.nwindDataSet.Categories);
 
    GridViewComboBoxColumn comboColumn = new GridViewComboBoxColumn("Combo column");
    comboColumn.DataSource = this.categoriesBindingSource;
    comboColumn.ValueMember = "CategoryID";
    comboColumn.DisplayMember = "CategoryName";
    this.radGridView1.Columns.Add(comboColumn);
     
    this.radGridView1.CellEditorInitialized += radGridView1_CellEditorInitialized;
    this.radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
}
 
private void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
{
    RadDropDownListEditor ddl = e.ActiveEditor as RadDropDownListEditor;
    if (ddl != null)
    {
        RadDropDownListEditorElement editorElement = ddl.EditorElement as RadDropDownListEditorElement;
        editorElement.VisualItemFormatting -= editorElement_VisualItemFormatting;
        editorElement.VisualItemFormatting += editorElement_VisualItemFormatting;
    }
}
 
private void editorElement_VisualItemFormatting(object sender, VisualItemFormattingEventArgs args)
{
    DataRowView rowView = args.VisualItem.Data.DataBoundItem as DataRowView;
    if (rowView != null)
    {
        args.VisualItem.Image =ImageHelper.GetImageFromBytes(rowView.Row["Picture"] as byte[]);
        args.VisualItem.ImageLayout = ImageLayout.Zoom;
    }
}

I hope this information helps. Should you have further questions, I would be glad to help.
 
Regards,
Desislava
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Emanuele
Top achievements
Rank 1
Iron
commented on 15 Jan 2024, 04:52 PM

Please, can you explain me where did you set the images for each element of the comboBox?

I tried to do this but when I leave the cell it shows me only the text and not the image:

 private void gridView_layers_CellEditorInitialized(object sender, GridViewCellEventArgs e)
 {
     RadDropDownListEditor editor = e.ActiveEditor as RadDropDownListEditor;
     if (editor != null)
     {
         RadDropDownListEditorElement editorElement = editor.EditorElement as RadDropDownListEditorElement;

         RadListDataItem test= new RadListDataItem();
         tratteggio.Image = Resources.addlayer;
         tratteggio.Text = "test";

         RadListDataItem test2= new RadListDataItem();
         continuo.Image = Resources.dellayer;
         continuo.Text = "test2";

         RadDropDownListEditorElement element = editor.EditorElement as RadDropDownListEditorElement;
         element.DropDownStyle = RadDropDownStyle.DropDownList;
         element.ShowImageInEditorArea = true;
         element.EditableElement.TextImageRelation = TextImageRelation.ImageBeforeText;
         element.EditableElement.ImageAlignment = ContentAlignment.MiddleRight;
         element.Items.Add(test);
         element.Items.Add(test2);
         
         editorElement.VisualItemFormatting -= editorElement_VisualItemFormatting;
         editorElement.VisualItemFormatting += editorElement_VisualItemFormatting;
     }

 }

0
Nadya | Tech Support Engineer
Telerik team
answered on 16 Jan 2024, 02:19 PM

Hello, Emanuele,

If I have correctly understood your approach, you want to see the image in the cell when you leave the cell. In this case, what I can suggest is to try setting the Image property of the EditableElement. You can show an image in the editing area of the RadDropDownListEditorElement by setting the ShowImageInEditorArea property as you have already found out. Then you can change the Image property of the EditableElement based on the selected item by handling the SelectedIndexChanged event. 

Please refer to the attached project.

I hope this helps. Should you have any other questions do not hesitate to ask. 

Regards,
Nadya | Tech Support Engineer
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
GridView
Asked by
Peter Bogoyavlensky
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Nadya | Tech Support Engineer
Telerik team
Share this question
or