Customize Toolbar Items

16 posts, 0 answers
  1. Akhil Raj
    Akhil Raj avatar
    69 posts
    Member since:
    Aug 2012

    Posted 02 Jun 2010 Link to this post

    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?
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 04 Jun 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Akhil Raj
    Akhil Raj avatar
    69 posts
    Member since:
    Aug 2012

    Posted 04 Jun 2010 Link to this post

    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?

  5. Akhil Raj
    Akhil Raj avatar
    69 posts
    Member since:
    Aug 2012

    Posted 07 Jun 2010 Link to this post

    please anyone guide to achive my scenario.. its urgent
  6. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 09 Jun 2010 Link to this post

    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.
  7. Akhil Raj
    Akhil Raj avatar
    69 posts
    Member since:
    Aug 2012

    Posted 10 Jun 2010 Link to this post

    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
  8. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 10 Jun 2010 Link to this post

    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.
  9. Akhil Raj
    Akhil Raj avatar
    69 posts
    Member since:
    Aug 2012

    Posted 11 Jun 2010 Link to this post

    hi admin,
      We are using IE8 and ASP.NET AJAX Q3 2009
  10. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 16 Jun 2010 Link to this post

    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.
  11. Akhil Raj
    Akhil Raj avatar
    69 posts
    Member since:
    Aug 2012

    Posted 17 Jun 2010 Link to this post

    thanks admin working good. So if i update to 2010 i need to change the cssClass to outercssClass?
  12. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 17 Jun 2010 Link to this post

    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.
  13. Akhil Raj
    Akhil Raj avatar
    69 posts
    Member since:
    Aug 2012

    Posted 17 Jun 2010 Link to this post

    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
  14. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 18 Jun 2010 Link to this post

    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
  15. Akhil Raj
    Akhil Raj avatar
    69 posts
    Member since:
    Aug 2012

    Posted 19 Jun 2010 Link to this post

    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?


  16. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 23 Jun 2010 Link to this post

    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
  17. Akhil Raj
    Akhil Raj avatar
    69 posts
    Member since:
    Aug 2012

    Posted 23 Jun 2010 Link to this post

    k admin,
      I will send the sample project in out company support id...
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017