Stop scrolling back to first column when start editing

[Jenson]

Hi there,

I noticed if I have too many columns and exceed the viewport width, a horizontal scroll bar is shown, and I double-click one of the last few columns to start editing.

 I intended to edit the cell I clicked right away, but the first editable cell of this row was focused and I had to scroll all the way back to the end to edit the cell I want.

Is there a workaround?

[Jenson]

uploaded a gif demonstration

Attachment: CPT21092409261904x361_55323457.7z

[Praveenkumar Gajendiran]

Hi Jenson, 

Thanks for contacting Syncfusion support. 

Based on your query, we understand that while editing, you want to focus the input element of the target cell(which is double clicked to start the edit). For this, we suggest you to use the recordDoubleClick event to get the target column field and then in the actionComplete event, get that target cell form element to focus using focus method as demonstrated in the below code example,

Code Example: 

recordDoubleClick(args){ 

      targetC= args.column.field; //target cell column field 

    }, 

    actionComplete: function (args) { 

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

         var id= "#"+this.$refs.grid.$attrs.id+ targetC; // use grid id and target cell column field to get that form input element. 

         args.form.querySelector(id).focus(); 

      } 

We have prepared a sample based on this for your reference. You can find it below, 

Sample: https://codesandbox.io/s/vue-template-forked-ej8ov?file=/src/App.vue

Please get back to us if you need further assistance.

Regards,
Praveenkumar G