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.
<dx:BootstrapButtonEdit runat="server" Text="Sample Text">
<ClientSideEvents ButtonClick="function(s,e) { dxbsDemo.showToast('The button has been clicked.'); }" />
<Buttons>
<dx:BootstrapEditButton />
</Buttons>
</dx:BootstrapButtonEdit>
In this example, the Bootstrap Button Edit control displays two custom buttons - one on the left and one on the right of the editor. In the markup sample, you can see how these buttons are defined as elements of the Buttons collection property.
<dx:BootstrapButtonEdit runat="server" Text="Sample Text">
<Buttons>
<dx:BootstrapEditButton IconCssClass="fa fa-envelope" Position="Left" />
<dx:BootstrapEditButton Text="Check email" />
</Buttons>
<ClientSideEvents ButtonClick="function(s, e) { dxbsDemo.showToast('The button ' + e.buttonIndex + ' has been clicked.'); }" />
</dx:BootstrapButtonEdit>
In this example, the Button Edit control displays a clear button, which will delete the current content of the editor when clicked. The clear button can be displayed in one of the following modes.
- Always - the clear button is always visible as in this example
- Auto - the clear button is displayed on touch devices only
- Never - the clear button is not displayed
- OnHover - the clear button is displayed when an editor is hovered over or focused
<dx:BootstrapButtonEdit runat="server" Text="Sample Text">
<ClearButton DisplayMode="Always" />
<ClientSideEvents ButtonClick="function(s,e) { dxbsDemo.showToast('The button has been clicked.'); }" />
<Buttons>
<dx:BootstrapEditButton />
</Buttons>
</dx:BootstrapButtonEdit>
Null Text
This example illustrates how the NullText property can be used to display prompt text (watermark) 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. To show the null text even in the focused editor set the NullTextDisplayMode property to UnfocusedAndFocused.
<dx:BootstrapButtonEdit runat="server" NullText="Enter Your Name">
<ClientSideEvents ButtonClick="function(s,e) { dxbsDemo.showToast('The button has been clicked.'); }" />
<Buttons>
<dx:BootstrapEditButton />
</Buttons>
</dx:BootstrapButtonEdit>
Mask
In this example, the Button Edit control takes advantage of the masked input feature to only accept values formatted as phone numbers. The mask is specified using the MaskSettings.Mask property.
Refer to the Mask Types topic, for a list of the available mask types.
- MaskSettings.ErrorText - specifies the error text to be displayed, if user input is not valid against the specified mask
- MaskSettings.ShowHints - MaskSettings.ShowHints - enables a hint that displays when an end-user enters a value into a masked editor (range and enumeration mask types are supported)
<dx:BootstrapButtonEdit runat="server">
<MaskSettings Mask="+1 (999) 000-0000" IncludeLiterals="None" ErrorText="Please input missing digits" />
<ClientSideEvents ButtonClick="function(s,e) { dxbsDemo.showToast('The button has been clicked.'); }" />
<Buttons>
<dx:BootstrapEditButton />
</Buttons>
</dx:BootstrapButtonEdit>
The DisplayFormatString property 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 topics: Numeric Format Strings and Date and Time Format Strings.
<dx:BootstrapButtonEdit runat="server" Text="12345" DisplayFormatString="[ 00 - 00 - 00 ]">
<ClientSideEvents ButtonClick="function(s,e) { dxbsDemo.showToast('The button has been clicked.'); }" />
<Buttons>
<dx:BootstrapEditButton />
</Buttons>
</dx:BootstrapButtonEdit>
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.
<dx:BootstrapButtonEdit runat="server" Caption="First Name" HelpText="Enter your first name">
<ValidationSettings RequiredField-IsRequired="true"></ValidationSettings>
<ClientSideEvents ButtonClick="function(s,e) { dxbsDemo.showToast('The button has been clicked.'); }" />
<Buttons>
<dx:BootstrapEditButton />
</Buttons>
</dx:BootstrapButtonEdit>
Render Option
This demo demonstrates how to specify contextual styles for edit buttons (SettingsBootstrap.RenderOption).
<dx:BootstrapButtonEdit runat="server" Text="Sample Text" >
<ClientSideEvents ButtonClick="OnButtonClick" />
<Buttons>
<dx:BootstrapEditButton>
<SettingsBootstrap RenderOption="Primary" />
</dx:BootstrapEditButton>
<dx:BootstrapEditButton Text="Edit" Position="Left">
<SettingsBootstrap RenderOption="Warning" />
</dx:BootstrapEditButton>
<dx:BootstrapEditButton Text="Delete" Position="Left">
<SettingsBootstrap RenderOption="Danger" />
</dx:BootstrapEditButton>
</Buttons>
</dx:BootstrapButtonEdit>
function OnButtonClick(s, e) {
var buttonText = s.GetButton(e.buttonIndex).innerText;
dxbsDemo.showToast((buttonText ? buttonText : "Option") + " button has been clicked");
}