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

GridViewComboBoxColumn that displays only icons/images

12 Answers 194 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Terry
Top achievements
Rank 1
Terry asked on 10 Jul 2012, 02:50 PM
Hi,

I need to add a GridViewComboBoxColumn to my Grid that displays a list of icons (phone icon, person icon etc). The icons are stored in the project Resources or in an imagelist. The documentation suggests only text can be displayed. I can't find any code on how to do this.

Thanks,

Terry.

12 Answers, 1 is accepted

Sort by
0
Ivan Petrov
Telerik team
answered on 12 Jul 2012, 02:18 PM
Hello Terry,

Thank you for writing.

The scenario you have described can be achieved with RadGridView. You have to create a custom cell element which will display the image and perform some converting of the images to and from base64. I have attached an example project where I have implemented your scenario.

I hope this will help. Should you have further questions, I would be glad to assist.
 
Greetings,
Ivan Petrov
the Telerik team
RadControls for WinForms Q2'12 release is now live! Check out what's new or download a free trial >>
0
Terry
Top achievements
Rank 1
answered on 16 Jul 2012, 01:56 PM
Hi Ivan, that's just what I need, thank you very much.

If I change the image from a jpeg to a png, I get a string value in the cell before clicking off the grid, can you explain why this is?

Thanks,

Terry
0
Ivan Petrov
Telerik team
answered on 19 Jul 2012, 05:54 AM
Hi Terry,

Thank you for writing.

The text is actually the Base64 encoded image. I use the text of the items to be able to save the image in the data layer and the editor element shows the selected item's text. Since you do not want this text and users canont enter any text you can go and remove the whole text box element from the editor element. You need to add one line of code in the EditorRequired event handler to achieve this. Here is how the modified code should look like:
void radGridView1_EditorRequired(object sender, EditorRequiredEventArgs e)
 {
   RadDropDownListEditor editor = new RadDropDownListEditor();
   RadDropDownListEditorElement element = editor.EditorElement as RadDropDownListEditorElement;
   element.EditableElement.Children.Remove(element.EditableElement.TextBox);
   element.VisualItemFormatting += new VisualListItemFormattingEventHandler(element_VisualItemFormatting);
   .......
}

I hope this will be useful. Should you have further questions, I would be glad to help.
 

All the best,
Ivan Petrov
the Telerik team
RadControls for WinForms Q2'12 release is now live! Check out what's new or download a free trial >>
0
Jie
Top achievements
Rank 1
answered on 17 Apr 2017, 08:21 AM

Hi,

With this method, how can we know which image the customer choose from the Combobox? I tried to retrieve the RadDropDownListEditorElement's SelectedIndex in CellEndEdit event, but it always get -1.

Would you please help on this? Thanks a lot!

Regards,

Jie

 

 

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 17 Apr 2017, 11:00 AM
Hello Jie, 

Thank you for writing.  

I have prepared a sample project for your reference how to achieve GridViewComboBoxColumn with images. Thus, in the CellEndEdit event, you can directly get the cell's value by the available row in the arguments.

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

 Regards,
Dess
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jie
Top achievements
Rank 1
answered on 19 Apr 2017, 01:53 AM

Hello Dess,

Thank you for the quick response!

I have tried your sample and that is what I want. By getting the row's cell value which is the "Id", we can know the selected index of the dropdownlist. That is really helpful!

Thanks,

Jie

0
Jie
Top achievements
Rank 1
answered on 20 Apr 2017, 10:58 AM

Hi,

For this GridViewCombBoxColumn with images, there is a requirement that choose/click some specific image from the dropdownlist, some action like open dialog will be done.

I Have tried to implement this in SelectedIndexChanged event of RadDropDownListEditorElement according the selectedIndex, but found this event will be called multiple times when choose another row's GridViewCombBoxColumn ; also this event will not be called when this specific image is already the current selected one.

Would you please help on this? Thanks!

Regards,

Jie

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 21 Apr 2017, 08:58 AM
Hello Jie, 

Thank you for writing back. 

Here is a sample code snippet demonstrating how to detect when an item from the popup is clicked:
private void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
{
    RadDropDownListEditor ddl = e.ActiveEditor as RadDropDownListEditor;
    if (ddl != null)
    {
        RadDropDownListEditorElement el = ddl.EditorElement as RadDropDownListEditorElement;
        el.Popup.MouseDown -= Popup_MouseDown;
        el.Popup.MouseDown += Popup_MouseDown;
    }
}
 
private void Popup_MouseDown(object sender, MouseEventArgs e)
{
    DropDownPopupForm popup = sender as DropDownPopupForm;
    if (popup != null)
    {
        RadListVisualItem visualElement = popup.ElementTree.GetElementAtPoint(e.Location) as RadListVisualItem;
        if (visualElement != null)
        {
            Console.WriteLine(visualElement.Data.Value);
        }
    }
}

I hope this information helps. If you have any additional questions, please let me know. 

Regards,
Dess
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jie
Top achievements
Rank 1
answered on 26 Apr 2017, 02:25 AM

Hello Dess,

Thanks the information! I tried it and only make the change to use the MouseUp event, and it works.

Thanks,

Jie

 

 

0
Jie
Top achievements
Rank 1
answered on 02 May 2017, 08:48 AM

Hi,

For the GridView implemented, Would you please help to let us know if its GridViewComboBoxColumn can display both the text and icon/image? It means some of dropdown list items display as texts(for localization issue, they are not good to be image), while other items display as images, And the cell value of both of them are "Id".

Since this requirement is based on the GridView sample implemented in this thread, so I continue post on. Please let me know if you need me open new thread. Thanks!

Best regards,

Jie

 

 

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 03 May 2017, 07:57 AM
Hello Jie, 

Thank you for writing back. 

The RadDropDownListEditorElement.VisualItemFormatting event is the appropriate place to customize the visual drop down items and control whether only image or text & image will be displayed for a specific item. The VisualItem.DrawText property indicates whether the VisualItem.Text will be shown or not. You can assign the desired image to the VisualItem.Image property.

I hope this information helps. If you have any additional questions, please let me know. 

Regards,
Dess
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jie
Top achievements
Rank 1
answered on 04 May 2017, 01:48 AM

Hello Dess,

Thanks your quick response!

I tried your method and it works. Thanks a lot!

Best regards,

Jie

Tags
GridView
Asked by
Terry
Top achievements
Rank 1
Answers by
Ivan Petrov
Telerik team
Terry
Top achievements
Rank 1
Jie
Top achievements
Rank 1
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or