How to set focus for specyfic cell in new added row via Add button (batch edit).

Question

Hi,I have defined basic Grid with few columns using edit mode: 'Batch'.If I use 'Add' button to add new row into Grid it works fine and focus is automatically set for first column (for primary key I think?):https://ej2.syncfusion.com/react/demos/#/material3/grid/batch In my case first column is LineNo and I updated it automatically for next number or 1.00 value for first grid row (in beforeBatchAdd). Also this first column is canceled to edit - so user cannot edit it (using cellEditSettings and set cancel = true for LineNo column).At the end if I create new row (using standard Add button), new row has been created but without visible any focus/active cell. Is it possible to set automatically focus for second column (in my case) for new added row, without any additional clicking or using key buttons?

Hemanthkumar S · Accepted Answer

Hi Karol Statek,Query: if you click 'Add' toolbar button - new line will
be added but because of locking first column cursor is not visible. I would
like to automaticaly jump cursor/active cell into the second column which is
editable. Is it possible?From the information you've shared, we understand that
editing of a primary column for the added batch row was canceled by setting args.cancel
as true inside the cellEdit event of the Grid and you want to
shift focus from the primary column to the next editable column when attempting
to add a new batch row.To achieve this we have prepared a sample-level solution in
which, we recommend implementing a flag within the beforeBatchAdd event
of the Grid. This event triggers before records are added in batch mode. By
using this flag, we can determine a new batch row has been added to the Grid
within the cellEdit event of the Grid and follow by recommending using
the editCell method of the Grid to edit the next column. This method
requires the row index and column field as parameters.For more information, please refer to the below code
example, documentation, video, and sample.

[index.js]
   
    let batchAddFocus = false;
   
    const cellEditSettings = (args) => {
      if (args.columnName === 'OrderID') {
        args.cancel = true;
        if (batchAddFocus) {
          batchAddFocus = false;
          setTimeout(() => {
            const rowIndex = args.cell.parentElement.rowIndex;
            const column = gridInstance.getColumnByIndex(
              parseInt(
                args.cell.nextElementSibling.getAttribute('data-colindex'),
                10
              )
            );
            gridInstance.editCell(rowIndex, column.field);
          }, 0);
        }
      }
    };
    const beforeBatchAdd = (args) => {
      batchAddFocus = true;
    };
   
            <GridComponent
              ref={(grid) => (gridInstance = grid)}
              dataSource={data}
              pageSettings={pageSettings}
              toolbar={toolbarOptions}
              allowPaging={true}
              editSettings={editSettings}
              cellEdit={cellEditSettings}
              beforeBatchAdd={beforeBatchAdd}
            >

beforeBatchAdd API: https://ej2.syncfusion.com/documentation/api/grid/#beforebatchaddeditCell API: https://ej2.syncfusion.com/documentation/api/grid/#editcellSample: https://stackblitz.com/edit/react-jsqxzr-rb2oqj?file=index.jsPlease feel free to contact us if you require any further
assistance. We are always available and eager to help you in any way we can.Regards,Hemanth Kumar SAttachment: video_7d275e0.zip

Hemanthkumar S · Answer

Hi Karol Statek,Greetings from Syncfusion support.Before we proceed with providing a solution, we need some
information to better understand your query. Please provide us with the
following details:
 Are
     you using the column template feature in the Grid?
 Share
     the complete code for rendering the Grid.
 Provide
     the version of the Syncfusion package that you are using.
 Sharing
     a video demonstration would greatly assist us in better understanding your
     query. It would allow us to visualize the problem and provide more precise
     guidance or suggestions.
 If
     possible share the sample that showcases your query. Having a sample will
     enable us to directly analyze and validate your query, which can lead to a
     faster resolution.
We appreciate your cooperation in providing us with the
requested information, as it will help us provide a more effective solution to
your query.Regards,Hemanth Kumar S

Karol Statek · Answer

Hi,please check below code of your grid demo (the issue is the same).If you click on toolbar button 'Add', new line will apear in grid and cursor will automatically jump into column 'Order ID' - that's ok and that is clear. In my case I have added additional code for grid and disable for editing column 'OrderID' (I create it automatically inside code).   In this case if you click 'Add' toolbar button - new line will be added but because of locking first column cursor is not visible. I would like to automaticaly jump cursor/active cell into the second column which is editable. Is it possible? https://stackblitz.com/edit/react-jsqxzr?file=index.js