剑道下拉列表默认选中项答案

【问题标题】：Kendo dropdownlist default selected item剑道下拉列表默认选中项
【发布时间】：2015-10-05 20:43:14
【问题描述】：

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

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

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

两种方式的答案会更好。

【问题讨论】：

标签： kendo-ui kendo-asp.net-mvc

【解决方案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..."
            });
    }

或

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

【讨论】：

【解决方案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

【讨论】：