Display the current position of jqGrid scrollbar

Question

Currently I am working on a mini jqGrid project. The last requirement of the project is that whenever I change the position of scroll bar, an event should gets triggered that should print the current position of the scrollbar on console. But every time I am getting the same response on the console.

function filljQgrid(para1,para2){
    var a;
    var rowData;
    var pos;
    var scrollLength;
    var gridData=para1;
    var entityId=para2;
    jQuery('#list').jqGrid('clearGridData');
    var elementTop;
    var elementBottom;
    var viewportTop;
    var viewportBottom;
    jQuery(document).ready(function(){
        var grid_selector="#list";
        var pager_selector="#page";
        //responsive starts
        var parent_column = $(grid_selector).closest('[class*="col-"]');
        //resize to fit page size
        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
                 })
        $(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
        if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
        setTimeout(function() {
            $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
            }, 20);
            }
           })
    jQuery("#list").jqGrid({
            datatype:"local",
            width:"1090",
            height:"50",
            colNames:["ENTITY ID","RANK","ACCOUNT NAME","BENIFIT VALUE"],
            colModel:[
                        {name:"entity_id",index:"entity_id",sortable:false,width:90,align:"center",key:true,hidden:true},
                        {name:"rank",index:"rank",sortable:true,sorttype:"int",width:90,align:"center"},
                        {name:"account_name",index:"account_name",width:90,sortable:false,align:"center"},
                        {name:"incentive",index:"incentive",width:90,sortable:false,align:"center"}

                     ],
            viewrecords:true,
            ignoreCase:true,
            scrollrows:true,
            altRows:true,
            });
            $(window).triggerHandler('resize.jqGrid');
            for(var l=0;l<gridData.length;l++)
                {
                jQuery("#list").jqGrid('addRowData', l+1, gridData[l]);
                }
            $("#list").setGridParam({sortname:'rank', sortorder: 'asc', loadComplete:function(){
                                                                                    jQuery('#list').jqGrid('setSelection','50147');
                                                                                    jQuery('#list').find('.ui-state-highlight').css('background', '#0487BD');
                                                                                    jQuery('#list').find('.ui-state-highlight').css('color', 'white');
                                                                                    a=jQuery('#list').jqGrid('getGridParam',"selrow");
                                                                                    rowData = jQuery('#list').jqGrid ('getRowData',a);in json format
                                                                                    pos=jQuery("#list").closest(".ui-jqgrid-bdiv").scrollTop();
                                                                                    elementTop = jQuery("#list").closest(".ui-jqgrid-bdiv").offset().top;
                                                                                    elementBottom = elementTop + $('a').height();
                                                                                    viewportTop = $("#list").scrollTop();
                                                                                    viewportBottom = viewportTop + $("#list").height();


                                                                                               }
                                    }).trigger('reloadGrid');
            //adding search begins here           
            jQuery("#list").jqGrid('navGrid','#ptoolbar',{del:false,add:false,edit:false,search:false});
            jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
            //adding search ends here
            //if($('a').is(':visible')){}
            $(".ui-jqgrid-bdiv").scroll(function(){console.log(elementTop)});

        });**strong text**
    }//closing brace for filljQgrid()

score 1 · Answer 1 · answered Jul 04 '18 at 07:36

1

After the grid is created you can bind a scroll event and see the position Try with this code

var mygrid = $("#jqGrid")[0];
$(mygrid.grid.bDiv).scroll(function(e){
    console.log(this.scrollTop);
});

answered Jul 04 '18 at 07:36

Tony Tomov

2,507
1
9
12

Hi Tony....thanks for your reply. Now I am stuck with something else. Kindly tell me how will I find out whether a particular row is visible in the grid's viewport or not. I tried using [link](https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport) but not getting the correct output – Rishi Anand Jul 04 '18 at 09:36
Since you know the id of the row you can check if it is in the visible viewport using this [stackoverflow link](https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport) – Tony Tomov Jul 04 '18 at 10:49

Display the current position of jqGrid scrollbar

1 Answers1