ButtonEdit

Aug 01, 2019
3 minutes to read

ButtonEdit is a text editor that allows you to display buttons within an edit box.

Implementation Details

ButtonEdit is realized by the ButtonEditExtension class. Its instance can be accessed via the ButtonEdit(ButtonEditSettings) helper method, which is used to add a ButtonEdit extension to a view. This method’s parameter provides access to the ButtonEdit ‘s settings, implemented by the ButtonEditSettings class, allowing you to fully customize the extension.

The ButtonEdit ‘s client counterpart is represented by the ASPxClientButtonEdit object.

Declaration

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

View code (ASPX):

csharp

<script type="text/javascript">
    function buttonEdit1_ButtonClick(s, e) {
        switch (e.buttonIndex) {
            case 0:
                s.SetText("");
                break;
            case 1:
                s.SetText("Some text");
                break;
        }
    }
</script>

<% 
    Html.DevExpress().ButtonEdit(
        settings => {
            settings.Name = "buttonEdit1";

            settings.Text = "Some text";
            settings.Width = 200;
            settings.Properties.Buttons.Add("Clear");
            settings.Properties.Buttons.Add("Fill");
            settings.Properties.ClientSideEvents.ButtonClick = "buttonEdit1_ButtonClick";
        }
    )
    .Render();
%>

View code (Razor):

csharp

<script type="text/javascript">
    function buttonEdit1_ButtonClick(s, e) {
        switch (e.buttonIndex) {
            case 0:
                s.SetText("");
                break;
            case 1:
                s.SetText("Some text");
                break;
        }
    }
</script>

@Html.DevExpress().ButtonEdit(
    settings => {
        settings.Name = "buttonEdit1";

        settings.Text = "Some text";
        settings.Width = 200;
        settings.Properties.Buttons.Add("Clear");
        settings.Properties.Buttons.Add("Fill");
        settings.Properties.ClientSideEvents.ButtonClick = "buttonEdit1_ButtonClick";
    }).GetHtml()

Note

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

The code result is demonstrated in the image below.

Main Features

Null Prompt Text
Mask Password Input
Mask Input
Button Templates
Built-in Validation
Customizable Button Layout and Look-and-Feel
Full-Featured Client-Side API