Syncfusion Grid scroll up breaks after scrolling the browser

[Paul Simm]

We are using the Syncfusion Grid with Filtering in our web application (.net, javascript) and if the browser page is scrolled, the Up Arrow in the Syncfusion Grid starts scrolling down. If the browser is never scrolled the grid works as expected.

The browser we are using is Chrome.

HELP!

[Rajapandiyan Settu]

Hi Paul,

Thanks for contacting Syncfusion support.

We are unable to understand the reported problem from our side. By default, pressing the arrow up and down keys will scroll the browser scrollbar. After focusing on the Grid content, pressing the arrow up and down keys will navigate the rows of the content. This is the behavior of EJ2 Grid.

Sample: https://stackblitz.com/edit/xgg75x?file=index.js

Kindly share the below details to validate this further.

1. Share the video demo of the reported problem.
2. Share the complete Grid code and script version.
3. Share the replication procedure of this behavior.

Regards,

Rajapandiyan S

[Kavya]

Hi Team,

Scenario 1 : I won't touch the scroll of the browse - syncfusion scrolls works fine

I have zoomed in my browser , so that both the grids appear on the screen and I don't have to use my browser scroll to view my 2nd grid. In this case my syncfusion scrolls work fine.

Scenario 2 : I use my browser scroll - syncfusion scroll up breaks

I have set my zoom size more than 70%, now if I have to see my 2nd grid I have to use my browser scroll to move down to 2nd grid. This time, scroll up arrow is not functioning properly. Every time I click on the scroll up arrow, the syncfusion scroll moves down instead of moving up.

Details on the technology used:

Knockout with JS. We are using JS1

Syncfusion Version: 16.4.0.54

JS Code: This is the code i'm using to bind my grids

function bindGrid() { // binds with syncfusion-grid when called

        var fields = getGridFields();

        var tableId = "#" + self.config().tableId;

        if ($(tableId).find('tr').length > 0) {

            $(tableId).ejGrid('destroy');

        }

        $(tableId).ejGrid({

            dataSource: ko.toJS(self.config().data()),

            allowPaging: false,

            allowSorting: true,

            allowFiltering: true,

            allowTextWrap: true,

            allowScrolling: true,

            scrollSettings: { width: self.config().width, height: self.config().height },

            textWrapSettings: { wrapMode: "both" },

            allowResizeToFit: true,

            filterSettings: { filterType: "excel" },

            columns: fields,

            rowSelected: gridSelect,

            rowDeselected: gridSelect,

            rowDataBound: setRowProperties,

            gridLines: ej.Grid.GridLines.Horizontal,

        });

        $(tableId).ejGrid("refreshContent", true);

    }

Please let me know if any other information is need

[Pon Selva Jeganathan]

Hi Kavya,

Query: if I have to see my 2nd grid I have to use my browser scroll to move down to 2nd grid. This time, scroll up arrow is not functioning properly. Every time I click on the scroll up arrow, the syncfusion scroll moves down instead of moving up.

We have checked your reported problem by preparing a sample, we are able to replicate the problem(Scrolling is not working properly when using browser scroll), at our end using the 16.4.0.54 package version. This issue fixed in the latest version. So, we suggest you upgrade to the latest version 20.3.60 or minimum of 17.2.28 version.

Please refer to the below video demo:

After using latest version,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Scroll358392578

Please refer to the below sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/gridscroll852148250

After upgrading the version, if you are facing any issues, kindly share the issue replicated steps to reproduce the sample.

Regards,

Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly

[Kavya]

Hi  Pon Selva Jeganathan,

Thank you so much for answering. I'll check and update you if this is working.

[Kavya]

We also sometimes get the below scroll error on the console. This error occurs when we keep performing actions on the grid. Is this also related to the version? If not please let us know how this can be fixed.

[Pon Selva Jeganathan]

Hi Kavya,

Query: Script error thrown while scrolling

We have checked your reported problem by preparing a sample, we are unable to replicate this issue at our end.

Please refer to the below sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/gridscroll852148250

We need some more additional details to check this issue, please share the below details,

1. Complete grid code example
2. Complete stacktrace details
3. Replication steps and video demo of the issue.
4. Package version details. (whether you are using the 17.2.28 or 20.3.60)
5. If possible, try to reproduce the reported issue in the provided sample or share the reproducible sample.

The requested information will be helpful to proceed further.

[Kavya]

Hi Selva,

This bug is not frequent. 

Replication Steps:

Our QA is continuously adding, deleting and updating the records in the grid and this error occurs on the console.

Details on the technology used:

Knockout with JS. We are using JS1

Syncfusion Version: 16.4.0.54

JS Code: This is the code i'm using to bind my grids

function bindGrid() { // binds with syncfusion-grid when called

        var fields = getGridFields();

        var tableId = "#" + self.config().tableId;

        if ($(tableId).find('tr').length > 0) {

            $(tableId).ejGrid('destroy');

        }

        $(tableId).ejGrid({

            dataSource: ko.toJS(self.config().data()),

            allowPaging: false,

            allowSorting: true,

            allowFiltering: true,

            allowTextWrap: true,

            allowScrolling: true,

            scrollSettings: { width: self.config().width, height: self.config().height },

            textWrapSettings: { wrapMode: "both" },

            allowResizeToFit: true,

            filterSettings: { filterType: "excel" },

            columns: fields,

            rowSelected: gridSelect,

            rowDeselected: gridSelect,

            rowDataBound: setRowProperties,

            gridLines: ej.Grid.GridLines.Horizontal,

        });

        $(tableId).ejGrid("refreshContent", true);

    }

Thank you in advance!!

[Pon Selva Jeganathan]

Hi Kavya,

Query: if I have to see my 2nd grid I have to use my browser scroll to move down to 2nd grid. This time, scroll up arrow is not functioning properly. Every time I click on the scroll up arrow, the syncfusion scroll moves down instead of moving up.

We have fixed this issue in the latest version. We recommend that you upgrade to version 20.3.60 or a minimum of version 17.2.28.

Query: Our QA is continuously adding, deleting and updating the records in the grid and this error occurs on the console.

We checked your query by preparing a sample based on your code snippet and shared version, but we were unable to reproduce the problem.

Please refer to the below sample:

https://jsplayground.syncfusion.com/e2lkpjga

If you're still experiencing issues, please provide us with the following information:

1. Confirm if the issue occurs after performing a scrolling or CRUD operation.
2. A detailed explanation of the issue.
3. A video demonstration of the issue.
4. The full stacktrace details.
5. If possible, please try to reproduce the issue with the provided sample or share a reproducible sample of your own.

This information will be helpful in moving forward with the issue.

[Kavya]

The issue is occurs when we do crud operations (we are not using crud operation code of syncfusion) , even on the load sometimes

Details on the technology used:

Knockout with JS. We are using JS1

Syncfusion Version: 16.4.0.54

JS Code: This is the code i'm using to bind my grids

function bindGrid() { // binds with syncfusion-grid when called

        var fields = getGridFields();

        var tableId = "#" + self.config().tableId;

        if ($(tableId).find('tr').length > 0) {

            $(tableId).ejGrid('destroy');

        }

        $(tableId).ejGrid({

            dataSource: ko.toJS(self.config().data()),

            allowPaging: false,

            allowSorting: true,

            allowFiltering: true,

            allowTextWrap: true,

            allowScrolling: true,

            scrollSettings: { width: self.config().width, height: self.config().height },

            textWrapSettings: { wrapMode: "both" },

            allowResizeToFit: true,

            filterSettings: { filterType: "excel" },

            columns: fields,

            rowSelected: gridSelect,

            rowDeselected: gridSelect,

            rowDataBound: setRowProperties,

            gridLines: ej.Grid.GridLines.Horizontal,

        });

        $(tableId).ejGrid("refreshContent", true);

    }

[Pon Selva Jeganathan]

Hi Kavya,

We have created a new ticket under your account. Please follow that for further updates.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.