We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Preventing scroll on inline grid editing

Thread ID:

Created:

Updated:

Platform:

Replies:

139069 Mar 23,2016 04:54 AM Aug 3,2018 03:33 AM JavaScript - EJ 2 9
loading
Tags: Grid
Omar Muscatello
Asked On March 23, 2016 04:54 AM

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
Replied On March 23, 2016 06:58 AM

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

Jayaprakash Kamaraj [Syncfusion]
Replied On March 24, 2016 04:41 AM

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
Replied On March 25, 2016 08:02 AM

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
Replied On March 25, 2016 08:03 AM

The attachment

Attachment: video_ece3ea44.zip

Jayaprakash Kamaraj [Syncfusion]
Replied On March 28, 2016 05:41 AM

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
Replied On March 29, 2016 02:21 AM

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 [Syncfusion]
Replied On March 30, 2016 08:30 AM

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.


Jacob
Replied On August 2, 2018 05:06 PM

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 [Syncfusion]
Replied On August 3, 2018 03:33 AM

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 
} 
 
    
                                 https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#actioncomplete   
 
Please get back to us for further assistance. 

Regards, 
Venkatesh Ayothiraman. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;