2

问题：我有一个 kendoui 组合框，它设置为具有主数据源（正在编辑的记录）和辅助数据源（用于自动完成的数据）的自动完成。主数据源具有包含以下字段的架构：

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

组合框中的选定项目值绑定到。现在如果我在辅助数据源中不存在的组合框中输入一个值，primaryDS_SelectedItemID 的值将为空，这是正确的。但是，如果我随后使用 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) 按 Validate 按钮，您将看到验证适用于空值。

2) 在组合框中输入值：“test”，然后按“验证”按钮。您将看到验证不适用于空值。

3) 按 Log Record 按钮，您将看到 primaryDS_SelectedItemID 的值为 null。

感谢您的时间，

问候，

斯科特

4

1 回答 1

0

如果您选择组合框值之一，您primaryDS_SelectedItemID的也是 null，因此您的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)
          	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>

于 2018-01-26T09:23:05.590 回答