This is a migrated thread and some comments may be shown as answers.

Customize Toolbar Items

15 Answers 119 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Akhil Raj
Top achievements
Rank 1
Akhil Raj asked on 02 Jun 2010, 06:31 AM
hi
  i used rad toolbar in my page for command buttons. The tool bar is top of each page and i set dir="rtl" so that my buttons are from right to left. Now i need to add one heading text in the toolbar from left side. buttons are right and my text is left. Anyway to achive this?

15 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 04 Jun 2010, 11:44 AM
Hi Akhil Raj,

Please use the following code to achieve the described layout:

<telerik:RadToolBar ID="RadToolBar1" runat="server" Width="100%" dir="rtl">
     <Items>
         <telerik:RadToolBarButton runat="server" OuterCssClass="leftItem">
            <ItemTemplate>
                header text
            </ItemTemplate>
         </telerik:RadToolBarButton>
         <telerik:RadToolBarButton runat="server" Text="Button 1">
         </telerik:RadToolBarButton>
         <telerik:RadToolBarButton runat="server" Text="Button 2">
         </telerik:RadToolBarButton>
         <telerik:RadToolBarButton runat="server" Text="Button 3">
         </telerik:RadToolBarButton>
     </Items>
 </telerik:RadToolBar>

and the css styles:

<style type="text/css">
    div..RadToolBar_rtl  {
        text-align:left;
    }
    div.RadToolBar_rtl .rtbUL {
        width: 100%;    
    }
    div.RadToolBar_rtl .leftItem {
        float: left;
    }
</style>

Best wishes,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Akhil Raj
Top achievements
Rank 1
answered on 04 Jun 2010, 01:37 PM
hi admin
  Actually i finicshed this by adding div with abosulte position.This is a temporary solution.
So i will go with your idea.....but  this not work for me. Please check the following code
<telerik:RadToolBar ID="radtoolcommand" runat="server" dir="rtl" Width="100%" OnClientButtonClicked="click_handler">  
                 <Items> 
                    <telerik:RadToolBarButton runat="server" OuterCssClass="leftItem">  
                        <ItemTemplate> 
                            header text  
                        </ItemTemplate> 
                    </telerik:RadToolBarButton> 
                     <telerik:RadToolBarButton runat="server" IsSeparator="true">  
                     </telerik:RadToolBarButton> 
                     <telerik:RadToolBarButton runat="server" Value="Closebtn" Text="Close" CommandName="Close" ImageUrl="~/Img/7.gif" PostBack="false">  
                     </telerik:RadToolBarButton> 
                     <telerik:RadToolBarButton runat="server" IsSeparator="true">  
                     </telerik:RadToolBarButton> 
                </Items> 
             </telerik:RadToolBar> 

This is my toolbar and this is in RAD pane of radsplitter. Your css style i added in my local page. My result is the header text displayed after close button i mean at roght most side. Can you refix this?

0
Akhil Raj
Top achievements
Rank 1
answered on 07 Jun 2010, 05:19 AM
please anyone guide to achive my scenario.. its urgent
0
Yana
Telerik team
answered on 09 Jun 2010, 01:56 PM
Hi Akhil Raj,

I'm sorry, I've tested this with an older version. Please download the modified code attached.

Kind regards,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Akhil Raj
Top achievements
Rank 1
answered on 10 Jun 2010, 05:49 AM
hi admin,
 thanks for your nice help. but sorry to tell you again these also not satisfied my requirements. Using this code i can shot the header text in left sode of all buttons but not in the left most side of toolbar

Please check the attached images. The image named 'UsingCode.jpg" is taken from your new code.
The image named 'requirment.jpg' shows the actual display i needed. Please check the the header text is in left most side of the toolbar. This image i took from my code achieved using div.

So please help me like the 'requirement.jpg' style
0
Yana
Telerik team
answered on 10 Jun 2010, 09:32 AM
Hello Akhil Raj,

Which browser and exactly which version of the controls you're using?

Greetings,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Akhil Raj
Top achievements
Rank 1
answered on 11 Jun 2010, 05:47 AM
hi admin,
  We are using IE8 and ASP.NET AJAX Q3 2009
0
Yana
Telerik team
answered on 16 Jun 2010, 11:01 AM
Hello Akhil,

Until now I've tested this page with 2010.1.519 version as it's marked in the ticket information.  You should modify only one thing to make it work with Q3 2009 - set CssClass property of the templated button instead OuterCssClass property:

<telerik:RadToolBarButton runat="server" CssClass="leftItem">
    <ItemTemplate>
        header text
    </ItemTemplate>
</telerik:RadToolBarButton>

Best regards,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Akhil Raj
Top achievements
Rank 1
answered on 17 Jun 2010, 05:18 AM
thanks admin working good. So if i update to 2010 i need to change the cssClass to outercssClass?
0
Yana
Telerik team
answered on 17 Jun 2010, 07:30 AM
Hello Akhil Raj,

It will work also with CssClass in the latest version, because when using templates OuterCssClass and CssClass are applied to the same element.  The problem was that OuterCssClass is a new property and didn't exist in the older version.

All the best,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Akhil Raj
Top achievements
Rank 1
answered on 17 Jun 2010, 11:26 AM
ok thanks  admin. In my toolbar seperator not displaying when focus not in the toolbar. Now  only happening this. Any issue through this new css. When mouse over in the buttons,  seperator is showing otherwise not any seperator in the toolbar
0
Yana
Telerik team
answered on 18 Jun 2010, 01:18 PM
Hi Akhil Raj,

The separator is shown as expected at our side. Do you have additional css styles on your page? Can you send us a screenshot?

Greetings,
Yana
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Akhil Raj
Top achievements
Rank 1
answered on 19 Jun 2010, 08:27 AM
hi admin sure ...
I tried it seperately. Actually its working as you told. But when i include my master page the issue is coming.
Master page did another developer so i cant tell the problem directly...

Anyway i just created a sample project with my master page. So you can check the issue in the web project attached. Please open the default.aspx page as startup page and click "add new reocrd" in the default.aspx. So Webform1.aspx will show. When i mouse out master page the toolbar seperator not siplaying when i focus to the tool bar item it will displayed. You can check some seperator issue in default.aspx itself....

I think this is enoguh to reproduce the issue. If you correct that it wlill be a great help to me..

hi admin, how can i attach the project ? .rar is not allowed? my sample have 4.5 mb? any way to give the sample?


0
Yana
Telerik team
answered on 23 Jun 2010, 01:36 PM
Hi Akhil Raj,

You can attach only images in the forum, for other files you should open a support ticket.

Best regards,
Yana
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Akhil Raj
Top achievements
Rank 1
answered on 23 Jun 2010, 02:20 PM
k admin,
  I will send the sample project in out company support id...
Tags
ToolBar
Asked by
Akhil Raj
Top achievements
Rank 1
Answers by
Yana
Telerik team
Akhil Raj
Top achievements
Rank 1
Share this question
or