2

Problem: I have a kendoui ComboBox that is setup for auto-complete with a Primary Data Source (the record being edited) and a Secondary DataSource (the data for the auto-complete). The Primary Data Source has a schema with the field:

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

that the selected items value in the comboBox binds to. Now if I enter a value in the comboBox that does not exist in the secondary data source, the value of primaryDS_SelectedItemID will be null, which is correct. But if I then validate the form with the kendoValidator it passes. But I don't want it to. I need a rule to say if null or empty that checks the row of the primary datasource that is currently being edited.

I have made an attempted at creating this rule, but the issue is how do I get the row that is currently being edited?

I have a put together a simple example that demonstrates the problem.

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


});

Fiddle: http://jsfiddle.net/codeowl/Mq6ee/5/

Replication Steps:

1) Press the Validate button and you will see that the validation works on an empty value.

2) Enter the value: "test" into the combo box and then press the Validate button. You will see that validation does not work on a null value.

3) Press the Log Record button and you will see that the value of primaryDS_SelectedItemID is null.

Thank you for your time,

Regards,

Scott

user2109254
  • 1,709
  • 2
  • 30
  • 49

1 Answers1

0

Your primaryDS_SelectedItemID is also null if you select one of the combobox values, so your currentDataView does not correctly bind.

However, if you just want a validation if one of your preselected items were chosen, you could use a custom rule and check what binds to the view of your 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>
CennoxX
  • 773
  • 1
  • 9
  • 20