How to update the row while deselecting by using keyboard down arrow in React Grid

[Charles]

Hi,

I have an application which uses the React Grid component to display a list of emails (using an ODataV4Adaptor and server endpoint). Each email record has a flag to say whether it has been read. I want the record to be updated to show it has been read when the selection moves away from that record, so I am setting an event handler for the rowDeselected event that uses grid.updateRow to set the 'read' flag to true. This works fine as long as I am using the mouse to click away from the current record - the record gets updated on the server, and the grid refreshes to show the now 'read' status on the email I just moved away from - but the selection stays on the record I just clicked to.

However, if I use the arrow keys instead of the cursor to move to another record the selection jumps after the refresh to the last row I clicked on, not the last row I just selected using the arrow keys. 

I have tried every possible way to get the focus to return to the row I just selected with the arrow keys, but can't get it to work properly.

Why is there a difference between selecting a row with the mouse and using the keyboard, and how can I get it to remember the row I selected using the keyboard as if I had clicked on it with the mouse?

Sample code...

const rowDeselected = (e) =>

{

    const gridElement = document.getElementById('_mailBox');

    const grid = gridElement?.ej2_instances[0];

    if (grid && e.data[0]?.read === false) 

    {

        var newRecord = {...e.data[0], read: true }

        grid.updateRow(e.rowIndex[0], newRecord);

    }

}

....

export const MailBox = () =>

{

    const data = new DataManager({

        url: 'http://server:5001/odata/email',

        adaptor: new ODataV4Adaptor(),

    });

    const pageOptions = {pageSize: 50};

    const editOptions = { allowDeleting: true };

    const toolbarOptions = ['Delete'];

    return(

            <GridComponent id="_mailBox" className="grid" dataSource={data} height="100%" width="100%" allowSorting allowPaging 

               editSettings={editOptions} allowSelection allowResizing allowReordering pageSettings={pageOptions} toolbar={toolbarOptions} 

               enablePersistence={true} rowDeselected={rowDeselected} >

                <ColumnsDirective>

                    <ColumnDirective headerText="Id" field='messageId' isPrimaryKey={true} visible={false}  />

                    <ColumnDirective headerText="From" field='from' width='100'/>

                    <ColumnDirective headerText="To" field='to' width='100'/>

                    <ColumnDirective headerText="Sent" field='sent' width='80' format="ccc dd/MM/yyyy  HH:mm"/>

                    <ColumnDirective headerText="Subject" field='subject' width='100'/>

                </ColumnsDirective>

                <Inject services={[Edit, Page, Sort, Filter, Resize, Reorder, Toolbar]} />

            </GridComponent>

    );    

}

[Rajapandi Ravi]

Hi Charles, 

Greetings From syncfusion support 

From validating your query we understand you want to update the row while deselecting by using keyboard down arrow. By default when you call UpdateRow method the grid will refresh while updating the row. So the selection was not maintained. For your mouse click, the selection was maintained because you are manually click the row so it will select the Row. In keyboard down arrow pressing , while updating the record the grid will refresh so the selection was not maintained and here there is no event gets triggered to select the row. In this below sample,  we have achieved your requirement by using rowDeselcted and actionComplete event of grid and we have select the row manually while pressing down arrow.  Please refer the below code example and sample for more information. 

export class Selectioning extends SampleBase { 

  toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

  editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 

  index = 0;     //index 

  flag = true; 

  isUpdated = true;       //flag variable 

  selectedIndex = 0; 

  rowDeselected(args) { 

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

     if (grid && args.data[0].Read === false)  

    { 

        this.index = args.rowIndex[0]; 

        var newRecord = {...args.data[0], Read: true } 

        this.flag = true; 

        var selrow = this.index + 1 

         

        if (this.isUpdated) { 

          this.isUpdated = false; 

          grid.selectRow(selrow); 

          grid.updateRow(args.rowIndex[0], newRecord); 

        } 

         

    } 

  } 

  actionComplete(args) { 

    if(args.requestType === "refresh") { 

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

      grid.selectRow(this.index);         //select the row based on the index 

      this.isUpdated = true; 

    } 

  } 

    render() { 

        return (<div className='control-pane'> 

                <div className='control-section'> 

                    <GridComponent dataSource={this.datas} toolbar={this.toolbarOptions} editSettings={this.editSettings} rowDeselected={this.rowDeselected.bind(this)}  actionComplete={this.actionComplete.bind(this)} allowPaging={true} selectionSettings={this.settings} pageSettings={{ pageCount: 5 }} selectionSettings={{ type: 'Multiple' }}> 

                        <ColumnsDirective> 

                           .  .  .  .  .  .  . 

                           .  .  .  .  .  .  .                         

                       </ColumnsDirective> 

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

                    </GridComponent> 

                </div> 

            </div>); 

    } 

} 

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

Regards,
Rajapandi R