剑道下拉列表默认选定项

Question

我在JSFIDLE示例中有以下代码

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

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

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修改在这里

Answer 2

要在用户手动选择之前不显示下拉列表的项目，请使用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来放置最初选择的项目。

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