This is a migrated thread and some comments may be shown as answers.
Toolbar: Change text of existing items -> wrong css class
2 Answers 50 Views
This is a migrated thread and some comments may be shown as answers.
Sebastian
Top achievements
Rank 2
Sebastian asked on 03 Feb 2010, 09:18 AM
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-size12px !important; 
    padding:0 2px 0 22px !important; 
 

Thanks in advance,

  Sebastian

2 Answers, 1 is accepted

Sort by
0
Accepted
Fiko
Telerik team
answered on 09 Feb 2010, 07:09 AM
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.
0
Sebastian
Top achievements
Rank 2
answered on 09 Feb 2010, 07:32 AM
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
                } 
            } 


Asked by
Sebastian
Top achievements
Rank 2
Answers by
Fiko
Telerik team
Sebastian
Top achievements
Rank 2
Share this question
or