This is a migrated thread and some comments may be shown as answers.

Selecting first item, if initial value does not exist

2 Answers 10 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Gunnar
Top achievements
Rank 1
Gunnar asked on 19 Apr 2018, 02:10 PM

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

2 Answers, 1 is accepted

Sort by
0
Gunnar
Top achievements
Rank 1
answered on 20 Apr 2018, 12:13 PM

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);
    }
}
0
Accepted
Dimitar
Telerik team
answered on 23 Apr 2018, 06:35 AM
Hello Gunnar,

Thank you for sharing your solution.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ComboBox
Asked by
Gunnar
Top achievements
Rank 1
Answers by
Gunnar
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or