2014-05-03 23 views
2

問題: 我有一個kendoui ComboBox,它設置爲自動完成主數據源(正在編輯的記錄)和輔助數據源(數據自動完成)。 主數據源具有與所述場的模式:KendoUI ComboBox Required當主數據源的值爲空時,不會觸發驗證

'primaryDS_SelectedItemID': { 
    type: 'number', 
    defaultValue: null, 
    nullable: false 
} 

在下拉列表中選擇的項目的值結合。 現在,如果我在comboBox中輸入了不存在於輔助數據源中的值,則primaryDS_SelectedItemID的值將爲null,這是正確的。 但是,如果我然後驗證與它通過kendoValidator的形式。但我不想要它。我需要一個規則來說明是空還是空來檢查當前正在編輯的主數據源的行。

我試圖創建這個規則,但問題是如何獲取當前正在編輯的行?

我有一個簡單的例子來演示這個問題。

HTML:

<div id="form" style="padding:10px"> 
    <label>Item:</label> 
    <input id="comboBox" 
      name="Item" data-role="combobox" 
      data-placeholder="Type an Item Name" 
      data-value-primitive="true" 
      data-text-field="secondaryDS_Name" 
      data-value-field="secondaryDS_ID" 
      data-filter="startswith" 
      data-auto-bind="false" 
      data-bind="value: currentDataView.primaryDS_SelectedItemID" 
      required /> 
    <span class="k-invalid-msg" data-for="Table Name"></span> 

    <button id="validate">Validate</button> 
</div> 

的JavaScript:

$(document).ready(function() { 
    var oViewModel = { 
     currentDataView: {}, 
     primaryDataSource: new kendo.data.DataSource({ 
      schema: { 
       model: { 
        id: 'primaryDS_ID', 
        fields: { 
         'primaryDS_ID': { 
          type: 'number' 
         }, 
         'primaryDS_SelectedItemID': { 
          type: 'number', 
          defaultValue: null, 
          nullable: false 
         } 
        } 
       } 
      } 
     }), 
     secondaryDataSource: new kendo.data.DataSource({ 
      data: [ 
       { secondaryDS_ID: 1, secondaryDS_Name: 'Item One' }, 
       { secondaryDS_ID: 2, secondaryDS_Name: 'Item Two' }, 
       { secondaryDS_ID: 3, secondaryDS_Name: 'Item Three' } 
      ], 
      total: 3, 
      schema: { 
       model: { 
        id: 'secondaryDS_ID', 
        fields: { 
         'secondaryDS_ID': { 
          type: 'number' 
         }, 
         'secondaryDS_Name': { 
          type: 'string' 
         } 
        } 
       } 
      } 
     }) 
    }, 
    oValidator = $("#form").kendoValidator().data("kendoValidator"), 
    oComboBox = null; 

    oViewModel.currentDataView = oViewModel.primaryDataSource.add(); 
    kendo.init($('#comboBox')); 
    oComboBox = $('#comboBox').data('kendoComboBox'); 
    oComboBox.setDataSource(oViewModel.secondaryDataSource); 
    kendo.bind(oComboBox, oViewModel); 

    $('#validate').on('click', function() { 
     oValidator.validate(); 
    }); 
    $('#logRecord').on('click', function() { 
     $('#status').text(JSON.stringify(oViewModel.currentDataView)); 
    }); 


}); 

小提琴:http://jsfiddle.net/codeowl/Mq6ee/5/

複製步驟:

1)按驗證按鈕,你將看到驗證工作在一個空值上。

2)在組合框中輸入值「test」,然後按下Validate按鈕。您將看到驗證不適用於空值。

3)按日誌記錄按鈕,你會看到primaryDS_SelectedItemID的值爲空。

謝謝您的時間,

問候,

斯科特

回答

0

primaryDS_SelectedItemID也爲空,如果您選擇的組合框值中的一個,所以你currentDataView不正確綁定。

但是,如果您只是希望驗證是否選擇了某個預選項目,則可以使用自定義規則並檢查與secondaryDataSource視圖綁定的內容。

$(document).ready(function() { 
 
    var oViewModel = { 
 
     currentDataView: {}, 
 
     primaryDataSource: new kendo.data.DataSource({ 
 
      schema: { 
 
       model: { 
 
        id: 'primaryDS_ID', 
 
        fields: { 
 
         'primaryDS_ID': { 
 
          type: 'number' 
 
         }, 
 
         'primaryDS_SelectedItemID': { 
 
          type: 'number', 
 
          defaultValue: null, 
 
          nullable: false 
 
         } 
 
        } 
 
       } 
 
      } 
 
     }), 
 
     secondaryDataSource: new kendo.data.DataSource({ 
 
      data: [ 
 
       { secondaryDS_ID: 1, secondaryDS_Name: 'Item One' }, 
 
       { secondaryDS_ID: 2, secondaryDS_Name: 'Item Two' }, 
 
       { secondaryDS_ID: 3, secondaryDS_Name: 'Item Three' } 
 
      ], 
 
      total: 3, 
 
      schema: { 
 
       model: { 
 
        id: 'secondaryDS_ID', 
 
        fields: { 
 
         'secondaryDS_ID': { 
 
          type: 'number' 
 
         }, 
 
         'secondaryDS_Name': { 
 
          type: 'string' 
 
         } 
 
        } 
 
       } 
 
      } 
 
     }) 
 
    }, 
 
    oValidator = $("#form").kendoValidator({ 
 
     rules: { 
 
     customRule: function(input) { 
 
      if (input.is("[name=Item]") && oViewModel.secondaryDataSource._view.length == 0) 
 
      \t return false; 
 
      return true; 
 
     } 
 
     }, 
 
     messages: { 
 
     customRule: "Unknown item" 
 
     } 
 
    }).data("kendoValidator"), 
 
    oComboBox = null; 
 
    
 
    oViewModel.currentDataView = oViewModel.primaryDataSource.add(); 
 
    kendo.init($('#comboBox')); 
 
    oComboBox = $('#comboBox').data('kendoComboBox'); 
 
    oComboBox.setDataSource(oViewModel.secondaryDataSource); 
 
    kendo.bind(oComboBox, oViewModel); 
 
    
 
    $('#validate').on('click', function() { 
 
     oValidator.validate(); 
 
    }); 
 
    $('#logRecord').on('click', function() { 
 
     $('#status').text(JSON.stringify(oViewModel.secondaryDataSource._view)); 
 
    }); 
 

 

 
});
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet"/> 
 
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet"/> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 

 
<div id="form" style="padding:10px"> 
 
     <label>Item:</label> 
 
     <input id="comboBox" 
 
       name="Item" data-role="combobox" 
 
       data-placeholder="Type an Item Name" 
 
       data-value-primitive="true" 
 
       data-text-field="secondaryDS_Name" 
 
       data-value-field="secondaryDS_ID" 
 
       data-filter="startswith" 
 
       data-auto-bind="false" 
 
       data-bind="value: currentDataView.primaryDS_SelectedItemID" 
 
       required /> 
 
     <span class="k-invalid-msg" data-for="Table Name"></span> 
 

 
     <button id="validate">Validate</button> 
 
     <button id="logRecord">Log Record</button> 
 
     <div id="status" style="padding:10px"></div> 
 
    </div>

相關問題