Question

i want to use the load on scroll(virtual scrolling) feature for my data in jqgrid.

i have been looking for good documentation and examples of it, but all i found for only asp.net framework, which were also not so helpfull.

i am using java-spring framework on server side.

please suggest some way to implement virtual scrolling feature for my grid.

my grid set up is like this.

jQuery("#tree").jqGrid({
    url:'json/jsonSamplePots.json',
    datatype: "json",
    mtype:'GET',
    colNames: ["id", "no.", "name", "col1", "col2", "col3", "col4", "col5", "col6", "col7", "col8", "col9", "col10", "col11", "col12", "col13", "col14", "col15", "col16"],
    colModel: [
        {name:'id',width: 30, editable:false, align:"right",sortable:false, hidden: true, key: true},
        {name:'no',width:80, editable:false, align:"left", sortable:true, sorttype:"int"},
        {name:'name', width:150, editable:true, sortable:true, sorttype:"text"},
        {name:'col1', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
        {name:'col2', width:80, editable:true, align:"right", sortable:true, sorttype:"date"},
        {name:'col3', width:80, editable:true, align:"right", sortable:true, sorttype:"date"},
        {name:'col4', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
        {name:'col5', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"date"},
        {name:'col6', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"date"},
        {name:'col7', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"int"},
        {name:'col8', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"date"},
        {name:'col9', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"date"},
        {name:'col10', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"int"},
        {name:'col11', width:120, editable:true, align:"left", sortable:true, sorttype:"text"},
        {name:'col12', width:80, editable:true, align:"left", sortable:true, sorttype:"text"},
        {name:'col13', width:80, editable:true, align:"right", sortable:true, hidden: true, sorttype:"text"},
        {name:'col14', width:80, editable:false, align:"right", sortable:true, hidden: true, sorttype:"text"},
        {name:'col15', width:300, editable:true, align:"left", sortable:true, sorttype:"int"},
        {name:'col16', width:80, editable:true, align:"right", sortable:true, sorttype:"int"},
    ],

    treeGridModel:'adjacency',
    treeGrid: true,
    cellEdit: true,
    ExpandColumn:'name',
    cellsubmit : 'clientArray',
    scroll : 1,
    loadonce : false,
    jsonReader : {
 root:"listTasks",
 cell:"",
 id: "id",
 repeatitems:false

}

});

Thanks in advance.. !!

Answer 1

There is no built-in way to use dynamic scrolling and TreeGrid together. When you are using TreeGrid all pager functionalities are disabled and datatype is automatically set to local after the initial data load. You can read about all limitations in “Cautions and Limitations” section of TreeGrid documentation.

UPDATE

To make it work in simple grid, it is enough to set scroll to true:

$('#grid').jqGrid({
  ...  
  //enable dynamic scrolling
  scroll: true,
  ...
});

jqGrid will disable the pager controls and make a request for a new page automatically when you scroll out of the current one. There is also a way to optimize this experience. You can enable npage parameter in prmNames option:

$('#grid').jqGrid({
  ...
  //enable dynamic scrolling
  scroll: true,
  //enable npage request parameter
  prmNames: { npage: 'npage' },
  ...
});

This will allow jqGrid to request more then one page at once by adding npage parameter to the request (it will contain the number of pages which jqgrid is requesting and you should return proper number of rows).