Kendo UI DropDownList on change to trigger event
25,816
Solution 1
@(Html.Kendo().DropDownList()
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>()
{
new SelectListItem()
{
Text = "All",
Value = "1"
},
new SelectListItem()
{
Text = "Customer",
Value = "2"
},
new SelectListItem()
{
Text = "Contact",
Value = "3"
},
new SelectListItem()
{
Text = "Service Employee",
Value = "4"
},
new SelectListItem()
{
Text = "Organization",
Value = "5"
},
new SelectListItem()
{
Text = "Employee",
Value = "6"
},
new SelectListItem()
{
Text = "Other",
Value = "7"
}
})
.Name("SearchType")
.Events(e => e.Change("OnSearchTypeChange"));
<script type="text/javascript">
function OnSearchTypeChange(e)
{
//Do whatever you want to do
}
</script>
Solution 2
Subscribe to the onSelect event and then get the selected item text. Below from kendo demo site.
function onSelect(e) {
if ("kendoConsole" in window) {
var dataItem = this.dataItem(e.item.index());
kendoConsole.log("event :: select (" + dataItem.text + " : " + dataItem.value + ")" );
}
};
Author by
Mark
User Interface designer, developer and C#,.NET & SQL programmer. https://www.linkedin.com/pub/mark-roberts/17/62/445
Updated on July 09, 2022Comments
-
Mark almost 2 years
I'm using Kendo UI for the first time and am having some difficulty triggering a function on my Kendo dropdownlist change.
My goal here is to show different search fields depending on the user's drop down selection. I have tried this a few different ways, and nothing seems to work.
Does anyone have a simple jQuery snippet that would get the text of the Kendo UI dropdown?
My code is as follows:
<script> $(document).ready(function () { var a = $("div#searchbox span.k-input").text(); console.log(a); $(a).change(function(){ $('.searchingfor').hide(); $('#' + a).show(); }); }); </script> @using (Html.BeginForm()) { <div id="searchbox" class="label"> @Html.Label("Search") @Html.TextBox("QuickSearch", null, new { style = "width:91%", @class = "k-input" }) <br /> <br /> @(Html.Kendo().DropDownList() .DataTextField("Text") .DataValueField("Value") .BindTo(new List<SelectListItem>() { new SelectListItem() { Text = "All", Value = "1" }, new SelectListItem() { Text = "Customer", Value = "2" }, new SelectListItem() { Text = "Contact", Value = "3" }, new SelectListItem() { Text = "Service Employee", Value = "4" }, new SelectListItem() { Text = "Organization", Value = "5" }, new SelectListItem() { Text = "Employee", Value = "6" }, new SelectListItem() { Text = "Other", Value = "7" } }) .Name("SearchType") ) </div> }