Default HTML Attributes and DOM Events

4 Dec 20243 minutes to read

The Syncfusion^® ASP.NET Core UI controls provide the most useful public API for control implementation and customization. Apart from this public API, the Syncfusion^® ASP.NET Core UI controls can support the use of default HTML attributes in the root element of its control and input DOM events can be applied in the client side.

Using HTML Attributes and DOM Events in the Input Element

The following is a list of Syncfusion^® ASP.NET Core UI Controls that use the standard HTML input element. You can apply the HTML input attributes and DOM events directly to the input element used on these Syncfusion^® ASP.NET Core Controls.

• AutoComplete
• CheckBox
• ComboBox
• DatePicker
• DateRangePicker
• DateTimePicker
• DropDownList
• DropDownTree
• MaskedTextBox
• MultiSelect
• NumericTextBox
• RadioButton
• TextBox
• TimePicker
• Upload
• DropDownButton
• ProgressButton
• SplitButton
• InPlaceEditor
• Slider
• Switch

Available Syncfusion^® Properties Equivalent to HTML Attributes

The following table illustrates the HTML attributes and their equivalent Syncfusion^® API.

HTML Attribute	Syncfusion® API	Controls
id	ID	All Controls
autocomplete	Autocomplete	TextBox
checked	Checked	CheckBox RadioButton Switch
disabled	Disabled	Button CheckBox ColorPicker InPlaceEditor RadioButton DropDownButton ProgressButton SplitButton Switch
	Enabled	DatePicker DateRangePicker DateTimePicker DropDownList DropDownTree ListBox MaskedTextBox MultiSelect NumericTextBox Uploader TimePicker Slider
max	Max	DatePicker DateRangePicker DateTimePicker NumericTextBox TimePicker Slider
min	Min	DatePicker DateRangePicker DateTimePicker NumericTextBox TimePicker Slider
multiple	Multiple	Upload
placeholder	Placeholder	Except below controls: CheckBox RadioButton Upload
readonly	ReadOnly	AutoComplete ComboBox DatePicker DateRangePicker DateTimePicker DropDownList DropDownTree MaskedTextBox MultiSelect Slider
step	Step	NumericTextBox Slider TimePicker DateTimePicker
value	Value	Except below control: Upload
width	Width	Except below controls: CheckBox RadioButton Upload

CSHTML

<ejs-textbox id="textbox" name="first-name" title="First name" autocomplete="Off"></ejs-textbox>

The textbox will be rendered with the following output.

DOM

<span class="...">
    <input id="textbox" class="..." name="first-name" type="text" autocomplete="off" title="First name" minlength="15" ... />
</span>

In some cases, you may need to add HTML attributes to the root/container element of the above input-based controls. For this, you can use HtmlAttributes Syncfusion^® API to add HTML attributes to the root/container element.

CSHTML

@{
    IDictionary<string, object> customAttribute = new Dictionary<string, object>()
    {
       { "style", "background:aliceblue;" },
    };
}
<ejs-textbox id="first" htmlAttributes="customAttribute"></ejs-textbox>

The textbox will be rendered with the following output.

DOM

<span class="..." style="background: aliceblue;" ...>
    <input id="first" ... />
</span>

Input DOM Events

The Syncfusion^® ASP.NET Core UI control supports binding the native DOM events on the input element.

CSHTML

<div class="alert "></div>

<ejs-textbox id="first"></ejs-textbox>

<script>
    var input = document.querySelector('.alert');
    document.getElementById("first").addEventListener("focus", function () {
        input.innerHTML = "Focus event is triggered on the TextBox.";
        input.classList.add('alert-info');
    });

    document.getElementById("first").addEventListener("blur", function () {
        input.innerHTML = "Focusout event is triggered on the TextBox.";
        input.classList.add('alert-info');
    });
</script>