Combobox with Image and Text

2 posts, 0 answers
  1. Peter Bogoyavlensky
    Peter Bogoyavlensky avatar
    20 posts
    Member since:
    Feb 2009

    Posted 13 Nov 2014 Link to this post

    Would it be possible to create combobox (within GridViewComboBoxColumn) with image and text (as it was done for RadDropDownList)?
  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3204 posts

    Posted 18 Nov 2014 Link to this post

    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.

     
Back to Top