[Solved] Radeditor Ribbonbar customisation

[Myke]

hi,

I'm trying to create an editor using the ribbonbar toolbar mode, but having a couple of problems:

firstly, you can't specify the 'tab' names if you declare the toolbar inside the editor tags ie you cannot use:

 

<telerik:RadEditor ID="RadEditor2" runat="server">
<Tools name="Save - Restore" tab="Home">
</Tools>
</telerik:RadEditor>

as this brings up an error. You have to use a separate tools.xml file to create a customised ribbonbar.

Another issue is that if you try to specify the image in the xml file, it works ok for the small and medium buttons (using imageurl="xx" in the 'tool' node), but when you specify size="large" in the tool node and use imageUrlLarge="xx" attribute (or even imageUrl="xx"), it does not load your large image file - ie. this does not work:

<tool name="SaveContent" text="Save" shortcut="CTRL+S" size="large"
imageUrlLarge="images/save.gif" />

but if you specify the large image file when not using a separate xml file it does work - eg this works:

<telerik:RadEditor ID="RadEditor2" runat="server" ToolbarMode="RibbonBar">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool ImageUrlLarge="images/save.gif" size="large" Text="Save Content" Name="SaveContent" />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>

[Myke]

Just had a sneeky peek inside the telerik.web.ui.dll file using the excellent JustDecompiler Beta tool and noticed that in the toolFileLoader class there is this bit of code:

private EditorToolBase LoadTool(XmlNode toolXml)
{

....

switch (num) {

    case 0:

    {

        V_2.set_Name(attribute.Value);

    }

    case 2:

    {

        V_2.set_Enabled(ToolsFileLoader.ParseBool(attribute.Value, true));

    }

    case 3:

    {

        V_2.set_ShortCut(attribute.Value);

    }

    case 4:

    {

        V_2.set_ShowIcon(ToolsFileLoader.ParseBool(attribute.Value, true));

    }

    case 5:

    {

        V_2.set_ShowText(ToolsFileLoader.ParseBool(attribute.Value, true));

    }

    case 6:

    {

        V_2.set_Text(attribute.Value);

        if (ToolsFileLoader.ParseBool(attribute.Value, false))

        {

            V_2.set_Type(8);

        }

        if (this._editor.ToolbarMode == 16)

        {

            V_2.set_ImageUrl(attribute.Value);

        }

        if (this._editor.ToolbarMode == 16)

        {

            V_2.set_ImageUrl(attribute.Value);

        }

        V_2.Attributes.set_Item(attribute.Name.ToLowerInvariant(), attribute.Value);

    }

}

the line: 

V_2.set_ImageUrl(attribute.Value);

appears twice. Should the second one say:

V_2.set_ImageUrlLarge(attribute.Value);


That could be why the imageUrlLarge attribute does not appear to work maybe?

[Myke]

Ok, I solved this issue by using stylesheets as a workaround. For anyone who wants to know how do this, use the following css code :

.rrbButtonGroup .SaveContent img{
    visibility:hidden;
}

.rrbButtonGroup .SaveContent .rrbImagePlaceholder {
    background-image:url(images/savelarge.png);
    background-position:center;
    background-repeat:no-repeat;
}

replace the ".SaveContent" class with the tool name.

[Rumen]

Hi Myke,

I am glad that you have found a solution for your scenario.
I just want to add that the problem will be fixed in the upcoming next week SP1 of RadControls for ASP.NET AJAX. There will be a check in the ToolsFileLoader.cs file for large icons:

case "imageurllarge": tool.ImageUrlLarge = attribute.Value; break;

All the best,
Rumen
the Telerik team