ImageUrl on EditorDropDown does not display?

[Lextendo]

Hi,

I generate create a EditorToolGroup in code behind like this:

Public Shared Sub AddEditorToolbarGroup(ByRef ed As RadEditor)

      Dim tg As New EditorToolGroup

      tg.Tag = "EmoticonsGroup"

      AddIconsDropDown(tg, EtnicGroup.Afro)

      AddIconsDropDown(tg, EtnicGroup.Hindi)

      AddIconsDropDown(tg, EtnicGroup.Java)

      AddIconsDropDown(tg, EtnicGroup.Indian)

      AddIconsDropDown(tg, EtnicGroup.China)

      AddIconsDropDown(tg, EtnicGroup.Bakra)

      ed.Tools.Add(tg)

  End Sub


  Private Shared Sub AddIconsDropDown(ByRef etg As EditorToolGroup, ByVal etnicity As String)

      Dim smileys As Dictionary(Of String, String) = EtnicSmileys(etnicity)

      'Dim sp As EditorSplitButton = New EditorSplitButton("Emoticons_" + etnicity)

      'sp.Text = "Emoticons_" + etnicity

      'sp.ImageUrl = "Smiley/Smiley_Afro_Happy.gif"

      'For Each smiley As KeyValuePair(Of String, String) In smileys

      '    Dim img As String = String.Format("<img src='Smiley/{0}.gif' height='22' widht='22' onmouseover='this.width=40;this.height=40;' onmouseout='this.width=22;this.height=22;'>", smiley.Value)

      '    Dim url As String = String.Format("Smiley/{0}.gif", smiley.Value)

      '    'sp1.Items.Add("<img src='icons/1.gif'>", "icons/1.gif");

      '    sp.Items.Add(New EditorDropDownItem() With {.Name = img, .Value = url})

      'Next

      'etg.Tools.Add(sp)

      Dim edd As EditorDropDown = New EditorDropDown() With {.Name = "Emoticons_" + etnicity, _

                                                             .Text = "Emoticons_" + etnicity, _

                                                             .Width = Unit.Pixel(22), _

                                                             .ImageUrl = String.Format("./Smiley/Smiley_{0}_Happy.gif", etnicity), _

                                                             .ItemsPerRow = 6, _

                                                             .ShowIcon = True, _

                                                             .ShowText = False _

                                                            }

      For Each smiley As KeyValuePair(Of String, String) In smileys

          Dim img As String = String.Format("<img src='Smiley/{0}.gif' height='22' widht='22' onmouseover='this.width=40;this.height=40;' onmouseout='this.width=22;this.height=22;'>", smiley.Value)

          Dim url As String = String.Format("Smiley/{0}.gif", smiley.Value)

          'sp1.Items.Add("<img src='icons/1.gif'>", "icons/1.gif");

          edd.Items.Add(New EditorDropDownItem() With {.Name = img, .Value = url})

      Next

      etg.Tools.Add(edd)

  End Sub

The dropdowns are filled as expcted, but the dropdown should display my ImgUrl Icon, not te .Text property...
I prefer to use the EditorSplitButton, but it has the same problem: no icon image! I'm sure the path to the icon is correct, since the items are filled properly... What am I doing wrong here?

TIA,
Alex

[Rumen]

Hello Lextendo,

The custom dropdowns of RadEditor do not offer IconUrl property and the only way to apply an icon to the head of the dropdown is via CSS or JavaScript as shown in the following demo: Custom Dropdowns, e.g..

<style type="text/css">

    .reTool .Emoticons

    {

        background-image: url(icons/1.gif);

    }
</style>

Using the code below you can change programmatically the icon in the head:

<script type="text/javascript">
function OnClientCommandExecuting(editor, args)
{
    var name = args.get_name(); //The command name
    var val = args.get_value(); //The tool that initiated the command

    if (name == "Emoticons")
    {
        //Set the background image to the head of the tool depending on the selected toolstrip item
        var tool = args.get_tool();
        var span = tool.get_element().getElementsByTagName("SPAN")[0];
        span.style.backgroundImage = "url(" + val + ")";
...

Kind regards,
Rumen
the Telerik team