Grid Scroll programatically not working

[ANDRE]

Hi,

I spent days about that without finding any solution. 

The case is simple :

I have a Grid using virtual scrolling and a "nav toolbar" with buttons : "First, Previous, Next, Last".

The nav toolbar purpose is to navigate through the records contained in the grid.  

Note that the grid itself is in a kendo TabStrip but at this point, I use the nav toolbar only when the grid is visible. Later, I'll need to resync the grid if the user use the toolbar when the tab ontaining the grid is hidden, but it's another story.

 

I tried several approaches, here is the last.

Working code for "First" button : In any case, I get the first record selected at the top of the grid 

first : function () {
            if(oTab.oGrid.dataSource.page() != 1){
                gotoFirstRow=true;  // => the select will occur in dataBound event
                oTab.oGrid.dataSource.page(1);
            }
            else {
                oTab.oGrid.select("tr:eq('0')");
            }
        }

 

In databound this code works, simple :

...
    if (gotoFirstRow){
gotoFirstRow=false;
oTab.oGrid.select("tr:eq('0')");
 }

 

The same kind of code works for the "Last" button.

 

For the "Next" (and "Prev") button, it works untill the grid needs to load data :

next : function () {

                // The uidNext is set in change event : When a record is selected, I populate

                // uidCurrent/idproCurrent for the current record

                // uidNext/idproNext for the next record if any (or null if no more record)

                // uidPrev/idproPrev for the previous record if any (or null if no more record)
                // idpro is a unique field idnetifier all records have
            if (typeof uidNext == "undefined"){ // For example when the current selected record is the last one

                return;

            }

            idproToSelect=idproNext; // => So the select will occur in dataBound event.    

             

            oTab.oGrid.select("tr[data-uid='"+uidNext+"']");           

             

                        // Now trying to put the selected record at the top of the grid. The goal is that if user use the nav bar, the grid always presents the

                       // record at the top

            var scrollContentOffset = oTab.oGrid.element.find("tbody").offset().top;

            var selectContentOffset = oTab.oGrid.select().offset().top;

            var distance = selectContentOffset - scrollContentOffset;

            oTab.oGrid.wrapper.find(".k-scrollbar-vertical").scrollTop(distance);

}

 

When I use scrollTop, if Kendo needs more records, it loads them. So I continue the process in dataBound event :

 

A this point, nothing works at all. This this the code in databound event:

if (idproToSelect != null){

                     

             // After new records are loaded, I search a record matching the unique field idproToSelect assigned previously

oTab.oGrid.element.find("td[data-field='idpro']").each(function(i, item) {

       if($(item).html() == idproToSelect) {

           // When I found it, I get the uid in order to select the row

          uidToSelect=$(item).parent().attr('data-uid');

       }

});

      // The row is selected

oTab.oGrid.select("tr[data-uid='"+uidToSelect+"']");

// RAZ

uidToSelect=null;

 idproToSelect=null;

 

// Now trying to put selected row at the top of the grid : not working

var scrollContentOffset = oTab.oGrid.element.find("tbody").offset().top;
       var selectContentOffset = oTab.oGrid.select().offset().top;
       var distance = selectContentOffset - scrollContentOffset;
       oTab.oGrid.wrapper.find(".k-scrollbar-vertical").scrollTop(distance);

 }

The problem i that grid nehavior becomes erratic, the scroll position is not right, so most of the time, I think the right record is selected, but it isn't showed. I suspect a problem with scrollTop when used form databound event. 

 

[Preslav]

Hello Andre,

With virtual scrolling, the height and the offset of the content are dynamic. Thus, calculating the distance is not an easy task, I even assume that it is not doable for every corner case.

Having said that, if the desired functionality is a must, I strongly recommend switching to Endless Scrolling:

• https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance/scrolling/endless-scrolling
• https://demos.telerik.com/kendo-ui/grid/endless-scrolling-remote

For example:

• https://dojo.telerik.com/UWODIJah

I hope this information is useful.


Regards,
Preslav
Progress Telerik

[ANDRE]

Hi Preslav,

Thanks for your answer.

I think I can deal with virtual mode as long as the grid (which is in a tabstrip) is visible. I'll post my code later : Each time I select the first/last visible record in the grid, I scroll up/down using the current row height, so the grid fetches the prev/next page if needed and it seems to work even I have to make more tests.

Of course, I understand that I can't use same method when the tab containing the grid is hidden. So when this is the case (the visible tab is the one containing the form associated with the grid), I don't try to sync scroll position, I just select tr elements to fectch next/prev record, then when there is no more record, I explicitly fetch records by calling page() method.

But doing this with virtual scrolling does not work. If I call page() method, even when the grid is visible, I can't scroll anymore. I just get the page but the position of scrollbar is ever at top, and no way to scroll back. Is it by design or is it a bug ?

Please find attached png. What I did to get this : Starting from first page, when the grid is visible, I call myGrid.dataSource.page(myGrid.dataSource.totalPages());

After that, you can see that I get indeed the last record, but the scrollbar position is wrong. I think it's easy to reproduce.

Please note I did not try endless mode yet. But this behavior with virtual mode seems weird.

Regards,

André.

[ANDRE]

I post new png so you can see the total record number.

[ANDRE]

I post another PNG, so you can see the total number of records.

[ANDRE]

Dear Preslav,

Here the code used to manage First/Prev/Next/Last toolbar using Virtual scrolling.

I manage two cases : When grid is hidden or displayed.

 

 

The function called to sync 

scrollSync : function(){

                oTab.oGrid.resize(true);
                var rowTop          = oTab.oGrid.select().offset().top;
                var rowHeight       = oTab.oGrid.select().height();
                var rowHeightNext   = rowHeight
                var rowHeightPrev   = rowHeight
                var rowBottom       = rowTop + rowHeight;
                var gridTop         = oTab.oGrid.wrapper.find('.k-grid-content').offset().top;
                var gridBottom      = gridTop + oTab.oGrid.wrapper.find('.k-grid-content').height();

                if (typeof oTab.oVars.trNext != "undefined"){
                    if (oTab.oVars.trNext != null){
                        rowHeightNext = oTab.oVars.trNext.height();
                    }
                }
                if (rowHeightNext==null){
                    rowHeightNext   = rowHeight;
                }
                if (typeof oTab.oVars.trPrev != "undefined"){
                    if (oTab.oVars.trPrev != null){
                        rowHeightPrev = oTab.oVars.trPrev.height();
                    }
                }
                if (rowHeightPrev==null){
                    rowHeightPrev   = rowHeight;
                }

                if (rowBottom >= gridBottom){
                    var vs = oTab.oGrid.wrapper.find('.k-grid-content').data('kendoVirtualScrollable');
                    var scrollTop = vs.verticalScrollbar.scrollTop();
                    var scrollTopNew = (rowBottom - gridBottom) + scrollTop + rowHeightNext;
                    vs.verticalScrollbar.animate({ scrollTop: scrollTopNew}, 250);
                }
                else if (rowTop <= gridTop){
                    var vs = oTab.oGrid.wrapper.find('.k-grid-content').data('kendoVirtualScrollable');
                    var scrollTop = vs.verticalScrollbar.scrollTop();
                    var scrollTopNew = scrollTop - rowHeightPrev;
                    if (scrollTopNew >= 0){
                        vs.verticalScrollbar.animate({ scrollTop: scrollTopNew}, 250);
                    }
                }
            }

 

Here the code for buttons:

first : function () {
            oTab.oVars.lScroll=false;
            if(oTab.oGrid.dataSource.page() != 1){
                oTab.oVars.idproToSelect=null;
                oTab.oVars.uidToSelect=null;
                oTab.oVars.gotoFirstRow=true;
                oTab.oGrid.dataSource.page(1);
            }
            else {
                oTab.oGrid.select("tr:eq('0')");
            }
        },
        prev : function () {
         if (oTab.oVars.uidPrev == null){ // No previous record ?
                // Grid hidden ? => Load records using datasource.page()
                if (oTab.oTabs.select().index()>0){
                    if (oTab.oGrid.dataSource.page() > 1){
                        oTab.oVars.uidToSelect = "Prev"; // => Will be processed by databound
                        oTab.oVars.idproToSelect = "Prev"; // => Will be processed by databound
                        oTab.oGrid.dataSource.page(oTab.oGrid.dataSource.page() - 1);
                    }
                }
                return;
            }
            oTab.oVars.uidToSelect=oTab.oVars.uidPrev; // => Will be processed by databound
            oTab.oVars.idproToSelect=oTab.oVars.idproPrev; // => Will be processed by databound
            oTab.oGrid.select("tr[data-uid='"+oTab.oVars.uidPrev+"']");
            oTab.oVars.lButton=false;
        },
        next : function () {
            if (oTab.oVars.uidNext == null){
                // Grid hidden ? => Load via datasource.page()
                if (oTab.oTabs.select().index()>0){
                    if (oTab.oGrid.dataSource.page() < oTab.oGrid.dataSource.totalPages()){
                        oTab.oVars.uidToSelect = "Next"; // => Will be processed by databound
                        oTab.oVars.idproToSelect = "Next"; // => Will be processed by databound
                        oTab.oGrid.dataSource.page(oTab.oGrid.dataSource.page() + 1);
                    }
                return;
            }
            oTab.oVars.uidToSelect=oTab.oVars.uidNext; // => Will be processed by databound
            oTab.oVars.idproToSelect=oTab.oVars.idproNext; // => Will be processed by databound
            oTab.oGrid.select("tr[data-uid='"+oTab.oVars.uidNext+"']");
        },
        last : function () {
            if(oTab.oGrid.dataSource.page() < oTab.oGrid.dataSource.totalPages()){
                oTab.oVars.idproToSelect=null;
                oTab.oVars.uidToSelect=null;
                oTab.oVars.lScroll=false;
                // Grid hidden ?
                 if (oTab.oTabs.select().index()>0){
                    oTab.oVars.gotoPrevLastPage=true;
                    oTab.oVars.uidToSelect = "Last"; // => Will be processed by databound
                    oTab.oVars.idproToSelect = "Last"; // => Will be processed by databound
                    oTab.oGrid.dataSource.page(oTab.oGrid.dataSource.totalPages());
                }
                else{
                    oTab.oVars.gotoLastRow=true;
                    var s=oTab.oGrid.wrapper.find(".k-scrollbar-vertical");
                    var h=$(s).prop('scrollHeight');
                    $(s).scrollTop(h);
                }
            }
            else {
                // Get lastrow
                var i=oTab.oGrid.dataSource.view().length - 1;
                if (i<0){
                    i=0;
                }
                // Select lastrow
                oTab.oGrid.select("tr:eq('"+i+"')");
            }
        }

 

The change event for the grid :

change: function (e) {

            var td;
            /*
             * Save current, prev and next record informations
             */
            oTab.oVars.recordCurrent = this.dataItem(this.select());
            oTab.oVars.recordId=oTab.oVars.recordCurrent.id;


            oTab.oVars.idproCurrent = oTab.oVars.recordCurrent.idpro;
            oTab.oVars.uidCurrent = oTab.oVars.recordCurrent.uid;
            oTab.oVars.trCurrent=oTab.oGrid.element.find("tr[data-uid='" + oTab.oVars.uidCurrent +                    "']");
            oTab.oVars.trNext = oTab.oVars.trCurrent.next('tr');
            oTab.oVars.uidNext = oTab.oVars.trNext.attr("data-uid");
            td = oTab.oVars.trNext.find("td[data-field='idpro']");
            oTab.oVars.idproNext=td.html();

            oTab.oVars.trPrev = oTab.oVars.trCurrent.prev('tr');
            oTab.oVars.uidPrev = oTab.oVars.trPrev.attr("data-uid");
            td = oTab.oVars.trPrev.find("td[data-field='idpro']");
            oTab.oVars.idproPrev=td.html();

           // Sync scrollbar
            if (oTab.oVars.lScroll){
                oTab.oFuns.scrollSync();
            }
            else {
                oTab.oVars.lScroll=true;
            }
         },

 

This is what happens in databound, that is when new records need to be fetched  :

dataBound: function(e) {     

                 // Last row required

            if (oTab.oVars.gotoLastRow){

              oTab.oVars.gotoLastRow=false;

              // Refresh scrollbar

              oTab.oGrid.resize(true);

              // get last row

              var i=oTab.oGrid.dataSource.view().length - 1;  

              // Select last row

              oTab.oGrid.select("tr:eq('"+i+"')");

        }  

        // First row required

         else if (oTab.oVars.gotoFirstRow){

           oTab.oVars.gotoFirstRow=false;                 

           // Refresh scrollbar


           oTab.oGrid.resize(true);

          // Scroll to top

         oTab.oGrid.wrapper.find(".k-scrollbar-vertical").scrollTop(0);                    

         //  row

         oTab.oGrid.select("tr:eq('0')");

     }

     // Other row required (Next ou Prev)

     else if (oTab.oVars.idproToSelect != null){

 

                    var td;

                     // Nextwhen grid is hidden

                    if (oTab.oVars.idproToSelect == "Next"){

                         

                        // Finding first td whith field "idpro" (Progress rowid of the record)

                        td = oTab.oGrid.element.find("td[data-field='idpro']");

                         

                        // Finding the row = tr parent of td

                        oTab.oVars.trNext = td.parent();

                        oTab.oVars.idproNext=td.html();

                         

                        // Row uid

                        oTab.oVars.uidNext = oTab.oVars.trNext.attr("data-uid");

                         

                        // Grid hidden in thus case => no scroll

                        oTab.oVars.lScroll=false;

                        oTab.oGrid.select("tr[data-uid='"+oTab.oVars.uidNext+"']");

                        // re enable scroll for further oparations

                        oTab.oVars.lScroll=true;

                    }

                    // Prev when grid is hidden

                    else if (oTab.oVars.idproToSelect == "Prev"){

                         

                        // td for field idpro

                        td = oTab.oGrid.element.find("td:last[data-field='idpro']");              

                        // row = tr parent of td

                        oTab.oVars.trPrev = td.parent();

                         

                        // Row uid

                        oTab.oVars.idproPrev=td.html();

                        oTab.oVars.uidPrev = oTab.oVars.trPrev.attr("data-uid");

                         

                        // Grid hidden in this case => no scroll

                        oTab.oVars.lScroll=false;

                        oTab.oGrid.select("tr[data-uid='"+oTab.oVars.uidPrev+"']");

                        // re enable scroll

                        oTab.oVars.lScroll=true;

                    }

                    // Next or Prev when grid is displayed (scroll already occured)

                    else {

                        // uid to select using idproToSelect

                        oTab.oGrid.element.find("td[data-field='idpro']").each(function(i, item) {

                            if($(item).html() == oTab.oVars.idproToSelect) {

                                oTab.oVars.uidToSelect=$(item).parent().attr('data-uid');

                            }

                        });

                        // Scrollalready occured so disabling it

                        oTab.oVars.lScroll=false;

                        oTab.oGrid.select("tr[data-uid='"+oTab.oVars.uidToSelect+"']");

                        oTab.oVars.lScroll=true;

                    }

                    // RAZ

                    oTab.oVars.uidToSelect=null;

                    oTab.oVars.idproToSelect=null;

                }

                     // Row selected using mouse

                else {

                    // Finding uid to select using idproCurrent

                    oTab.oGrid.element.find("td[data-field='idpro']").each(function(i, item) {

                        if($(item).html() == oTab.oVars.idproCurrent) {

                            oTab.oVars.uidCurrent=$(item).parent().attr('data-uid');

                        }

                    });

                    oTab.oVars.lScroll=false;

                    oTab.oGrid.select("tr[data-uid='"+oTab.oVars.uidCurrent+"']");

                    oTab.oVars.lScroll=true;

                }

            }

         },

 

To manage the case when grid is hidden, I try to sync grid whe it is displayed using tab event "activate"

var onActivate = function(e) {
    // Get main object to get grid
    var oTab = window[JSTabsCurrent]["getTab"]();
    // Onglet 0 ?
    if(oTab.oTabs.select().index()==0){
          // Just resize then call scrollSunc
       oTab.oGrid.resize(true);
        oTab.oFuns.scrollSync();

    }
}

 

I hope it makes it clearer.

I quicly tried the endless mode however, I can figure out how to programmatically scroll as object "kendoVirtualScrollable" does not exist in this mode. 

 

Regards,

André.

[Konstantin Dikov]

Hello Andre,

Thank you for sharing your implementation with the community.

Regarding the endless scrolling, it uses different mechanism and it will not be possible to achieve the desired behavior with it.


Best Regards,
Konstantin Dikov
Progress Telerik

[ANDRE]

Hi,

At this time, I update my code to make it work perfectly using paged mode. I juste replaced 

var vs = oTab.oGrid.wrapper.find('.k-grid-content').data('kendoVirtualScrollable');

 

by 

var vs = oTab.oGrid.wrapper.find('.k-grid-content');

 

It works because in paged mode, you can use page() method. 

Endless mode is not usable because it seems to load and keep all loaded records locally. Right ? So not possible to use that with tables containing millions records.  

However, virtual mode stays the best one for me. It's almost working. The only problem is when I use page() method to go to the last record, it loads only the last page instead of loading the last page PLUS some records from previous page as it does when you use the scrollbar. Thus, it prevents user to scrollback. That's a pity because this is the only case causing problem.

 

In conclusion, you simply can't use page() method in virtual mode. Do you have any way to fix this or any workaround ? It would be great.   

Regards,

André.

[Konstantin Dikov]

Hi Andre,

Your statement about the endless scrolling is correct and the new pages are appended to the previous pages and that functionality is not suitable for huge amount of data.

As for the Virtual Scrolling, changing the position of the scrollbar should be enough for going to a particular page, without calling the page method of the DataSource. I have created an  example that will go to a particular page entered in the input above the Grid:

• https://dojo.telerik.com/eGUGeHOJ/9

It should be easy to replace the input element with the buttons that you have.


Regards,
Konstantin Dikov
Progress Telerik

[ANDRE]

Hello Konstantin,

Yes, I already did something like this to go to last page when the grid is visible.

The method you provide is working for any page.

I have now to try it when the grid is not visible, that is only when the tab containing the grid is activated again because when the grid is hidden, I have no other choice than page() method.

When the grid becomes visible again, I plan to first come back to first page, then resize the grid, then go to current page from within dataBound event.

The only problem I can see at this time is when row height is not the same for all rows.  So "rowHeight = scrollbarHeight/oTab.oGrid.dataSource.total()" is not always accurate.

I'll let you know if it suits to my case.

Regards,

André.