Here we have my combobox:
@(Html.Kendo().ComboBox()
.Name("depots")
.DataTextField("Text")
.DataValueField("Value")
.Height(500)
.Filter(FilterType.Contains)
.Events(ev =>
{
ev.Change("onDepotsChangeEvent");
ev.DataBound("onDepotsDataBoundEvent");
ev.Select("onDepotsSelectEvent");
})
.HighlightFirst(true)
.Suggest(true)
.Value(SOME INITIAL VALUE)
.HtmlAttributes(new { style = "width:550px; max-width:100%;" })
.DataSource(source => source.Custom()
.Group(group => group.Add("Group", typeof(string)))
.Transport(transport => transport
.Read(read =>
{
// Censored ;)
})
)
)
)
As you can see, I am setting an initial value with the ".Value(something something". This means that when the combobox loads, the item on the list corresponding to the value, is selected. It works fine as intended.
The problem is when there is not an item with a value corresponding to the initial set value. If that happens, the initial value is shown in the input field of the combobox. After searching around, this is apparently by design and not an error.
What I want to do is, if an item does not exist in the combobox, with the same value as the initial set value, the first item on the list should be selected.
I have searched and searched for days now, with no solution, so any help would be greatly appreciated.
In case it matters, here are the three event methods:
function
onDepotsSelectEvent(e) {
if
(e.item) {
var
dataItem =
this
.dataItem(e.item.index());
$.post(
"@Url.Action("
SetSelectedDepotSession
", "
PartialView
")"
, { id: dataItem.Value });
}
}
function
onDepotsChangeEvent(e)
{
if
(
this
.value() &&
this
.selectedIndex === -1) {
this
._filterSource({
value:
""
,
field:
this
.options.dataTextField,
operator:
"contains"
});
this
.select(1);
}
}
function
onDepotsDataBoundEvent(e)
{
var
widget = e.sender;
if
(widget.dataSource.view().length === 0) {
widget.text(
""
);
widget.enable(
false
);
}
}