Toolbar: Change text of existing items -> wrong css class

[Sebastian]

Hi,

I need to localize the FileExplorer on server side because translations should be user-customizable and therefore are loaded from a database. That works fine except for one problem:

Except for the last item (Upload) in the Toolbar, all other items have the css class: rtbIconOnly set on them. This results in the Text being displayed with 17px height instead of the default and without a space between the icon and the text.

I could work around this issue by applying some custom css, but the 'clean' way would be to remove the .rtbIconOnly css class from the first menu items. Where is this defined, because I can't find out where this is set to change it.

The css I used is this:

/* hack for Telerik file explorer .rtbIconOnly css class to look like normal icon+text buttons: */
.RadFileExplorer .RadToolBar .rtbIconOnly .rtbText {
    font-size: 12px !important;
    padding:0 2px 0 22px !important;
}

Thanks in advance,

  Sebastian

[Fiko]

Hi Sebastian,

In your case you can use one of the approaches described bellow:

• Use a custom skin and add the desired CSS declaration:
  
  .RadFileExplorer .RadToolBar .rtbIconOnly .rtbText {

        /* Properties */
  

  }
  
  
  This code is located in the FileExplorer.css file.
• An alternative is to remove the rtbIconOnly class programmatically:
  
  • Attach a handler to the OnClientLoad event of RadFileExplorer:
  • Implement the handler as shown below:
    

    <script type="text/javascript">
        function OnExplorerLoad(oExplorer, args)
        {
            var oToolbar = oExplorer.get_toolbar();
            var jQueryObject = $telerik.$;
            jQueryObject(".rtbIconOnly", oToolbar.get_element()).removeClass("rtbIconOnly");
        }
    </script>

I hope this helps.

Kind regards,
Fiko
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Sebastian]

Thanks. In the mean time I used server side code in the PreRender event of the Toolbar object contained in the to remove that class and set a Text to the item:

            for (int i = 0; i < toolBar.Items.Count; i++)
            {
                RadToolBarItem item = toolBar.Items[i];

                switch (item.Value)
                {
                    case "Back":
                    case "Forward":
                    case "Refresh":
                        break; // do nothing here
                    case "Open":
                    case "Delete":
                    case "Upload":
                    case "NewFolder":
                        item.Text = item.ToolTip; // set Text to translated text (which is set in the tooltip through the localization strings set above)
                        item.CssClass = item.CssClass.Replace("rtbIconOnly", String.Empty); // remove button only CSS class
                        break;
                    default:
                        Debug.WriteLine("Unhandled ToolbarItem: " + item.Value);
                        break;
                }
            }