Editor + RibbonBar + Custom Dropdowns

6 posts, 0 answers
  1. AK
    AK avatar
    5 posts
    Member since:
    Sep 2012

    Posted 24 Sep 2012 Link to this post

    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 ?
  2. AK
    AK avatar
    5 posts
    Member since:
    Sep 2012

    Posted 25 Sep 2012 Link to this post

    Dear Telerik Team - support me with this problem, please.
  3. Rumen
    Admin
    Rumen avatar
    14323 posts

    Posted 25 Sep 2012 Link to this post

    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.
  4. Rahul
    Rahul avatar
    4 posts
    Member since:
    Oct 2012

    Posted 05 Nov 2012 Link to this post

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

    Please help.
  5. Anders
    Anders avatar
    7 posts
    Member since:
    Apr 2011

    Posted 05 Nov 2012 Link to this post

    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.
  6. Rahul
    Rahul avatar
    4 posts
    Member since:
    Oct 2012

    Posted 05 Nov 2012 Link to this post

    Hi thanks for the reply.
    Solved

    It should be

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

     

     

     

     

     






Back to Top