HTML Attributes and Events
- 2 minutes to read
Our Blazor Editors ship with a comprehensive set of public API members (properties, methods, and events) that help configure and customize the components. For more information, refer to the component’s description.
If the included API does not meet your requirements, you can use standard HTML attributes and event handlers to configure Blazor components. If you specify attributes or event handlers in a component’s markup, they are applied to the component’s root or input
element.
Apply HTML Attributes and Event Handlers to the Root Element
HTML attributes are usually applied to the component’s root element. For example, the code below sets the id and title attributes to a Date Edit component.
<DxDateEdit Date="DateTime.Today" id="my-dateedit" title="My Title"/>
The rendered code:
<div id="my-dateedit" class="..." title="My Title">
<div>
<div>
<input name="..." type="...">
</div>
</div>
</div>
You can also use HTML attributes to handle events. For example, the following code sets the ondblclick
event handler to a Button component:
<DxButton Text="My button" @ondblclick="@(()=>Console.WriteLine("The button is double-clicked"))"/>
Apply HTML Attributes and Event Handlers to the Input Element
Text Box, ComboBox, Masked Input, Memo, Spin Edit, Date Edit, Time Edit, and TagBox components use the standard HTML input
element so you can apply the following HTML attributes and event handlers:
Attributes
- accesskey
- autocomplete
- list (applied to Text Box, Masked Input, Memo, Spin Edit, Date Edit and Time Edit)
- maxlength
- name
- pattern
- spellcheck (applied to Text Box, Masked Input, Memo, Combo Box and Tag Box)
- tabindex
- type
<DxTextBox NullText="Type..."
id="text"
name="text"
maxlength="10"
autocomplete="on">
</DxTextBox>
The rendered code:
<div id="text" class="...">
<div class="...">
<div>
<input type="text"
placeholder="Type..."
maxlength="10"
name="text"
autocomplete="on">
</div>
</div>
</div>
Event Handlers
The code below shows how to apply the onfocus
and onblur
handlers to a Text Box:
<DxTextBox NullText="Type..."
@onfocus="Focus_in"
@onblur="Focus_out">
</DxTextBox>
<div class="alert alert-info">@Alert</div>
@code {
public string Alert { get; set; } = "";
void Focus_in()
{
Alert = $"The TextBox is in focus!";
}
void Focus_out()
{
Alert = $"The TextBox is out of focus!";
}
}