Editor + RibbonBar + Custom Dropdowns

[AK]

Hi,

I have a problem and would appreciate your help.

We are using RadEditor in ToolbarMode="RibbonBar". The tools list is from a file - tools.xml.
However we need also to add two custom (own) dropdowns to an existing tab (tab="Home"), but they should appear in own "section" (name="Links"). As 'section' I mean something like name="Clipboard" in the sample below.

<tools name="Clipboard" tab="Home">
        <tool name="PasteStrip" size="large"/>
        <tool name="Cut" size="medium"/>
        <tool name="Copy" size="medium" shortcut="CTRL+C"/>
        <tool name="Print" size="medium" shortcut="CTRL+P"/>
    </tools>

The custom dropdowns must be populated with data dynamically on Page_Load.

As in the sample on http://demos.telerik.com/aspnet-ajax/editor/examples/customdropdowns/defaultcs.aspx I have code like:

if (!IsPostBack)
{
    //add a new Toolbar dynamically
    EditorToolGroup dynamicToolbar = new EditorToolGroup();
    txtHTMLContent.Tools.Add(dynamicToolbar);

    //add a custom dropdown and set its items and dimension attributes
    EditorDropDown ddn = new EditorDropDown("CustomLinks1");
    ddn.Text = "Links 1";

    //Set the popup width and height
    ddn.Attributes["width"] = "90px";
    ddn.Attributes["popupwidth"] = "180px";
    ddn.Attributes["popupheight"] = "260px";

    ///Add items
    ddn.Items.Add("a", "a"); // from DataBase
    ddn.Items.Add("b", "b");

    //Add tool to toolbar
    dynamicToolbar.Tools.Add(ddn);



    //add a new Toolbar dynamically
    EditorToolGroup dynamicToolbar2 = new EditorToolGroup();
    txtHTMLContent.Tools.Add(dynamicToolbar2);

    //add a custom dropdown and set its items and dimension attributes
    EditorDropDown ddn2 = new EditorDropDown("CustomLinks2");
    ddn2.Text = "Links 2";

    //Set the popup width and height
    ddn2.Attributes["width"] = "90px";
    ddn2.Attributes["popupwidth"] = "180px";
    ddn2.Attributes["popupheight"] = "70px";

    //Add items
    ddn2.Items.Add("c", "c");  // from DataBase
    ddn2.Items.Add("d", "d");

    //Add tool to toolbar
    dynamicToolbar2.Tools.Add(ddn2);
}

But how to addapte it in order to have this custom dropdowns in editor's ribbonbar toolbar ?

[AK]

Dear Telerik Team - support me with this problem, please.

[Rumen]

Hi,

Here are the steps to add the custom dropdowns to a section named links:
1) In the ToolsFile.xml file add a new section Links in the Home tab:

<?xml version="1.0" encoding="utf-8" ?>
<root>
    <tools name="Clipboard" tab="Home">
        <tool name="PasteStrip" size="large"/>
        <tool name="Cut" size="medium"/>
        <tool name="Copy" size="medium" shortcut="CTRL+C"/>
        <tool name="Print" size="medium" shortcut="CTRL+P"/>
    </tools>
    <tools name="Links" tab="Home">
    </tools>
</root>

2) In the codebehind, you can access the Links section using txtHTMLContent.Tools[1] and add the two custom toolbars to it, e.g.

if (!IsPostBack){
    EditorDropDown ddn = new EditorDropDown("CustomLinks1");
    ddn.Text = "Links 1";

    //Set the popup width and height
    ddn.Attributes["width"] = "90px";
    ddn.Attributes["popupwidth"] = "180px";
    ddn.Attributes["popupheight"] = "260px";

    ///Add items
    ddn.Items.Add("a", "a"); // from DataBase
    ddn.Items.Add("b", "b");

    //Add tool to toolbar
    txtHTMLContent.Tools[1].Tools.Add(ddn);



    //add a new Toolbar dynamically
    EditorToolGroup dynamicToolbar2 = new EditorToolGroup();
    txtHTMLContent.Tools.Add(dynamicToolbar2);

    //add a custom dropdown and set its items and dimension attributes
    EditorDropDown ddn2 = new EditorDropDown("CustomLinks2");
    ddn2.Text = "Links 2";

    //Set the popup width and height
    ddn2.Attributes["width"] = "90px";
    ddn2.Attributes["popupwidth"] = "180px";
    ddn2.Attributes["popupheight"] = "70px";

    //Add items
    ddn2.Items.Add("c", "c");  // from DataBase
    ddn2.Items.Add("d", "d");

    //Add tool to toolbar
    txtHTMLContent.Tools[1].Tools.Add(ddn2);
}

Greetings,
Rumen
the Telerik team

[Rahul]

I am facing the same issue and I tried your code but Codebehind doesn't recognize txtHTMLContent?

Please help.

[Anders]

I guess that txtHTMLContent is the ID of the RadEditor on "AK"'s page.

Try using the ID of the control on your page, Rahul.
Hope this helps.

[Rahul]

Hi thanks for the reply.
Solved

It should be

RadEditor1.Tools(4).Tools.Add(ddn)