How to add Css to Custom tool inside RadEditor toolbar

7 posts, 2 answers
  1. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 15 Jun 2012 Link to this post

    Hello -- I have a page with three tabs.  Each tab has an instance of RadEditor in it.  I have added custom buttons to the toolbar.  These buttons are added in code behind with the code -- 

    void LoadCustomButton(stirng name, string text, string backgroundImageUrl) {
             EditorToolGroup dynamicToolBar  new EditorToolGroup();
             This.RadEditor1.Tools.Add(dynamicToolBar);

              EditorTool custom1 = new EditorTool();
              custom1.Name = name;
              custom1.Text = text;

    //----------------------------------------------------------------------------
              // Want to be able to do something like the following ----
             //custom1.Style.BackgroundImageUrl = backgroundImageUrl;
    //----------------------------------------------------------------------------

              dynamicToolBar.Tools.Add(custom1)
    }

    I need to set an image icon for this button.  I know how to do it in the page (using ,reTool .btnAdd { background-image:url(...);).
    However, I need to do this dynamically and I don't know the name of the button until it is created.  Is there a way to set the icon in code-behind?

    Thanks
    Raka


  2. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 18 Jun 2012 Link to this post

    May be this can be done via dynamic assignment of css? It is not working for me, but here is what I have been trying to do. Can someone please help me to figure out how to do ths correctly? The 'btnAddName' is a custom tool created using LoadCustomrTool method that I described in my previous post. This button is on 3 different tabs and that is the root of problem. Its name only gets assigned at run time.

    var ssl = document.createElement('style');
    ssl.title = "reTool " + "btnAddName" + "<%= ClientID %>";

    var def = "background-image:url(/Portal/Images/wizard.gif);";

    ssl.setAttribute("type", "text/css");

    document.body.appendChild(ssl);

    if (ssl.styleSheet)

    ssl.styleSheet.cssText = def;

    document.getElementsByTagName("head")[0].appendChild(ssl);

    sender.getToolByName("btnAddName" + "<%= ClientID %>").addCssClass("reTool " + "btnAddName" + "<%= ClientID %>");

    Thanks, Raka

  3. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 20 Jun 2012 Link to this post

    Hi Raka,

    If I understand your requirement correctly, you want to dynamically add custom buttons to RadEditor. In order to apply the background image you need to create and add the CSS style dynamically as well. You can achieve the following approach:
    void LoadCustomButton(string name, string text, string backgroundImageUrl) {
        EditorToolGroup dynamicToolBar = new EditorToolGroup();
        this.RadEditor1.Tools.Add(dynamicToolBar);
     
        EditorTool custom1 = new EditorTool();
        custom1.Name = name;
        custom1.Text = text;
     
        AddStyleElement(name, backgroundImageUrl);
     
        dynamicToolBar.Tools.Add(custom1);
    }
     
    private void AddStyleElement(string name, string backgroundImageUrl)
    {
        HtmlGenericControl style = new HtmlGenericControl();
        style.TagName = "style";
        style.Attributes.Add("type", "text/css");
        style.InnerHtml = String.Format(@".reTool .{0}{{background-image:url('{1}') !important;}}", name, backgroundImageUrl);
        Page.Header.Controls.Add(style);
    }

    Please let us know if this helps.

    Kind regards,
    Dobromir
    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. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 20 Jun 2012 Link to this post

    Perfect, Dobromir.  Thank you very much.
    Raka.
  5. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 02 Nov 2012 Link to this post

    Hi -- I know it has been a while since the last post on this.  But a new problem has surfaced recently and I can't figure out the cause of it.  I am using the below code (AddStyleElement) to style the four dynamically added EditorTools to EditorToolGroup.  All Icons show as they should. 

    I have a page with four tabs on it.  Three of these tabs have RadEditor control and each RadEditor control has four of the above-mentioned buttons with icons added to it.  All works as it should.

    Now I added a new tab and things get screwed up.  The RadEditor does not display correctly.  It shows up with bunch of bullets and all icons show up as tooltip. 

    If I either
        1) Reduce the number of dynamically added buttons from 4 to 3, all works well. OR
        2) Comment out the call to "AddStyleElement", all works well (Except of course buttons are now displayed with some default icon).

    It looks to me that somehow some sort of limit has been reached and the html tag does not close properly which is causing the problems.  When I look at Page.Header.Controls and examine the newly added styles, they look ok to me.

    Any ideas?

    Thanks
    Raka
  6. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 05 Nov 2012 Link to this post

    Hi Raka,

    Do you experience this issue only under InternetExplorer or with other browsers as well? I am asking this because there is non-document limitation for the CSS files and rules. Please take a look at the following blog  post for more detailed information on the subject and a possible solution.
    http://blogs.telerik.com/blogs/posts/10-05-03/internet-explorer-css-limits.aspx

    If this is not the case, could you please open a formal support ticket and provide a sample fully runnable project reproducing the issue so we can examine and debug it locally?

    Greetings,
    Dobromir
    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.
  7. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 05 Nov 2012 Link to this post

    Hello Dobromir

    Now that you pointed it out, I checked and it works fine with Firefox.  The link that you sent me helped me resolve this issue.  I combined the css for the four buttons in one and now it works fine. 

    Thank you very much for your suggestion and also for a quick reply.
    Sandhia
Back to Top