Highlight edited cells

[Andrew]

In batch edit the unsaved changes are highlighted light green. I would like to be able to continue to highlight these cells in another colour after the batch editing update is saved.

I have tried to do this using the beforeBatchSave callback, by first identifying what fields have been edited for each row, and then adding the names of the edited fields to an array stored in a non-visible column. This works ok for the first edit on a particular row, but for any subsequent edits the array is being overwritten with the initial value. 

Can you please suggest how to implement this? I'm using locally bound data.

[Thiyagu Subramani]

Hi Andrew, 

Thanks for contacting Syncfusion forum. 

Query: In batch edit the unsaved changes are highlighted light green. I would like to be able to continue to highlight these cells in another color after the batch editing update is saved. 

 

Based on your shared information we suspect that you want to set highlighted color for the updated cells after the batch editing update is saved. We have achieved this requirement by using cellSaved and actionComplete event. In this cellSaved event pushed modified cell’s col index and row Index to the array and used this array values we have added custom class (e-modified) to that required cell in actionComplete event. 

Please refer to the below code and sample link. 

this.array = []; 

actionComplete(args) { 

    var gridObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

    for(var i =0 ; i< this.array.length; i++) { 

      var cell = gridObj.getCellFromIndex(parseInt(this.array[i].split('of')[1]) , parseInt(this.array[i].split('of')[0])); 

      cell.classList.add('e-modified'); 

    } 

  } 

  cellSaved(args) { 

    this.array.push(parseInt(args.cell.getAttribute('aria-colindex')) + 'of' + parseInt(args.cell.getAttribute('index'))) 

  } 

.e-modified { 

  background: lawngreen; 

} 

 

After updating: 

 

If it not your exact requirement, please share below details then only we provide the appropriate solution as soon as possible. 

1. Share your exact requirement with UI representation.
2. This works ok for the first edit on a particular row, but for any subsequent edits the array is being overwritten with the initial value – Explain briefly ?
3. Syncfusion package version.
4. If possible share issue reproducing sample or reproduce the issue in above sample.
5. Complete Grid rendering code

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[Andrew]

Hi Thiyagu,

Thanks for your reply. I tried your suggestion, it wasn't exactly what I was after but very helpful nonetheless.

I was able to achieve what I needed by using the updateCell method rather than the setCellValue method to store the list of edited fields.

However, updateCell needs rowIndex as a param. Is there an equivalent function I can call that takes the primary key as the param?

Additionally, I'd like to use the keyPressed callback. How can I determine in that callback if there are unsaved changes in batch editing mode or not?

[Joseph Christ Nithin Issack]

Hello Andrew, 

  

Thanks for the update. 

  

By default, in EJ2 batch editing you can save the cell by using the `updateCell` method only and we do not have any other equivalent function for this.  

 

In EJ2 Grid we can also update the data using the `setRowData` method with which you can update the entire row, but this will not highlight the Cell. So, we suggest you to use the `updateCell` method for saving a particular cell.  

  

To determine the unsaved changes in batch editing mode you can use the ‘getBatchChanges’ method which returns an object that includes arrays of addedRecords, changedRecords and deletedRecords. If there is no unsaved changes this method returns empty arrays.  

  

Kindly revert us for more queries. 

  

Regards, 

Joseph I. 

[Andrew]

  

To determine the unsaved changes in batch editing mode you can use the ‘getBatchChanges’ method which returns an object that includes arrays of addedRecords, changedRecords and deletedRecords. If there is no unsaved changes this method returns empty arrays.  

  

Hi Joseph,

I've tried using the 'getBatchChanges' method but it wasn't exactly what I need. So I'll give some further details on what I would like to achieve:

I have a command column that contains some custom actions for manipulating the data in the selected row.

I would like to be able to use a keyboard 'shortcut' as an alternative way of initiating these custom actions.

I'm using batch editing mode, and the 'keyPressed' callback to log the keys that are pressed. If one of my 'shortcut' keys is pressed then I will perform the desired action.

Of course, the 'shortcut' should be ignored if the user is typing their edits into a cell. 'getBatchChanges' only contains the edit after 'enter' has been pressed. Is this possible?

Thanks,

Andrew

[Joseph Christ Nithin Issack]

Hi Andrew, 

  

Thanks for you update. 

  

Based on your requirement you need to perform some actions in the selected row using command column.  

 

By default, in EJ2 Grid the batch editing mode works based on cell editing, so it is not possible perform edit action in the grid from the selected row. If you need to perform edit operation with batch editing, then we need to select the cell.  

 

 Query : I'm using batch editing mode, and the 'keyPressed' callback to log the keys that are pressed. If one of my 'shortcut' keys is pressed then I will perform the desired action. 

Of course, the 'shortcut' should be ignored if the user is typing their edits into a cell. 'getBatchChanges' only contains the edit after 'enter' has been pressed. Is this possible? 

 

Based on your requirement we suspect that you need to focus out the editing when press the shortcut keys. By default, in EJ2 Grid when we press the enter key it will focus out from the editing and pushed to 'getBatchChanges'. 

 

Please share the below details which will help us to provide the proper solution. 

 

1. Share the code example of action that you need to perform in the command column? 

 

2. Share the video demonstration of your requirement. 

   

Regards, 

Joseph I 

[Andrew]

Hi Joseph,

Is it more clear with this explanation:

I have one cell selected. If I press the key 'a' then I want to call 'functionA'

If I press they key 'b' then I want to call 'functionB' 

If the cell is currently being edited, then when I press 'a' it should type 'a' into the cell, and the call to 'functionA' should be ignored.

Here is the code I'm using to detect which key is pressed. Works fine when the cell is selected, the trouble is that functionA is still called when the cell is being edited

function keyPressed(args: any) {

if(args.key === 'a') {

functionA()

} else if(args.key === 'b') {

functionB()

}

<GridComponent

keyPressed={keyPressed}

allowKeyboard={true} ...

[Joseph Christ Nithin Issack]

Hi Andrew, 

  

Thanks for your update. 

  

Based on your query, your need to perform some action when you press key ‘a’ and key ‘b’, but when you select a cell and start editing you want to type the letter but ignore the action.  

 

Your requirement can be achieved by using the ‘isEdit’ property of the grid which is set true when the grid is on edit mode. 

  

Please refer the below code snippet. 

  

export class BatchEdit extends SampleBase { 

  constructor() { 

    super(...arguments); 

    this.toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel']; 

    this.editSettings = { 

      allowEditing: true, 

      allowAdding: true, 

      allowDeleting: true, 

      mode: 'Batch' 

    }; 

    this.editparams = { params: { popupHeight: '300px' } }; 

    this.validationRule = { required: true }; 

    this.orderidRules = { required: true, number: true }; 

    this.pageSettings = { pageCount: 5 }; 

    this.handleKeyDown = this.handleKeyDown.bind(this); 

    this.functionA = this.functionA.bind(this); 

    this.functionB = this.functionB.bind(this); 

  } 

  functionA() { 

    console.log('Function A Called'); 

  } 

  functionB() { 

    console.log('Function B Called'); 

  } 

  

  handleKeyDown(args) { 

    if (!this.gridInstance.isEdit) { 

      if (args.key == 'a') { 

        this.functionA(); 

      } else if (args.key == 'b') { 

        this.functionB(); 

      } 

    } 

  } 

  render() { 

    return ( 

      <div className= "control-pane" onKeyPress = { this.handleKeyDown } > 

        <div className="control-section" > 

          <div className="col-md-9" > 

            <GridComponent 

              ref={ grid => (this.gridInstance = grid) } 

    dataSource = { data } 

    pageSettings = { this.pageSettings } 

    toolbar = { this.toolbarOptions } 

    allowPaging = { true} 

    editSettings = { this.editSettings } 

      > 

      <ColumnsDirective> 

      <ColumnDirective 

                  field="OrderID" 

    headerText = "Order ID" 

    width = "120" 

    textAlign = "Right" 

    validationRules = { this.orderidRules } 

    isPrimaryKey = { true} 

      /> 

      <ColumnDirective 

                  field="CustomerName" 

    headerText = "Customer Name" 

    width = "150" 

    validationRules = { this.validationRule } 

      /> 

      <ColumnDirective 

                  field="Freight" 

    headerText = "Freight" 

    width = "120" 

    format = "C2" 

    textAlign = "Right" 

    editType = "numericedit" 

      /> 

      <ColumnDirective 

                  field="OrderDate" 

    headerText = "Order Date" 

    editType = "datepickeredit" 

    format = "yMd" 

    width = "170" 

      /> 

      <ColumnDirective 

                  field="ShipCountry" 

    headerText = "Ship Country" 

    width = "150" 

    editType = "dropdownedit" 

    edit = { this.editparams } 

      /> 

      </ColumnsDirective> 

      < Inject services = { [Page, Toolbar, Edit]} /> 

        </GridComponent> 

        < /div> 

        < /div> 

        < /div> 

    ); 

  } 

} 

  

render(<BatchEdit />, document.getElementById('sample')); 

  

  

  

Sample: https://stackblitz.com/edit/react-xkrvhh?file=index.js 

  

Please get back to us if you need further assistance with this.  

  

  

Regards, 

Joseph I. 

[Andrew]

Perfect, that's exactly what I needed thanks!

[Thiyagu Subramani]

Hi Andrew, 

Thanks for your update. 

We are happy to hear that the provided solution works at your end. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S