Grid scrolls at entering inline edit mode

[Stephan Schrade]

Hi support,

if the user clicks a cell to edit the content, the grid always scrolls to the first editable field.

This is unexpected and causes confusion to the user.

Over the years there have been several different suggestions to overcome this.

But I could not manage anyone to work.

My grid has frozen columns and dropdown edit fields and checkbox edit fields.

The newest I found was this here

https://www.syncfusion.com/forums/152385/set-focus-to-specific-cell-in-normal-edit-grid-mode

But his still does not work.

My code is this

function onDoubleClick(args) {

let rowInfo = gridParticipants.getRowInfo(args.target);

console.log(rowInfo.column['field']);

this.setFocus = rowInfo.column['field'];

}

Inside complete Action

if (args.requestType === 'beginEdit') {

console.log(this.setFocus);

setTimeout(function(a, focusField) {

a.form.elements.namedItem(focusField).focus();

}, 1500, args, this.setFocus);

}

It does also not work, when I call the focus without timeout.

I do get the correct field name at double click, but the focus is not set.

How can I do this?

Or is there a new switch to prevent the grid from scrolling? This would be the best solution.

Regards,

Stephan

[Aishwarya Rameshbabu]

Hi Stephan Schrade,

 

Greetings from Syncfusion support.

We understand that you would like to prevent the Grid from automatically scrolling to the first editable cell when entering inline edit mode and instead keep the focus on the cell that was double‑clicked. By default, the Syncfusion Grid sets focus on the first editable cell of the row when editing begins.

In your implementation, you are capturing the field name on double‑click and then attempting to set focus using 'form.elements.namedItem'. While the field name is logged correctly, the focus is not applied. We tested your method by modifying the condition to verify the returned collection of elements, which worked without setTimeout in some cases only. 

For a consistent solution across all editor types, we suggest using querySelector with the editor’s id attribute.

To achieve the desired behavior, you can capture the column in the recordDoubleClick event and then explicitly set focus to the editor element inside actionComplete using querySelector with the id value.

Please refer to the updated code example, sample and video demonstration for more information.

Index.js 

 

let setFocus;

var grid = new ej.grids.Grid({

    ....................................

    actionComplete: function (e) {

        if (e.requestType === 'beginEdit') {

            // To select the current edited cell from the edit form

            e.form.querySelector('#' + this.element.id + setFocus.field).focus();

        }

    },

    recordDoubleClick: function (args) { 

        // To capture the current edited cell

        setFocus = args.column;

    },

    ....................................

});

grid.appendTo('#Grid');

Sample: https://stackblitz.com/edit/h7qktdnw-dk1gc2mw?file=index.js,index.html

Video Demonstration: Please find in the attachment. 

API References: actioncomplete, recorddoubleclick

If you need any other assistance or have additional questions, please feel free to reach out to us.

Regards,

Aishwarya R

Attachment: 197813Video_d5da2f9f.zip

[Stephan Schrade]

Hi Aishwarya,

many thanks!

Works like a charm!

Regards,

Stephan

[Aishwarya Rameshbabu]

Hi Stephan Schrade,

 

You are most welcome. Please get back to us if you need any other assistance.

 

Regards,

Aishwarya R