如果初始值不存在，则选择第一项

Question

这是我的组合框：

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

如您所见，我正在使用“.Value(something something)”设置初始值。这意味着当组合框加载时，列表中对应于该值的项目被选中。它工作正常符合预期。

问题是当没有一个项目的值对应于初始设置值时。如果发生这种情况，初始值将显示在组合框的输入字段中。四处搜索后，这显然是设计使然，并非错误。

我想做的是，如果组合框中不存在与初始设置值相同的项目，则应选择列表中的第一项。

我已经搜索了好几天了，没有任何解决方案，所以如果您能提供帮助，我们将不胜感激。

万一重要，这里是三个事件方法：

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

解决方案

这是修复后的数据绑定事件代码：

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

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

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

它所做的是，首先如果根本没有任何项目，组合框将被禁用。然后，如果列表中不存在初始值，则选择列表中的第一项。

Answer 1

是的，这是一种奇怪的行为。就像小部件添加无效值到它的列表一样。我检查过，如果您直接在输入元素中执行 .val() 或在小部件实例中执行 .value()，您将获得无效值，但如果您执行 .select()，它 returns -1，因为没有与该值相关的 DataItem。这是一个开始。

对我有用的是，如果 .select() returns -1，则在 dataBound 事件上清除小部件的值。类似于：

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

Demo

如果初始值不存在，则选择第一项

Selecting first item, if initial value does not exist

javascript

kendo-ui

kendo-combobox

kendo-asp.net-mvc

kendo-ui-mvc