1

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.. !!

lakshmi
  • 39
  • 1
  • 7
mayur
  • 47
  • 1
  • 3
  • 11

1 Answers1

4

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).

tpeczek
  • 23,867
  • 3
  • 74
  • 77
  • Thanks for the reply. Yes i went through those points, is there any way to get it work. Also, can you tell how it can be done for simple grid(not treegrid). – mayur Mar 13 '12 at 09:54
  • 1
    Working aroudn this would require rewritting most of TreeGrid functionality, because the local datatype is required for dynamic loading of child nodes. I'm not aware of any ready to use solution. As for simple grid, please read the update. – tpeczek Mar 13 '12 at 10:16
  • tpeczek ... thank you very much.. I was thinking, to make it work in treegrid using... $("#grid").scroll(function() { .ajax {}}); and here i will pass the last row number and page number which returns me the rows, which in turn will be append to main grid using $("#grid").append(rows); – mayur Mar 13 '12 at 10:22
  • You may try that, you can also take look at [this](http://stackoverflow.com/questions/4193113/jqgrid-tree-grid-with-pager) <-- there is a small attempt to make paging working in TreeGrid – tpeczek Mar 13 '12 at 10:30
  • +1 for absolute correct answer. @mayur: I recommend you to invest more time in understanding how jqGrid work and to use the existing possibilities instead of spending your time in extending functionality of jqGrid. If you would think more about how the page size will be calculated especially with some loaded, but collapsed rows you will see that it's not so easy just to define what should be displayed in the tree grid in case of data paging. For the "simple" grids I would recommend you to use better the standard paging instead of virtual. – Oleg Mar 13 '12 at 10:33
  • @Oleg: Though i am using tree grid, i am not loading child on expansion. Also, for all rows, i have mentioned "expanded":"true", and "loaded":"true". Thus, now the issue for collapse nodes should not arise. I am getting a major performance hit for only 200 records, hence i am thinking of virtual scroll. – mayur Mar 13 '12 at 11:01
  • @mayur: All is not so easy like you as imagine. Let us you have at the beginning all node expanded and display the first page (for example 10 rows) of results. Now the user click on the "next page". What should be displayed on the next page? Should the root node from the first page are displayed on the second page? Should all "intermediate" parents *from the first page* will be displayed on the page? What should be displayed in case of the level higher as the number of rows in the page? In the case if you display only direct parents it could be not enough place to display the main items. – Oleg Mar 13 '12 at 11:13
  • @mayur: It's only the starting problems. In case of collapsing of some noded some rows should be appended to the current page which was on the next page before... I can continue with more and more such problems. I hope that you understand now, that paging of tree grid is not so easy in the implementation. – Oleg Mar 13 '12 at 11:15
  • @mayur: The main problem of the virtual scrolling is that there are no queuing of Ajax requests to the server in the current implementation of jqGrid. So if the user scroll more quickly as the server answer you can see unexpected results. As a workaround you should at least block the grid (`loadui: "block"`) till jqGrid receive the answer on the previous response. The "standard" paging has no such problem and work very stable. – Oleg Mar 13 '12 at 11:26
  • @Oleg: Thanks for the details, you saved my time which i would have wasted to make virtual scroll work. I will go for load child on demand feature.. may be that would help me to increase performance. I am facing one more problem. For one of the row i am changing "level" field of json using "setrowdata"(from 2 to 3), but it is not reflecting into the grid. Please suggest some solution. – mayur Mar 13 '12 at 11:35
  • @mayur: About the performance of TreeGrid look at [the answer](http://stackoverflow.com/a/9575200/315935). About the changing "level" field it's better to open new question. The goal of the satckoverflow is to *share* questions and answers. Searching engine is oriented on the main text of the questions and the answers and not on the comments. – Oleg Mar 13 '12 at 11:40
  • @Oleg: Also in treegrid if i have more than 1000 (root)parent task, then without scroll or paging will that work. – mayur Mar 13 '12 at 11:41
  • @mayur: Sorry, I didn't understand you. Do you asked a question to me or you wrote a statement only? In case of tree grid with more than 1000 root elements you can consider to implement server side filtering of the root items. You can gives the user first filter the items from 1000 to some small subset and place in the tree grid only the filtered root elements. No user will scroll the grid and read all the 1000 items. The user need see only someone and then set the filter to reduce the list to some small subset. – Oleg Mar 13 '12 at 12:12
  • @Oleg: I was referring to you only... I will try filtering data on server side.. thanks for your help. – mayur Mar 13 '12 at 12:27