Make SkinnedButton as type="Submit"

[miksh]

Is there a way to render a ButtonType="SkinnedButton" as <input type="submit"> ?

[Shinu]

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.

[miksh]

Thanks, it works.
Any reason why UseSubmitBehaviour ignored for this type of button?

[Danail Vasilev]

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

 

 

[miksh]

[quote]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.
 [/quote]

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>

[Danail Vasilev]

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