Events
The Telerik UI DropDownList for ASP.NET Core exposes multiple events that allow you to control and customize the behavior of the component.
For a complete example of the basic DropDownList events, refer to the demo on using the events of the DropDownList.
Handling by Handler Name
The following example demonstrates how to subscribe to events by a handler name.
@(Html.Kendo().DropDownList()
.Name("dropdownlist")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Item1", Value = "1"
},
new SelectListItem() {
Text = "Item2", Value = "2"
},
new SelectListItem() {
Text = "Item3", Value = "3"
}
})
.Events(e => e
.Select("onSelect")
.Change("onChange")
)
)
<script>
function onSelect() {
// Handle the select event.
}
function onChange() {
// Handle the change event.
}
</script>
@{
var data = new List<SelectListItem>() {
new SelectListItem() {
Text = "Item1", Value = "1"
},
new SelectListItem() {
Text = "Item2", Value = "2"
},
new SelectListItem() {
Text = "Item3", Value = "3"
}
};
}
<script>
function onSelect() {
// Handle the select event.
}
function onChange() {
// Handle the change event.
}
</script>
<kendo-dropdownlist name="dropdownlist"
datatextfield="Text"
datavaluefield="Value"
bind-to="data"
on-select="onSelect"
on-change="onChange">
</kendo-dropdownlist>
Handling by Template Delegate
The following example demonstrates how to subscribe to events by a template delegate.
@(Html.Kendo().DropDownList()
.Name("dropdownlist")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Item1", Value = "1"
},
new SelectListItem() {
Text = "Item2", Value = "2"
},
new SelectListItem() {
Text = "Item3", Value = "3"
}
})
.Events(e => e
.Select(@<text>
function() {
// Handle the select event inline.
}
</text>)
.Change(@<text>
function() {
// Handle the change event inline.
}
</text>)
)
)
@{
var data = new List<SelectListItem>() {
new SelectListItem() {
Text = "Item1", Value = "1"
},
new SelectListItem() {
Text = "Item2", Value = "2"
},
new SelectListItem() {
Text = "Item3", Value = "3"
}
};
}
<kendo-dropdownlist name="dropdownlist"
datatextfield="Text"
datavaluefield="Value"
bind-to="data"
on-select="function() {
// Handle the select event inline.
}"
on-change="function() {
// Handle the change event inline.
}">
</kendo-dropdownlist>