On Scroll Data Loading not working with dual jqGrid

Question

I'm making a page with two different jqGrids displayed in two different tabs.

Here's the First jqGrid and the second one

Both the jqGrids have different urls but the same configuration.

applicationLog.js

        mygrid.jqGrid({ 
            url         :   "getApplicationLog.action",
            datatype    :   "json",
            mtype       :   "GET",
            colNames    :   ["Id", usernameheader,messageheader,dateofgeneration/*,"ModuleName"*/],
            colModel    :   cmapplicationlog,       
            height      :   300,
            width       :   $('#tabs').width()-50,
            pager       :   "#papplicationlog",
            ExpandColumn:   'Message',          
            loadonce    :   false, 
            ShrinkToFit :   true,       
            gridview    :   true,
            hoverrows :     true,
            overflow    :   scroll,
            scroll      :   1,
            rownumbers  :   true,
            rowNum      :   100,
            viewrecords :   true,
            sortorder   :   "asc",
            jsonReader  :{  
                root        :   'appLog',
                repeatitems :   false,
                page        :   "page",
                total       :   "total",
                records     :   "records"
        }

applicationErrorLog.js

    myErrorgrid.jqGrid({    
    url         :   "getApplicationErrorLog.action",
    datatype    :   "json",
    mtype       :   "GET",
    colNames    :   ["Id", usernameheader, messageheader, dateofgeneration/*, "ModuleName"*/],
    colModel    :   cmapplicationerrorlog,      
    height      :   300,
    width       :   $('#tabs').width()-50,
    pager       :   "#papplicationerrorlog",
    ExpandColumn:   'Message',          
    loadonce    :   false, 
    //scrollrows    :   true,
    ShrinkToFit :   true,
    scrollOffset:   0,
    gridview    :   true,
    hoverrows   :   true,
    overflow    :   scroll,
    scroll      :   1,
    rownumbers  :   true,
    rowNum      :   100,
    //rowList       :   [15,20,30,40,50,60,70,80,90,100],
    viewrecords :   true,
    sortorder   :   "asc",
    jsonReader  :{  
        root        :   'appLog',
        repeatitems :   false,
        page        :   "page",
        total       :   "total",
        records     :   "records"
}

I've used the scroll:1 option for the grid to dynamically load the data. The Data on the First jqGrid is loading properly on scroll.But when i switch to the next tab (ApplicationErrorLog) grid the data is not loaded on scroll. Not even the request is sent for fetching the records. There is no sign of any error on the console.

I'm also including these files in my jsp
1.)jquery-1.5.2.min.js
2.)jquery-ui.min.js
3.)grid.locale-en.js
4.)jquery.alerts.js
5.)jquery.jqGrid.src.js (jquery.jqGrid-4.3.2)

I think there might be some conflict thats causing this issue.

Can anyone please tell me what i'm missing?

Answer 1

JqGrid Dynamic Data loading on scroll, works on calculating heights. The height of each row in the jqGrid remains fixed. It calculates the total height of the grid based on no. of rows*fixed row height and stored stores it. But in jqGrid when a row doesn't contain the whole data it increases the height in order to contain it.

How does it load the data when you scroll to the last row?

On every scroll jqGrid calculates the height you have traversed and subtracts that with the initially calculated total height. If the result is zero then it sends a request for the required data. But if you have any row that has a height greater than the fixed row height it disrupts the calculation of heights. Which means that jqGrid is not able to tell whether you have scrolled to the last row and in turn it won't send the request for dynamic data loading

So in this question the second jqGrid was having rows that have height more than the usual fixed, that's why it was not loading data on scroll

This is what I have learned from the problem. If I am wrong please correct me