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

Editor + RibbonBar + Custom Dropdowns

5 Answers 101 Views
Editor
This is a migrated thread and some comments may be shown as answers.
AK
Top achievements
Rank 1
AK asked on 24 Sep 2012, 02:12 PM
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 ?

5 Answers, 1 is accepted

Sort by
0
AK
Top achievements
Rank 1
answered on 25 Sep 2012, 08:28 AM
Dear Telerik Team - support me with this problem, please.
0
Rumen
Telerik team
answered on 25 Sep 2012, 11:39 AM
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){
    //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
    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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Rahul
Top achievements
Rank 1
answered on 05 Nov 2012, 09:40 AM
I am facing the same issue and I tried your code but Codebehind doesn't recognize txtHTMLContent?

Please help.
0
Anders
Top achievements
Rank 1
answered on 05 Nov 2012, 09:50 AM
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.
0
Rahul
Top achievements
Rank 1
answered on 05 Nov 2012, 09:59 AM
Hi thanks for the reply.
Solved

It should be

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

 

 

 

 

 






Tags
Editor
Asked by
AK
Top achievements
Rank 1
Answers by
AK
Top achievements
Rank 1
Rumen
Telerik team
Rahul
Top achievements
Rank 1
Anders
Top achievements
Rank 1
Share this question
or