How to add Css to Custom tool inside RadEditor toolbar

[Raka]

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

[Raka]

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

[Dobromir]

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

[Raka]

Perfect, Dobromir.  Thank you very much.
Raka.

[Raka]

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

[Dobromir]

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

[Raka]

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