As you an see in my view below, I am trying to read the selected values in the change event of my MultiColumnComboBox.
The box is populating fine with about 300 records from a JsonResult from the controller. Here are the problems I'm needing help with:
1) Getting/Reading the data value and data text of the selected item in the list. combo.item shows as undefined when I put a breakpoint on it in the browser.
2) I'd like to know how to get/read the text of the third column that isn't either the DataValue or DataText of the selected item, Title in this case.
3) When I click on the an item when the list is dropped down, I have to click a second time for it to collapse. In the demos, they collapse as soon as I click on an item.
------------------------------------------------------
@{
ViewBag.Title = "Index";
}
<h2>Bond Maturities</h2>
@(Html.Kendo().MultiColumnComboBox()
.Name("bonds")
.Placeholder("Select a bond")
.DataTextField("IssueAbbreviation")
.DataValueField("BondId")
.Columns(columns =>
{
columns.Add().Field("IssueAbbreviation").Title("Issue");
columns.Add().Field("Title");
columns.Add().Field("BondId").Title("ID");
})
.HtmlAttributes(new { style = "width:100%;" })
.Filter(FilterType.Contains)
//.AutoBind(false) <-- Prevents list from loading until something typed in to trigger filter.
.MinLength(3)
.DataSource(source => {
source.Read(read =>
{
read.Action("GetBondTitleList", "Bond");
})
//.ServerFiltering(true)
;
})
.Events(e => { e.Change("onChange"); })
)
<div class="box">
<h4>Console log</h4>
<div id="console"></div>
</div>
<script>
function onChange(e) {
$("#console").html("event: change");
//var numeric = $("#age").data("kendoNumericTextBox");
//numeric.value(10);
var combo = $("#bonds").data("kendoMultiColumnComboBox");
var dataItem = dataItem(combo.item.index()); //dataItem
$("#console").html("Changed to " + dataItem.Value);
//var dataItem = dataItem(combo.item.index());
alert("ID: " + dataItem.Value + "; Title: " + dataItem[2] );
}
</script>