Make SkinnedButton as type="Submit"

7 posts, 0 answers
  1. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 27 Mar 2014 Link to this post

    Is there a way to render a ButtonType="SkinnedButton" as <input type="submit"> ?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Mar 2014 in reply to miksh Link to this post

    Hi miksh,

    Please try the following code snippet which works fine at my end.

    ASPX:
    <telerik:RadButton ID="RadButton1" runat="server" Text="Submit" ButtonType="SkinnedButton">
    </telerik:RadButton>

    JavaScript:
    <script type="text/javascript">
        function pageLoad() {
            var elements = document.getElementsByTagName("span");
            for (var i = 0; i < elements.length; i++) {
                if (elements[i].className == "RadButton RadButton_Default rbLinkButton rbRounded") {
                    elements[i].outerHTML = "<input type='submit' value='Submit'>";
                }
            }
        }
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 28 Mar 2014 in reply to Shinu Link to this post

    Thanks, it works.
    Any reason why UseSubmitBehaviour ignored for this type of button?
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Mar 2014 in reply to miksh Link to this post

    Hi miksh,

    The SkinnedButton is rendered as <span/> element with child <span/> element used to specify the text.  This creates an appearance, similar to the StandardButton, without the need of sprite images, but it rendered as <span/> element. so UseSubmitBehavior property of RadButton will not render a SkinnedButton as Submit type button.

    Thanks,
    Shinu.

  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 01 Apr 2014 Link to this post

    Hello Miksh,

    The reason why the UseSubmitBehavior property is available only for ButtonType="StandardButton" is because of the different button type rendering:

      - ButtonType="StandardButton" is rendered as an input element wrapped inside a span element. When the UseSubmitBehavior property is set to true(i.e., default value) the input is of type "submit", so that the the button uses the browser submit mechanism. If the UseSubmitBehaviors property, however, is set to false, the input is of type "button", so that the button uses the ASP.NET postback mechanism.
     
      - ButtonType="SkinnedButton" or "LinkButton" - The button is rendered as a span element wrapped inside another span, so that there is no input rendered and therefore the UseSubmitBehavior has not meaning here.

    Regards,
    Danail Vasilev
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  7. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 07 Apr 2014 in reply to Danail Vasilev Link to this post

    Danail Vasilev said:  - ButtonType="SkinnedButton" or "LinkButton" - The button is rendered as a span element wrapped inside another span, so that there is no input rendered and therefore the UseSubmitBehavior has not meaning here.
     


    As per your demo at http://demos.telerik.com/aspnet-ajax/button/examples/overview/defaultcs.aspx the skinned button does contain an input.

    Btw, would it be much easier to render such a skinned button as a single <button> with appropriate class?

    <span tabindex="0" class="RadButton RadButton_Silk rbLinkButton rbRounded" id="ctl00_ContentPlaceHolder1_btnStandard"><span class="rbText">Skinned Button</span><input name="ctl00_ContentPlaceHolder1_btnStandard_ClientState" id="ctl00_ContentPlaceHolder1_btnStandard_ClientState" type="hidden" autocomplete="off"></span>
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 08 Apr 2014 Link to this post

    Hi Miksh,

    You are right that the demo must be updated, so that the UseSubmitBehavior property is available only for the StandardButton type.

    Regarding your question about the skinned button rendering, this button type is based on the rendering of ButtonType="LinkButton" that also doesn't render an input. What has the skinned button compared to the link button is additional CssClasses and CSS3 (e.g., border radius, gradient, etc.). If we change, however, the rendering of the skinned button, for example to button HTML element this would be a breaking change that is not currently required.

    If you want the input type=submit to look like the skinned button, you can use the RadButton's styles. For example:
    ASPX:
    <telerik:RadButton ID="RadButton1" runat="server" ButtonType="SkinnedButton" Text="click" />
    <input type="submit" value="click" class="RadButton RadButton_Default rbLinkButton rbRounded rbCustomSubmit" />
    CSS:
    <style>
        input.rbCustomSubmit {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            height: 1.833em;
        }
    </style>



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017