Kendo 下拉列表默认选中项

Question

我有以下代码 jsfiddle example

var remainingFalilities = [
    {"Text":"Facility 1","Value":"1"},
    {"Text":"Facility 2","Value":"2"},
    {"Text":"Facility 3","Value":"3"},
    {"Text":"Facility 4","Value":"4"},
    {"Text":"Facility 5","Value":"5"},
    {"Text":"Facility 6","Value":"6"},
    {"Text":"Facility 7","Value":"7"},
];  

var ds = new kendo.data.DataSource({
    data: remainingFalilities
});


var selectedFacilities = [
    {"Text":"Facility 8","Value":"8"},
    {"Text":"Facility 9","Value":"9"}];

var dataSource = new kendo.data.DataSource({
   data: selectedFacilities,
   batch: false,
   pageSize: 20,
   schema: {
   model: {
            id: "Value",
            fields: {Text: { type: "string" }}
          }
   }
});        

$("#FacilityGrid").kendoGrid({
    dataSource: dataSource,
    autoBind: true,
    editable: { mode: "inline" },
    sortable: true,
    selectable: true,
    toolbar: ["create"],
    columns: [
        { command: ["destroy", "edit"], title: " ", width: "250px" },
        { field: "Text", title: "Facility Name", editor: facilityDropDownEditor     },
    ]
});

function facilityDropDownEditor(container, options) {            
        $('<input required data-text-field="Text" data-value-field="Value" data-bind="value: Text"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: true,
                dataSource: ds
            });
    }

问题是，当用户单击 "Add new record" 时，它会添加一个新项目，其设施名称下拉列表显示列表中的第一项。如果用户单击 "Update"，它会保存记录但会清空设施名称。原因是，下拉列表中确实没有选择任何项目。我知道这一点，因为当它传递给我的控制器代码时，选定的值是空的。所以，我真的很想知道如何

1. 在用户实际选择列表中的第一项之前不显示列表中的第一项或
2. 将所选项目设置为列表中的第一项，这样当传递到我的控制器时该值将不会为空。

两种方式的答案会更好。

Answer 1

一个选项没有在您的建议中列出，它是设置 optionLabel，当值为 null 时显示。

$('<input required data-text-field="Text" data-value-field="Value" data-bind="value: Text"/>')
    .appendTo(container)
    .kendoDropDownList(
    {
        autoBind: true,
        dataSource: ds,
        optionLabel:"Select Facility"
    }
);

您的 jsfiddle 已修改 here

Answer 2

在用户 select 手动使用 optionLabel

之前不显示下拉列表的项目

function facilityDropDownEditor(container, options) {            
        $('<input required data-text-field="Text" data-value-field="Value" data-bind="value: Text"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: true,
                dataSource: ds,
                optionLabel: "Select an item..."
            });
    }

或

使用 index 放置最初 selected 项目。

function facilityDropDownEditor(container, options) {            
        $('<input required data-text-field="Text" data-value-field="Value" data-bind="value: Text"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: true,
                dataSource: ds,
                index : 1 
            });
    }