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: "&nbsp;", 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
            });
    }

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

在用户实际在列表中选择它之前，不显示列表中的第一项
将所选项目设置为列表中的第一项，以便在传递给我的控制器时该值不为空。

两种方式的答案都会更好。

Answer 1

要在用户手动选择下拉列表项目之前不显示这些项目，请使用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..."
            });
    }

OR

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

Answer 2

您的提案中未列出的一个选项是设置值为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

Kendo下拉列表默认选中的项

2 个答案: