Two grids with synchronized scrollbars

[Marco Giorgi]

I'm trying to find an event in the grid that allows me to synchronize the scroll, both horizontal and vertical, and both by moving the scrollbars or the mouse wheel, of two grids.

Here is the playground where I'm working on:

http://jsplayground.syncfusion.com/ykknsy5r

The grids must have frozen rows and columns as in the playground.

Many thanks for the support.

Best Regards,

Marco

[Farveen Sulthana Thameeztheen Basha]

Hi Marco, 

Thanks for contacting Syncfusion Support 

We have checked your query and we have achieved your requirement “ Need to trigger events by moving the scrollbar or the mousewheel” using dataBound event of the Grid. In the dataBound event of the Grid, we have get the scroll Object and bind the scroller events such as thumbStart, thumbEnd, wheelMove  for the scroller.  

Please refer to the code example:- 

<script type="text/javascript"> 

    $(function () { 

        $("#Grid1").ejGrid({ 

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

            dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(30)), 

            commonWidth: 200, 

            allowScrolling: true, 

            columns: [ 

                .  . 

 

            ], 

            dataBound: function (args) { 

                var scroll = this.getScrollObject(); 

                scroll.model.thumbStart = function thumbStart(args) { 

 

                } 

                scroll.model.thumbEnd = function thumbEnd(args) { 

 

                } 

                scroll.model.wheelMove = function wheelMove(args) { 

 

                } 

            }, 

        }); 

        

        }); 

 

     

</script> 

Sample link :- http://jsplayground.syncfusion.com/w4gbp5zw 

Refer to the API links:- 

https://help.syncfusion.com/api/js/ejgrid#events:databound 

https://help.syncfusion.com/api/js/ejscroller#events 

Regards, 

Farveen sulthana T 

[Marco Giorgi]

Dear Farveen,

I'm having issues  using the scroller synchronization

Referring to this playground: http://jsplayground.syncfusion.com/gwlojquz

where grid2 synch the scroll event to grid1.

1. I'm not able to find the value when I move the vertical scroll (horizontal has the sTop value, but none for the vertical).
   
2. If I click on the step button no events are raised, therefore the scroll is not synchronized.
   
3. The same as above if I click on the scrollbar on the left or right of the handle, no events are raised.
   

[Farveen Sulthana Thameeztheen Basha]

Hi Marco, 

Query #1 :-I'm not able to find the value when I move the vertical scroll (horizontal has the sTop value, but none for the vertical). 

 

We have forwarded the query to the corresponding team and update you the response on 15^th December 2017. 

 

Query #2 and #3 :-If I click on the step button no events are raised, therefore the scroll is not synchronized. 

The same as above if I click on the scrollbar on the left or right of the handle, no events are raised. 

If you want to trigger the events while clicking on step button as well as left and right click of the scrollbar, you can use scroll event of the ejScroller control. Please refer to the code example:- 

   <script type="text/javascript"> 

       $(function () { 

           $("#Grid1").ejGrid({ 

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

               dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(30)), 

                

               columns: [ 

                        { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, isFrozen: true, validationRules: { required: true, number: true }, textAlign: ej.TextAlign.Right, width: 90 }, 

                         

 

               ], 

               dataBound: function (args) { 

                   var scroll = this.getScrollObject(); 

                   scroll.model.scroll = function scroll(args){ 

                       alert('trigger'); 

                   } 

               }, 

           }); 

Please refer to the sample:- 

 

http://jsplayground.syncfusion.com/dyba0nv5 

 

Please get back to us if you need any further assistance. 

 

Regards, 

 

Farveen sulthana T 

[Marco Giorgi]

I've tried to use the scroll event of the ejscroller object but I get a strange behaviour on the grid while scrolling:

The frozen top row, the table header, doesn't scroll and lose alignment with table body.

Here is the playground that reproduces the issue (Grid2 control the scroll movement)

http://jsplayground.syncfusion.com/djz4nqvh

in order to see the issue, please move the horizontal scrollbar of the second grid, at the bottom, from left to right.

You will see that the top frozen row, the table header, of the Grid2, is not moving, to keep the alignment with the table body.

[Farveen Sulthana Thameeztheen Basha]

Hi Marco, 

Query # 1 :- The frozen top row, the table header, doesn't scroll and lose alignment with table body. 

 

We can able to reproduce your reported problem while binding the scroll event for the Grid. To overcome the problem, we have extended the scroll Event of the Grid as like given below and you can get the argument values while clicking the step button as well as moving the scrollbar to left and right. 

Please refer to the code example:- 

$("#Grid2").ejGrid({ 

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

         

        ], 

        dataBound: function (args) { 

            var scrollGrid1 = $("#Grid2").ejGrid("instance").getScrollObject(); 

            var scroll = this.getScrollObject(); 

            var scrollEvt = scroll.model.scroll; 

            scroll.model.scroll = function(e){ 

                console.log(e); 

                scrollEvt.apply(this,[e]); 

            } 

        }, 

Refer to the modified sample:- 

http://jsplayground.syncfusion.com/hwehxbwf 

Query #2 :- I'm not able to find the value when I move the vertical scroll (horizontal has the sTop value, but none for the vertical).  

 

 The parameter “sTop” is not suggesting way to find the scroll value. So, we suggest you to use args.model.scrollLeft to get the displacement of the Horizontal scrollbar. As like that please make use of args.model.scrollTop to get the displacement of Vertical Scrollbar.  

 

We have modified provided sample. Please get the sample from the below location.  

Sample Link: http://jsplayground.syncfusion.com/1sfh1vtx  

To know more about Scroller API’s, events and methods please refer the below API Documentation link.  

API Link: https://help.syncfusion.com/api/js/ejscroller#members:scrollleft  

 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Marco Giorgi]

Dear Farveen,

Thanks for the reply. Almost working, but there are still some issues that break the table while scrolling.

I've prepared this playground: http://jsplayground.syncfusion.com/jstl1owb

The two table are now connected on scrolling, so if you scroll on one (the master), also the other one (the slave) will scroll.

Horizontal scroll seems to work fine, but vertical scroll causes several issues:

1. The frozen row of the "slave" table is lost after the scroll
   
2. After some click on the scrollbar, it seems that the scroller doesn't respond anymore.
   

I'm trying to reach the same behaviour I've implemented here: http://dataviz.vam.wfp.org/public/SLPCalendarDemo (Select Afghanistan)

but using your grid component.

Many thanks.

Best Regards,

Marco

[Farveen Sulthana Thameeztheen Basha]

Hi Marco, 

We have checked the sample but we are unable to reproduce your reported problem at our end.  Please refer to the video link:- 

http://www.syncfusion.com/downloads/support/forum/133099/NEWFOL~2-1983713229.ZIP 

If you are facing any issues on vertical scrolling please share us the following details. 

1. Graphical Representation or  Video Demo to replicate your  issue. 

2. Elaborate your issue 

The provided information will be helpful to provide you response as early as possible. 

Regards, 

Farveen sulthana T 

[Marco Giorgi]

Hi Farveen,

Also in your video, you can see that the first row, the one just below the header, that should be frozen, disappear if you scroll down.

In the options of both grids is specified:

  scrollSettings: { width: 500, height: 330, frozenRows: 1 },

Please look at the attached screenshot for futher explanation.

Review your video, or look at this youtube video, and you will see that the grids are not behaving as expected.

The row containing the Ship City "Reims" should stay always on top.

More info to identify and fix quickly the bug:

1. Open your official demo page: http://js.syncfusion.com/demos/web/#!/bootstrap/grid/columns/frozenrowsandcolumns
   
2. Click on the Edit button in order to open the associated playground
   
3. Open the browser console
   
4. Type this command: var sc = $("#Grid").ejGrid("instance").getScrollObject();
   
5. Now let's scroll down the grid programmatically by typing: sc.scrollY(10);sc.scrollY(100);sc.scrollY(360); etc...
   
6. You will notice that the frozen row will disappear, and the grid scroll will not work as expected.
   

here is the video: https://youtu.be/uVmIC2YAj8Y

Best,

marco

Attachment: syncfusiongridbug_193a05d8.rar

[Marco Giorgi]

Hi Farveen,

Also in your video, you can see that the first row, the one just below the header, that should be frozen, disappear if you scroll down.

In the options of both grids is specified:

  scrollSettings: { width: 500, height: 330, frozenRows: 1 },

Please look at the attached screenshot for futher explanation.

Review your video, or look at this youtube video, and you will see that the grids are not behaving as expected.

The row containing the Ship City "Reims" should stay always on top.

More info to identify and fix quickly the bug:

1. Open your official demo page: http://js.syncfusion.com/demos/web/#!/bootstrap/grid/columns/frozenrowsandcolumns
   
2. Click on the Edit button in order to open the associated playground
   
3. Open the browser console
   
4. Type this command: var sc = $("#Grid").ejGrid("instance").getScrollObject();
   
5. Now let's scroll down the grid programmatically by typing: sc.scrollY(10);sc.scrollY(100);sc.scrollY(360); etc...
   
6. You will notice that the frozen row will disappear, and the grid scroll will not work as expected.
   

here is the video: https://youtu.be/uVmIC2YAj8Y

Best,

marco

Attachment: syncfusiongridbug_193a05d8.rar

Dears,

Do you have any news on the reported issue?

My customer and I are getting a little bit worried about the feasibility of the project with the Syncfusion ejGrid widget.

Many thanks

Best,

M

[Farveen Sulthana Thameeztheen Basha]

Hi Marco, 

We can reproduce your reported problem “Frozen rows get misplaced” while the scrolling the Grid through scrollY method. To overcome this problem we suggested you to use “disableAnimation” parameter of the scrollY method as “true” while scrolling the Grid through setModel method.  

Please refer to the code example:- 

<script type="text/javascript"> 

     var sc = $("#Grid").ejGrid("instance").getScrollObject(); 

      sc.scrollY(360,true) 

</script> 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T