2015-10-05 112 views
1

我有一個 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 
      }); 
    } 

問題是下面的代碼,當用戶單擊「添加新記錄」它增加了一個新的項目與顯示一號設施名稱下拉項目在列表中。如果用戶點擊「更新」,它將保存記錄,但會刪除設施名稱。原因是,在下拉列表中確實沒有選擇一個項目。我知道這是因爲當它傳遞給我的控制器代碼時,所選值爲空。所以,我真的很想知道如何可以

  1. 沒有顯示在列表中的第一項,直到用戶實際上是在列表中選擇,或
  2. 設置所選項目的第一個項目在列表中,這樣的傳遞給我的控制器時,值不會爲空。

兩種方式的答案會更好。

回答

3

爲了不顯示,直到用戶下拉的項目中選擇他們手動使用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 
      }); 
    } 
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