Preventing scroll on inline grid editing

[Omar Muscatello]

Hello Syncfusion Team,

I'm working with grid with MVC, but the problem is related to javascript.

I'm using the inline grid editing feature. The grid is scrollable in width and height.

When I scroll the grid horizontally and I try to edit a row, the focus is set on the first <input>, causing a scroll to the left. Instead, I want to start editing the grid respecting the horizontal scroll.

Inspecting with the browser, I found that the problem is in the _focusElements function of ej.grid.min.js. Commenting this function it works. However I have to comment it in all future versions of ejGrid.

How can solve this?

[Omar Muscatello]

It appens only on 13.4.0.63 version, while works correctly on 13.4.0.58

[Jayaprakash Kamaraj]

Hi Omar,

Thanks for contacting Syncfusion support.

In Grid , while editing the grid content it will be focus starting input element of the form. We have checked in 13.4.0.58 ,  in that version also we have the same behavior.  This is the default behavior of grid.

For your convenience, we have created a workaround solution. In this worked around we have achieved you requirement using actionComplete event. This event triggers every complete actions in grid. In this event we get the scrollobject left value using getScrollobject method and  get the corresponding input element  then we will set focus manually using  jQuery focus method. Please refer to the below code example, help documentation and sample.

$(function () {

            $("#Grid").ejGrid({

                // the datasource "window.gridData" is referred from jsondata.min.js

                dataSource: window.gridData,

                           allowScrolling: true,

                           scrollSettings: { width: 886, height: 300 },

                           actionComplete:"actioncomplete",

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

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

                columns: [

                        { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 },

                             { field: "CustomerID", headerText: "Customer ID", width: 100 },

                             { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 100 },

                             { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 90, format: "{0:C}" },

                             { field: "ShipCity", headerText: "Ship City", width: 110 },

                             { field: "ShipName", headerText: "Ship Name", width: 170 },

                             { field: "OrderDate", headerText: "Order Date", textAlign: ej.TextAlign.Right, format: "{0:MM/dd/yyyy}", width: 100 },

                             { field: "ShipCountry", headerText: "Ship Country", width: 110 },

                             { field: "ShipPostalCode", headerText: "Postal Code", textAlign: ej.TextAlign.Right, width: 140 },

                             { field: "Verified", headerText: "Verified", width: 100 }

                ]

            });

        });

function actioncomplete(args){

if(args.requestType == "beginedit")

var left = this.getScrollObject().model.scrollLeft;

var inputelement= this.element.find('form').find('input.e-field:visible')

               .filter(function() {

                           return $(this).offset().left> left;

                                   

               });

                        inputelement.eq(0).focus();

}

Help documentation for actionComplete: http://help.syncfusion.com/js/api/ejgrid#events:actioncomplete

Sample: http://jsplayground.syncfusion.com/bdaemare

Regards,

Jayaprakash K.

[Omar Muscatello]

Thank you Jayaprakash Kamaraj.

The given example is not what I want to achive. I'm sorry, I did not explain myself well.

I attached two videos.

"video2.mp4" shows what I want to achive while "video1.mp4" shows what currently happens.

[Omar Muscatello]

The attachment

Attachment: video_ece3ea44.zip

[Jayaprakash Kamaraj]

Hi Omar,

Thanks for the update.

We have analyzed your requirement with the attached video and need following clarifications before proceeding further.

1. Do you want not to move the Grid content left while editing?

2. Otherwise do you want to move both scrollbar and content to left while editing? 

Regards,

Jayaprakash K.

[Omar Muscatello]

Hi Omar,

Thanks for the update.

We have analyzed your requirement with the attached video and need following clarifications before proceeding further.

1. Do you want not to move the Grid content left while editing?

2. Otherwise do you want to move both scrollbar and content to left while editing? 

Regards,

Jayaprakash K.

Yes Jayaprakash Kamaraj, I don't want to move the Grid content left while editing.

[Jayaprakash Kamaraj]

Hi Omar,

Please follow the incident that has been created under your account to track the status of this requirement. Please log on to our support website to check further updates. 
https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents
 

Regards,

Jayaprakash K.

[Unknown]

Can you show us how to accomplish this with EJ2?  The API has changed enough that I can't figure it out.  

This "feature" of automatically scrolling left is quite annoying.  I'm not sure why anyone would want it to be enabled...

[Venkatesh Ayothi Raman]

Hi Omar, 

Thanks for using Syncfusion products. 

  

Query: I want to start editing the grid respecting the horizontal scroll 

 

We have analyzed your query and scrollbar of the grid can be changed dynamically. To achieve your requirement, we suggest you to use actionBegin event for initializing the initial scrollLeft value and actionComplete event to set the scrollLeft value back to the scrollbar of the grid. Please refer to the below sample and documentation for your reference. 

   

Code Example: 

 

[index.ts] 

... 

let grid: Grid = new Grid({ 

    dataSource: data, 

    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, 

        toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 

        columns: [ 

        { field: 'OrderID', headerText: 'OrderID', isPrimaryKey: true, width: 150 }, 

... 

        { field: 'ShipCountry', headerText: 'ShipCountry', width: 150 }  

         ], 

    height: 350, 

    actionBegin: actionbegin, 

    actionComplete : actioncomplete 

}); 

grid.appendTo('#Grid'); 

var scrollLeft; 

 

function actionbegin(args){ 

  var grid = document.getElementById('Grid').ej2_instances[0]; 

  scrollLeft = grid.getContent().querySelector('.e-content').scrollLeft;  //getting initial scrollbar value 

} 

 

function actioncomplete(args){ 

var grid = document.getElementById('Grid').ej2_instances[0]; 

grid.getContent().querySelector('.e-content').scrollLeft = scrollLeft; //setting the scrollbar value back 

} 

 

Sample: https://stackblitz.com/edit/9pw9ae-bxtern?file=index.ts  

    

Documentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#actionbegin 

                                 https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#actioncomplete   

 

Please get back to us for further assistance. 

Regards, 

Venkatesh Ayothiraman.