Virtual grid scrollbar problem

Posted by: hubert on 4 March 2018, 11:08 pm EST

    • Post Options:
    • Link

    Posted 4 March 2018, 11:08 pm EST

    I’m on the way of evaluating wijmo for my company

    On demo project (Angular2 version):

    http://demos.wijmo.com/5/Angular2/VirtualData/VirtualData/

    I see when user scrolls down, the slider in scrollbar goes to uppermost position then returns back to user position.

    When user scrolls down, and just stop scrolling scrollbar goes to uppermost position and doesn’t return anymore.

    Scrollbar going back to uppermost position for both cases is not expected and is unacceptable. Is there any way to eliminate this?

  • Posted 5 March 2018, 8:19 pm EST

    Hi,

    Please go through fiddle

    http://jsfiddle.net/797tjc5u/

    I have used the scrollPositionChanged event to track the Scroll and reset it after a load.

  • Posted 6 March 2018, 2:11 am EST

    Abhishek,

    I already use this approach - the scrollbar is blinking - your example is not reflecting my problem:

    take look on my code. It remembers position right before vcv.setWindow and then reverts it immediately. But the same result is without using it:

     initODataVirtualCollectionView (s: wjcGrid.FlexGrid) {
            // declare virtual collection view
            let vcv = new wjcOData.ODataVirtualCollectionView(
                "http://services.odata.org/V4/Northwind/Northwind.svc", 
                "Order_Details_Extendeds", {
                oDataVersion: 4
            });
            // use virtual collection as grid data source
            let flex = s;
            flex.itemsSource = vcv;
            // update data window when the grid scrolls
            flex.scrollPositionChanged.addHandler(function () {
                let rng = flex.viewRange;
                let pos = flex.scrollPosition;
                console.log('1-',pos, flex.scrollPosition);
                vcv.setWindow(rng.row, rng.row2);
                console.log('2-',pos, flex.scrollPosition);
                flex.scrollPosition = Object.assign({}, pos);
                console.log('3-',pos, flex.scrollPosition);
            });
            // show row indices in row header cells
            flex.formatItem.addHandler((_s, e: any) => {
                if (e.panel.cellType === wjcGrid.CellType.RowHeader) {
                    e.cell.textContent = e.row;
                }
            })
            // add a filter
            let filter = new wjcGridFilter.FlexGridFilter(flex);
        }
    

    This is probable specific to angular2. Please see included video and note thescrollbar changing its position right after data is loaded

  • Posted 6 March 2018, 4:44 am EST

    I don’t think the video came through. Could you please attach it again

  • Posted 6 March 2018, 4:50 pm EST

    Hi,In your code are saving and restoring the scroll positions at the same place.So new value is overwriting the saved once.

    What we can do is save the scroll position outside the scrollPositionChanged handler and restore it in scollPositionChanged handler if there is some saved value for scroll positions.

    please refer to following plunk which implements infinite scrolling in ODataCollectionView

    http://plnkr.co/edit/VHcABkDcb0rvEPGE9CnP?p=preview

  • Posted 19 March 2018, 4:44 am EST

    Solution you are suggesting works in the same way as mine. I still see blinking scrollbar. Run your solution, and hold right mouse button while still moving scrollbar down. Maintain this state for 10-20 sec. You will notice the scroll indicator will go up then will return to expected position as long as data is loaded. This is unaccteptable and moreover aggrid is not experiencing any problems with it. record.zip

    BTW: Your examples are using lots of illegal declarations from Angular2 perspective: extensive usage of type, using plain javascript callback functions etc. Is it really the way it should be used in Angular?

  • Posted 19 March 2018, 9:14 pm EST

    Hi,

    We have looked into the problem and here is a solution which implements the virtualization of data.

    http://plnkr.co/edit/jH85YafTb01czKXiXw4z?p=preview

    I have made some changes as per Angular Specs but some of the Event Handlers do required call backs . They have been left as is.

    Please refer to it and let us know if the problem still persists for you.

  • Posted 19 March 2018, 10:01 pm EST

    Thank you for your advice. It looks way better now but… I’ve noticed on network monitor the virtualview is sending few requests request for OData if user scrolls bar for larger period of time. In my opinion virtualview should cancel requestsif any new request is sent. Such approach allows to eliminate unnecessary “loaded” events, which are causing quick but still visible blinks. Try to play with moving scrollbar and you will see it. Are you able to change component behavior in upcoming versions?

  • Posted 20 March 2018, 9:17 pm EST

    Hi,

    Your observation is correct that the ODataVirtualCollectionView doesn’t cancel the previous xhr requests.

    It might seem pointless at first but it is included in design to provide the best user experience.

    Consider following cases:-

    ->If the network is slow then cancelling previous requests might not provide a good user experience since he/she would have to wait for the response to arrive before scrolling further otherwise the request would get cancel.

    ->What if someone is scrolling slowly looking for some data then he/she won’t have to wait for data as much as he/she would have to in case the previous requests are cancelled.

    Our team is constantly working to improve the performance and in future this would be handled in a better way too. I have forwarded your concerns to the dev team.

  • Posted 20 March 2018, 11:30 pm EST

    Disagree with your points:

    1. If users scrolls slowly and response arrives slowly you should: cancel any earlier request to minimize slow responses as any accumulated request slows down the server. As you mentioned if user scrolls slowly he still sees the previously loaded data (you can load more rows than visible number)
    2. Accumulating more than 6-8 requests waiting for response will prevent browser from sending another requests.

    The last example you give me is not working properly because it is not differentiating between latest ‘loaded’ and ‘loaded’ being the response for previous requests.

    Honestly speaking such lazy/virtual scroll is basic feature that should work perfectly in any serious library. I’m a little bit confused about wijmo implementation.

  • Posted 21 March 2018, 11:11 pm EST

    Hi,

    We have created an enhancement for this with id 315006. We will update you as we get any update on this.

    ~Manish

  • Posted 12 June 2018, 4:14 am EST

    Hello all

    For the record, the pending request issue was fixed in version 5.20173.430 (released in March 2018).

    Since then, requests for virtual data automatically cancel any pending requests.

    Thank you all very much for the suggestion/request/discussion.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels