1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Grid Scrolls to Left when entering Inline Edit Mode

Grid Scrolls to Left when entering Inline Edit Mode

Hi,

I have a grid that is scrollable horizontally and vertically (it also has some frozen columns on the far left if that matters).  When I double click a row to go into edit mode, the grid scrolls far to the left, and I then have to scroll back to the right to find the cell that I wanted to work with.

Is there any way to disable the "auto scroll to left" feature?  I would like the scroll bar to keep its position when I enter edit mode.

Thanks.


8 Replies
VA Venkatesh Ayothi Raman Syncfusion Team August 6, 2018 07:10 AM UTC

Hi Jacob, 
 
 
Thanks for using Syncfusion products. 
 
We have analyzed your query and scrollbar of the grid can be changed dynamically. To achieve your requirement, we suggest you 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. 
<ejs-grid id="Grid" width="450" actionBegin="actionBegin" actionComplete="actionComplete" allowTextWrap="true" allowSorting="true" allowPaging="true" toolbar="@( new List<object>() { "Search"})"> 
    . .  . 
    <e-grid-pageSettings pageCount="2" pageSize="5"></e-grid-pageSettings> 
 
    <e-grid-columns> 
 
. .   . 
    </e-grid-columns> 
</ejs-grid> 
 
<script> 
 
    function actionBegin(args) { 
        var grid = this; //grid Instance 
        scrollLeft = grid.getContent().querySelector('.e-content').scrollLeft;  //getting initial scrollbar value 
    } 
 
    function actionComplete(args) { 
        var grid = this; //grid Instance 
        grid.getContent().querySelector('.e-content').scrollLeft = scrollLeft; //setting the scrollbar value back 
    } 
 
 
</script> 
 
 
                                 https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#actioncomplete   
 
 
We have also prepared a sample for your convenience which can be download from following link, 
 
 
Please get back to us for further assistance. 
 
 
Regards, 
Venkatesh Ayothiraman. 


UN Unknown August 6, 2018 02:38 PM UTC

Thanks for your input.  This works, but only if the grid does NOT have any frozen columns.  I have 5 frozen columns in my grid.  Freeze some columns and you will find that this does not work.

Additionally, I find that my grid will not render at all if I have only 1 or 2 frozen columns (3+ frozen columns and the grid renders fine).

One final point:  When I have frozen columns, only the first 10 columns of the grid can be sorted.  Any attempt to sort columns 11+ results in a javascript error:
     "Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined"

There appears to be some issues with frozen columns.  Please advise.

VA Venkatesh Ayothi Raman Syncfusion Team August 7, 2018 09:40 AM UTC

Hi Jacob, 

Thanks for the update. 
 
Query #1: Freeze some columns and you will find that this does not work 
 
We have analyzed your query and we are able to reproduce the issue at our end. To achieve your requirement, we are using a condition whether the grid has movable content(frozen columns) or not and based on that scrollbar value in initialized. Please refer to the below code example  for your reference. 
 
Code Example: 

[index.cshtml] 
<div> 
    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" actionBegin="actionBegin" frozenColumns="2" actionComplete="actionComplete" allowPaging="true" allowSorting="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Cancel", "Update"})"> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column> 
            <e-grid-column field="EmployeeID" headerText="Employee ID" format="C2" width="120"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer Name" minWidth="80" maxWidth="300"></e-grid-column> 
            <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column> 
            <e-grid-column field="OrderDate" headerText="Order Date" type="date" format='yMd' width="170"></e-grid-column> 
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="200"></e-grid-column> 
            <e-grid-column field="ShipName" headerText="ShipName" format="C2" width="120"></e-grid-column> 
            <e-grid-column field="Verified" headerText="Verified" format="C2" width="120"></e-grid-column> 
 
        </e-grid-columns> 
         
    </ejs-grid> 
</div> 
 
<script> 
    var scrollLeft; 
    function actionBegin(args) { 
        var grid = this; //grid Instance 
        if (grid.getContent().querySelector('.e-movablecontent')) { 
            scrollLeft = grid.getContent().querySelector('.e-movablecontent').scrollLeft;  //getting initial scrollbar value if movable content(frozen columns) available 
        } 
        else { 
            scrollLeft = grid.getContent().querySelector('.e-content').scrollLeft;  //getting initial scrollbar value without frozen columns 
        } 
    } 
 
    function actionComplete(args) { 
        var grid = this; //grid Instance 
        if (grid.getContent().querySelector('.e-movablecontent')) { 
            grid.getContent().querySelector('.e-movablecontent').scrollLeft = scrollLeft; //setting the scrollbar value back 
        } 
        else { 
            grid.getContent().querySelector('.e-content').scrollLeft = scrollLeft; //setting the scrollbar value back 
        } 
    } 
</script > 
 

Query #2: grid will not render at all if I have only 1 or 2 frozen columns 
 
We have analyzed your query and we are unable to reproduce the issue at our end. We have created a sample with two frozen columns for your reference, kindly refer to the below sample for more information. If we have misunderstood your query, please share the below mentioned information or details. 

1. Share the full Grid code example. 
2. Share the Essential JS2 version details. 
3. If possible, please reproduce the issue in the provided sample. 

Query #3: only the first 10 columns of the grid can be sorted 
 
We have analyzed your query and we are unable to reproduce the issue at our end. We went through the JavaScript error that you have shared with us and we suspect that the cause of this error is at the sample level. So please share the below-mentioned information or details, it will help us to provide a better solution as soon as possible. 

1. Share the full Grid code example. 
2. Share the Essential JS2 version details. 
3. If possible, please reproduce the issue in the provided sample. 

It would be helpful for us to find the problem and provide the better solution as earliest. 
 
We have prepared a sample based above queries which can be download from following link, 

Please get back to us for further assistance. 

Regards, 
Venkatesh Ayothiraman. 


UN Unknown August 7, 2018 03:37 PM UTC

Query #2: grid will not render at all if I have only 1 or 2 frozen columns 

I found the problem here.  I was using an initial sort for column #3, and the grid apparently did not like that I was sorting past the frozen columns.  Note, that the problem here might only exist when freezing via the column "isFrozen" attribute.  (See Query #3)


Query #3: only the first 10 columns of the grid can be sorted 

I found the problem here, too.  I was freezing the columns by setting "isFrozen=true" on the first 5 columns.   The grid behaves much differently than when freezing those same columns with "frozenColumns="5"" via a grid attribute.  The grid does not behave well when freezing columns via a column attribute.

VA Venkatesh Ayothi Raman Syncfusion Team August 9, 2018 07:19 AM UTC

Hi Jacob, 

Sorry for the inconvenience caused. 
 
 
We have analyzed your query and we are able to reproduce both of the issues at our end while we set the isFrozen property in columns. We have considered this “ Frozen and initial sorting misbehaves when we define the isFrozen in columns level” as a bug and logged the defect report.  The fix for this issue will be available in our upcoming patch release which will be rolled out on August 23rd , 2018. 

We appreciate your patience until then. 

Regards, 
Venkatesh Ayothiraman. 


VA Venkatesh Ayothi Raman Syncfusion Team August 24, 2018 10:07 AM UTC

 
Hi Jacob, 
 
 
We have created a new incident under your account to follow up with this “’Frozen and initial sorting misbehaves when we define the isFrozen in columns level” query. We suggest you follow up the incident for further updates using your direct trac account.  
   
 
 
Regards, 
Venkatesh Ayothiraman. 


MW mingwang wang March 8, 2023 10:25 PM UTC

I used Grid in ASP.NET Framework 4.8 JavaScript.


Grid has 2 Frozen columns. Scroll horizontally to far right end,  columns 3, 4, 5 will not show, this is correct.


Now scroll vertically, columns 3, 4, 5 will be shown. But horizontal scrollbar still at the far right end.


How to fix this auto scroll to left when  scroll vertically if has Frozen columns?


PS Pavithra Subramaniyam Syncfusion Team March 13, 2023 01:15 PM UTC

Hi Mingwang,


While scrolling vertically the horizonal scrollbar will not be reset which is the default behavior. To understand your requirement, please share some more details, which will be helpful for us to validate further.


  1. Share the full Grid code example.
  2. Share a video of the current behavior of the Grid scrolling.
  3. Share your requirement with on which action you want to reset the Grid horizontal scrollbar.


Regards,

Pavithra S


Loader.
Up arrow icon