Error if 2 range validations are added

[nicole]

Hello! I am using the exact same code as in this example: https://demos.telerik.com/kendo-ui/spreadsheet/datasource

When I try to add 1 validation like this:

 

sheet.range("$B2").validation({
                    from: '{ "Foo item 1", "Bar item 2", "Baz item 3" }',
                    dataType: "list",
                    messageTemplate: "Number should match the validation.",
                    showButton: true,
                    comparerType: "list",
                    type: "reject"
                });

it works fine and shows it with no problem, but when I add a second one, the headers are not shown and I get this error:

Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at r.set (kendo.all.min.js:27)
    at r.set (kendo.all.min.js:27)
    at kendo.all.min.js:586
    at init.forEach (kendo.all.min.js:511)
    at init._sheetChange (kendo.all.min.js:586)
    at init.trigger (kendo.all.min.js:4)
    at init.triggerChange (kendo.all.min.js:526)
    at init._set (kendo.all.min.js:518)
    at init._property (kendo.all.min.js:518)
    at init.validation (kendo.all.min.js:521)

 

This is all the code I added to the example:

var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

                var sheet = spreadsheet.activeSheet();

                sheet.range("$B2").validation({
                    from: '{ "Foo item 1", "Bar item 2", "Baz item 3" }',
                    dataType: "list",
                    messageTemplate: "Number should match the validation.",
                    showButton: true,
                    comparerType: "list",
                    type: "reject"
                });

                sheet.range("$C2").validation({
                    from: '{ "Ble item 1", "Ble item 2", "Ble item 3" }',
                    dataType: "list",
                    messageTemplate: "Number should match the validation.",
                    showButton: true,
                    comparerType: "list",
                    type: "reject"
                });

 

Please help! thanks

[nicole]

Telerik team answered my ticket, so if someone needs this as well, here is my solution:

 

Hi Nicole,

As in this case the data populated in the Spreadsheet is retrieved from a remote, the validations should be applied after the widget has been populated. To do that you could handle the second render event of the Spreadsheet:
var renderNumber = 0;

spreadsheet.bind('render', function(e) {
  var spreadsheet = e.sender;
  var sheet = spreadsheet.activeSheet();

  renderNumber++;

  if (renderNumber < 2) {
    return;
  } else if (renderNumber > 2) {
    spreadsheet.unbind('render');
  }

  sheet.range("$B2").validation({
    from: '{ "Foo item 1", "Bar item 2", "Baz item 3" }',
    dataType: "list",
    messageTemplate: "Number should match the validation.",
    showButton: true,
    comparerType: "list",
    type: "reject"
  });

  sheet.range("$C2").validation({
    from: '{ "Ble item 1", "Ble item 2", "Ble item 3" }',
    dataType: "list",
    messageTemplate: "Number should match the validation.",
    showButton: true,
    comparerType: "list",
    type: "reject"
  });
});


I hope, that this helps. in case you have any other questions, please do not hesitate to contact us.

Regards,
Veselin Tsvetanov 
Progress Telerik