The requested page is not available for the requested platform. You are viewing the content for Default platform.

Overview

  • 2 min to read

Button represents a push button control. The Button extends a standard button functionality by providing an enhanced client API, supporting the DevExpress' appearance customization mechanism (Themes) and allowing all verifiable elements on a web page to be automatically validated on both the client side and server side.

Implementation Details

Button is realized by the ButtonExtension class. Its instance can be accessed via the ExtensionsFactory.Button helper method, which is used to add a Button extension to a view. This method's parameter provides access to the Button's settings implemented by the ButtonSettings class, allowing you to fully customize the extension.

Button's client counterpart is represented by the ASPxClientButton object.

Declaration

Button can be added to a view in the following manner.

View code (ASPX):

<script type="text/javascript">
    function button1_CheckedChanged(s, e) {
        if (s.GetChecked()) {
            button2.SetEnabled(false);
            s.SetText("Enable Button");
        } else {
            button2.SetEnabled(true);
            s.SetText("Disable Button");
        }
    }
</script>

<table>
    <tr>
        <td>
            <% 
                Html.DevExpress().Button(
                    settings => {
                        settings.Name = "button1";

                        settings.Text = "Disable Button";
                        settings.Width = 120;
                        settings.GroupName = "FakeGroup";
                        settings.ClientSideEvents.CheckedChanged = "button1_CheckedChanged";
                    }
                )
                .Render();
            %>
        </td>
        <td></td>
        <td>
            <% 
                Html.DevExpress().Button(
                    settings => {
                        settings.Name = "button2";
                        settings.EnableClientSideAPI = true;
                    }
                )
                .Render();
            %>        
        </td>
    </tr>
</table>

View code (Razor):

<script type="text/javascript">
    function button1_CheckedChanged(s, e) {
        if (s.GetChecked()) {
            button2.SetEnabled(false);
            s.SetText("Enable Button");
        } else {
            button2.SetEnabled(true);
            s.SetText("Disable Button");
        }
    }
</script>

<table>
    <tr>
        <td>
            @Html.DevExpress().Button(
                settings => {
                    settings.Name = "button1";

                    settings.Text = "Disable Button";
                    settings.Width = 120;
                    settings.GroupName = "FakeGroup";
                    settings.ClientSideEvents.CheckedChanged = "button1_CheckedChanged";
                }
            ).GetHtml()
        </td>
        <td></td>
        <td>
            @Html.DevExpress().Button(
                settings => {
                    settings.Name = "button2";
                    settings.EnableClientSideAPI = true;
                }
            ).GetHtml()
        </td>
    </tr>
</table>
Note

The Partial View should contain only the extension's code.

The code result is demonstrated in the image below.

button-declaration.png