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
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
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
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.
Ivan Petrov
the Telerik team
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
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
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
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
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
Hello Dess,
Thanks the information! I tried it and only make the change to use the MouseUp event, and it works.
Thanks,
Jie
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
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
Hello Dess,
Thanks your quick response!
I tried your method and it works. Thanks a lot!
Best regards,
Jie