RadButton display same style for standard button and link button

12 posts, 0 answers
  1. michaelitrn
    michaelitrn avatar
    7 posts
    Member since:
    Mar 2007

    Posted 11 Jan 2011 Link to this post

    Is there a straight forward way to make the rad-button appear the same for both standard and link buttons? I want the control appearance to remain the same as the standard button even when using link button functionality.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Jan 2011 Link to this post

    Hello,

    You can achieve this by creating custom skin for the RadButton. Please go through the following tutorial for more on creating custom skin.
    Creating a Custom Skin for RadButton

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. michaelitrn
    michaelitrn avatar
    7 posts
    Member since:
    Mar 2007

    Posted 12 Jan 2011 Link to this post

    Shinu - Thanks for the response. I was hoping there was something more simple that creating a custom skin. If I take the time to create the custom skin, I will post the exact modifications I have to complete within the custom skin to get the Link Button to have the same appearance as the Standard Button.

    Best Regards,
    Michael
  5. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 12 Jan 2011 Link to this post

    Hello Michael,

    Shinu is right, there is no easy way to make both link buttons and standard buttons to appear the same way having the standard button look and feel.  They have different rendering depending on their front-end requirements. I suppose, that if you need that behavior for just a few buttons, you could create a few backgrounds using the Standard button design, and then to apply them as a background tot he link button. If you need however to have more buttons with different width, that will no be suitable for you.

    Best wishes,
    Bojo
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. WAMatt
    WAMatt avatar
    17 posts
    Member since:
    Sep 2009

    Posted 28 Mar 2011 Link to this post

    Are there any plans to allow LinkButtons to have the same styling as StandardButton in future releases?  I would rather not have to create a custom skin just for this, and it seems a reasonable request to add to your enhancement lists.

    Thank you!

    Matt
  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 29 Mar 2011 Link to this post

    Hi Matt,

    For the time we don't have such plans, because all the features supported out-of-the-box by the LinkButton can be accomplished with custom code, using the StandardButton.
    For example if you want to open a specific URL with a StandardButton (NavigateUrl), you simply handle the clicking client-side event (OnClientClicking property), open the URL using JavaScript, and then cancel the event and the postback. Here is a sample page showing this:
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            function OnClientClicking(button, args)
            {
                window.location = button.get_navigateUrl();
                args.set_cancel(true);
            }  
        </script>
        <div>
            <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton" NavigateUrl="http://www.telerik.com"
                OnClientClicking="OnClientClicking">
            </telerik:RadButton>
            <br />
            <telerik:RadButton ID="RadButton2" runat="server" Text="RadButton" NavigateUrl="http://www.telerik.com"
                ButtonType="LinkButton">
            </telerik:RadButton>
            <asp:Label ID="Label1" runat="server"></asp:Label>
        </div>
        </form>
    </body>
    </html>


    Kind regards,
    Pero
    the Telerik team
  8. Eitan
    Eitan avatar
    1 posts
    Member since:
    Jun 2012

    Posted 17 Apr 2011 Link to this post

    Hi Piero,
    The solution you gave to use the standard button to open an url do not open it in a new window as the linkbutton do.
    Regards
      Eitan
     
  9. WAMatt
    WAMatt avatar
    17 posts
    Member since:
    Sep 2009

    Posted 18 Apr 2011 Link to this post

    I ended up putting both of the following functions on the page so I could either navigate in the same window or open a new window...

    <script type="text/javascript"
                function openWindow(button, args) { 
                    window.open(button.get_navigateUrl()); 
                    args.set_cancel(true); 
                
                function navWindow(button, args) { 
                    window.navigate(button.get_navigateUrl()); 
                    args.set_cancel(true); 
                
    </script>

    And then just set the OnClientClicking event on the buttons to whichever one you need.

    <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton" NavigateUrl="http://www.telerik.com"
                OnClientClicking="openWindow">
    </telerik:RadButton>
      
    <telerik:RadButton ID="RadButton2" runat="server" Text="RadButton" NavigateUrl="http://www.telerik.com"
                OnClientClicking="navWindow">
    </telerik:RadButton>

    Matt
  10. Jittu
    Jittu avatar
    18 posts
    Member since:
    Sep 2012

    Posted 17 Sep 2012 Link to this post

    Hi,

    Skin does not get applied to the whole radbutton. 1/4th of the button color does not change, it remains as the default color.
    Is there anything that I am missing?

    Code:
     <telerik:RadButton ID="RadButton4" runat="server" Text="Help" Skin="Black" Width="70px">
        <Icon PrimaryIconUrl="Images/icon_help_16.png" />
    </telerik:RadButton>
  11. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 18 Sep 2012 Link to this post

    Hi,

    I am quite sure I do not understand your issue, the following code works as expected:

    <telerik:RadButton ID="RadButton4" runat="server" Text="Help" Skin="Black" Width="70px">
        </telerik:RadButton>

    Could you send us a screenshot of what happens when you use it?

    Kind regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  12. Jittu
    Jittu avatar
    18 posts
    Member since:
    Sep 2012

    Posted 18 Sep 2012 Link to this post

    Please find the attachment of my problem. The right part of the button is not black
  13. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 19 Sep 2012 Link to this post

    Hello,

    I have checked at our demos: http://demos.telerik.com/aspnet-ajax/button/examples/customicons/defaultcs.aspx where there are several buttons similar to the one you are using with Black skin enabled and the issue is not reproducible.

    Could you also check the page and confirm if you could reproduce it?

    If not, we will need to open a support ticket and to send us a simple sample project with the issue reproduced for further testing.

    Greetings,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017