Question

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

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

comboBox中的选定项值绑定到。现在，如果我在comboBox中输入辅助数据源中不存在的值，则primaryDS_SelectedItemID的值将为null，这是正确的。但是，如果我然后使用kendoValidator验证表单，它就会通过。但我不想要它。我需要一个规则来说明null或empty是否检查当前正在编辑的主数据源的行。

我已尝试创建此规则，但问题是如何获取当前正在编辑的行？

我有一个简单的例子来说明问题。

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）输入值：＆＃34; test＆＃34;进入组合框，然后按“验证”按钮。您将看到验证不适用于空值。

3）按“日志记录”按钮，您将看到primaryDS_SelectedItemID的值为空。

感谢您的时间，

此致

斯科特

Answer 1

如果您选择其中一个组合框值，则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)
          	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>

KendoUI ComboBox必需当主数据源的值为null时，不会触发验证

1 个答案: