HTML Attributes and Events

• Mar 18, 2021
• 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, 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 (applied to Text Box, Memo, Spin Edit, Date Edit and Time Edit)
• list (applied to Text Box, Memo, Spin Edit, Date Edit and Time Edit)
• maxlength
• name
• pattern
• spellcheck (applied to Text Box, 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

oncut	oncopy	onpaste
onbeforecut	onbeforecopy	onfocus
onfocusout	onblur	onfocusin
onchange	oninput	onkeydown
onkeypress	onkeyup	onclick
oncontextmenu	ondblclick	onmousedown
onmouseup	onmouseover	onmousemove
onmouseout	onpointerdown	onpointerup
onpointercancel	onpointermove	onpointerover
onpointerout	onwheel	ontouchstart
ontouchend	ontouchmove	onselect

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!";
    }
}