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

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

HTML Attributes And Events