Default ButtonEdit

This example demonstrates the Bootstrap Button Edit control with default settings. The Bootstrap Button Edit control displays a text editor with one (by default) or more buttons displayed in its client region.

The client-side API:

@(Html.DevExpress()
    .BootstrapButtonEdit("ButtonEditDefault")
    .Value("Sample Text")
    .ClientSideEvents(events => events
        .ButtonClick("function(s,e) { dxbsDemo.showToast('The button has been clicked.'); }"))
    .Buttons(buttons => buttons.Add())
)

Buttons Collection

In this example, the Bootstrap Button Edit control displays two custom buttons - one on the left and one on the right of the editor. You can add and configure the editor's buttons by calling the Buttons method.

The following buttons method allow you to set up appearance of each button

@(Html.DevExpress()
    .BootstrapButtonEdit("ButtonEditButtons")
    .Value("Sample Text")
    .Buttons(buttons=>{
        buttons
            .Add()
            .Position(ButtonsPosition.Left)
            .IconCssClass("fa fa-envelope");
        buttons
            .Add()
            .Text("Check email");
    })
    ...
)

Clear Button

In this example, the Button Edit control displays a Clear button, which deletes the current content of the editor when clicked. The Cear button's availability is controlled by the the DisplayMode method (available through ClearButton):

@(Html.DevExpress()
    .BootstrapButtonEdit("ClearButtonButtonEdit")
    .Value("Sample Text")
    .ClearButton(clearButton => clearButton
        .DisplayMode(ClearButtonDisplayMode.Always))
    ...
)

Null Text

This example illustrates how the NullText method can be used to display prompt text (watermark/placeholder) in the editor's edit box. Specified text is displayed when the value of the editor is null and the editor is not focused. The prompt text disappears when the editor receives focus.

@(Html.DevExpress()
    .BootstrapButtonEdit("NullTextButtonEdit")
    .NullText("Enter Your Name")
    ...
)

Mask

In this example, the Button Edit control takes advantage of the masked input feature to only accept values formatted as phone numbers. You can access the mask settings using the MaskSettings method. To specify the mask, use the Mask method (available through MaskSettings).

Refer to the Mask Types topic, for a list of the available mask types.

Other options available through the MaskSettings method:

@(Html.DevExpress()
    .BootstrapButtonEdit("MaskButtonEdit")
    .MaskSettings(maskSettings => maskSettings
        .Mask("+1 (999) 000-0000")
        .IncludeLiterals(MaskIncludeLiteralsMode.None)
        .ErrorText("Please input missing digits"))
    ...
)

Display Format

The DisplayFormatString method specifies the pattern used to format the value of an editor for display purposes, when the editor is not focused. Display values can be formatted using the standard formatting mechanism described in MSDN. For more information about composing format patterns, see the following MSDN topic: Formatting Types.

@(Html.DevExpress()
    .BootstrapButtonEdit("DisplayFormatButtonEdit")
    .Value("12345")
    .DisplayFormatString("[ 00 - 00 - 00 ]")
    ...
)

Caption and HelpText

In this example, the Button Edit control displays a caption on the top and auxiliary help text at the bottom of the editor.

@(Html.DevExpress()
    .BootstrapButtonEdit("CaptionAndHelpTextButtonEdit")
    .Caption("First Name")
    .HelpText("Enter your first name")
    ...
)
Screen Size
Color Themes
Demo QR Code