Validate Syncfusion JavaScript Spreadsheet on outside button click

Question

I have below Syncfusion JavaScript Spreadsheet.

I have external button on the page, I want to validate and highlight the rows which are invalid on button click. How can I do this?

var sheet = [

  {
    ranges: [{
      dataSource: tradeData
    }],
    fieldAsColumnHeader: true,
    columns: [{
        width: 70
      }, {
        width: 80
      }, {
        width: 100
      }, {
        width: 100
      },
      {
        width: 70
      }, {
        width: 120
      }, {
        width: 80
      }, {
        width: 120
      },
      {
        width: 140
      }, {
        width: 80
      }, {
        width: 120
      }, {
        width: 120
      }
    ],
    rows: [{
      index: 1,
      cells: [{
          index: 3,
          value: '',
          validation: {
            type: 'List',
            value1: trade_types.toString()
          }
        },
        {
          index: 8,
          value: '',
          validation: {
            type: 'List',
            value1: counter_parties.toString()
          }
        },
        {
          index: 10,
          value: '',
          validation: {
            type: 'List',
            value1: settlement_methods.toString()
          }
        }
      ]
    }]
  }
];


var spreadsheet = new ej.spreadsheet.Spreadsheet({
  showRibbon: false,
  showFormulaBar: false,
  showSheetTabs: false,
  sheets: sheet,
  created: () => {
    //Add Data validation to range.
  }

});

spreadsheet.appendTo('#spreadsheet');

  document.getElementById("btn").onclick = () => {
    // Get the data of the spreadsheet.
    //Validate data like if the cell value is null or empty, if the value is Invalid, 
    //the highlight the cell with Yellow color(Default is yellow color)
  };

score 0 · Answer 1 · answered Feb 06 '23 at 11:28

Your requirement can be met by adding the data validation to the range of cells by using the addDataValidation method. And highlight the invalid data for the validation applied range by using the addInvalidHighlight method. For your convenience, we have prepared the sample based on your requirements. You can find it at the below link.

Sample Link: https://stackblitz.com/edit/c18zk5?file=index.js,index.html

Documentation Link: https://ej2.syncfusion.com/documentation/spreadsheet/cell-range/#data-validation

API Links: https://ej2.syncfusion.com/documentation/api/spreadsheet/#addinvalidhighlight

https://ej2.syncfusion.com/documentation/api/spreadsheet/#adddatavalidation

Validate Syncfusion JavaScript Spreadsheet on outside button click

1 Answers1