Selecting first item, if initial value does not exist

[Gunnar]

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);
    }
}

[Gunnar]

I have eventually solved this myself:

if (this.select() === -1) {
        this.select(0);
    }

Which makes the databound event look like this:

function onDepotsDataBoundEvent(e)
{
    var widget = e.sender;

    if (widget.dataSource.view().length === 0) {
        widget.text("");
        widget.value(null);
        widget.enable(false);
    }

    if (this.select() === -1) {
        this.select(0);
    }
}

[Dimitar]

Hello Gunnar,

Thank you for sharing your solution.

Regards,
Dimitar
Progress Telerik