1. Home
  2. Forum
  3. React - EJ 2
  4. cell edit with validation giving error

cell edit with validation giving error

hi,

in batch edit mode, i have required true validation for cells. in newly added row,
while adding data to the first cell, i have grid refresh method in cellSaved event.
and then if i click on second cell, getting below error.

batch-edit.js:124 Uncaught TypeError: e.clickArgs.preventDefault is not a function
    at e.onBeforeCellFocused (batch-edit.js:124)
    at e.notify (observer.js:127)
    at t.notify (component.js:321)
    at e.onClick (focus-strategy.js:146)
    at e.focusElement (edit-renderer.js:172)
    at e.convertWidget (edit-renderer.js:136)
    at e.update (edit-renderer.js:43)
    at e.<anonymous> (batch-edit.js:1093)
    at e.notify (observer.js:131)
    at t.trigger (component-base.js:260)
    at e.editCellExtend (batch-edit.js:1044)
    at e.editCell (batch-edit.js:981)
    at e.dblClickHandler (batch-edit.js:115)
    at e.notify (observer.js:127)
    at t.notify (component.js:321)
    at t.dblClickHandler (grid.js:4450)


below is my sample code:

cellSaved=async(args)=>{
    if(args.previousValue!=args.value){
    if(args.columnObject.type==='date'){
      let tempDate=moment(args.value).toDate();
      args.value=moment(tempDate).format("YYYY-MM-DD");
    }
    let tempCurrRow = Object.assign({},args.rowData);
      if(tempCurrRow.Row_Status==='NEW'){
        tempCurrRow[args.columnName]=args.value;
          let tempColumnAliasMap = this.state.columnAliasMap;
          for (let key of tempColumnAliasMap.keys()) {
            tempCurrRow[tempColumnAliasMap.get(key)] = tempCurrRow[key];
            delete tempCurrRow[key];
          }

        if(this.modifiedRecords.size > 0){
          var self = this;
          this.modifiedRecords.forEach(loopSet);
          function loopSet(value1, value2, set) {
            if(value2.row_number === tempCurrRow.row_number){
              self.modifiedRecords.delete(value2);
            }
          }
        }

        this.modifiedRecords.add(tempCurrRow);

        let tempData=this.state.data;
        let recordAdded=false;
        tempData.forEach((flt,index)=>{
          if(flt.row_number===args.rowData.row_number){
            args.rowData[args.columnName]=args.value;
            tempData[index]=args.rowData;
            recordAdded=true;
          }
        });
        if(!recordAdded){
          tempData.unshift(args.rowData);
        }

          await this.setState({
            data:tempData
          })
          this.gridInstance.dataSource=this.state.data;
          this.gridInstance.refresh();
      }else{
        let tempCurrRow = Object.assign({},args.rowData);
        tempCurrRow[args.columnName]=args.value;
        tempCurrRow.Row_Status = 'UPDATED';
        let tempColumnAliasMap = this.state.columnAliasMap;
        for (let key of tempColumnAliasMap.keys()) {
          tempCurrRow[tempColumnAliasMap.get(key)] = tempCurrRow[key];
          delete tempCurrRow[key];
        }

        if(this.modifiedRecords.size > 0){
          var self = this;
          this.modifiedRecords.forEach(loopSet);
          function loopSet(value1, value2, set) {
            if(value2.row_number === tempCurrRow.row_number){
              self.modifiedRecords.delete(value2);
            }
          }
        }

        this.modifiedRecords.add(tempCurrRow);


        let tempData=this.state.data;
        tempData.forEach((flt,index)=>{
          if(flt.row_number===args.rowData.row_number){
            args.rowData[args.columnName]=args.value;
            tempData[index]=args.rowData;
          }
        });
        await this.setState({
          data:tempData
        })
        this.gridInstance.dataSource=this.state.data;
        this.gridInstance.refresh();
      }
      console.log(this.modifiedRecords);
    }
  }

1 Reply 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team March 19, 2021 10:06 AM UTC

Hi Max, 
  
Thanks for contacting Syncfusion support. 
  
Query: in batch edit mode, i have required true validation for cells. in newly added row, 
while adding data to the first cell, i have grid refresh method in cellSaved event. 
and then if i click on second cell, getting below error. 
  
We have analyzed your query and found that you have change the Grid dataSource before the edit form destroyed in Grid. This is the cause of issue. This is not correct way to update the dataSource. So,we suggest you to close the editform before changing the dataSource in the Grid. By using closeEdit() method you can cancel the edit action in the Grid. Find the below code example and sample for more information. 
  
  
[index.js] 
  
  cellSaved = async args => { 
    if (args.cell.closest("tr").classList.contains("e-insertedrow")) { 
      setTimeout(() => { 
// cancel the edit and close the edit form after some time interval 
        this.grid.closeEdit(); 
// change the dataSource 
        this.grid.dataSource = data.slice(0, 5); 
      }, 200); 
    } 
  }; 
  
  
  
Please get back to us if you need further assistance with this. 
  
Regards, 
Rajapandiyan S 


Marked as answer
Loader.
Up arrow icon