grid loading duplicate rows which are hidden when using virtual scrolling mode

[saiteja2020]

Hello I am using jqGrid version 4.6 in my project to display ratings. I have nodes with levels and child nodes( determined based on parent attributes) I am trying to have expand and collapse functionality (when a parent node is clicked I hide the child rows) along with virtual scrolling. I have a situation where I am showing 10 nodes at a time and when I click on the first node all the other 9 nodes will be hidden, after this when I pull the scroll bar down the jqGrid is returning the 9 nodes that are hidden and other nodes. How can I avoid adding the duplicate rows when rows are hidden Here is the demo https://jsfiddle.net/saiteja2020/zyjhto02/6/ PS; please change http to https in the url of the grid

Any help is appreciated Thanks

[tonytomov]

In the example provided the demo is not working. There is a error, which can be seen in the console.

The error is: TypeError: t is null in _dist-editor.js:1:1651152

[saiteja2020]

Thanks for the reply. JsFiddle is not allowing me to change the contents. I will share a codePen project of the issue. I tried to figure out the solution when ever the scroll bar is pushed down the following code is being called from jQuery.jqGrid.js scrollGrid: function( e ) { if(p.scroll) { var scrollTop = grid.bDiv.scrollTop; if(grid.scrollTop === undefined) { grid.scrollTop = 0; } if (scrollTop !== grid.scrollTop) { grid.scrollTop = scrollTop; if (grid.timer) { clearTimeout(grid.timer); } grid.timer = setTimeout(grid.populateVisible, p.scrollTimeout); } } grid.hDiv.scrollLeft = grid.bDiv.scrollLeft; if(p.footerrow) { grid.sDiv.scrollLeft = grid.bDiv.scrollLeft; } if(p.frozenColumns) { $(grid.fbDiv).scrollTop( grid.bDiv.scrollTop ); } if( e ) { e.stopPropagation(); } }

I am trying to invoke this function dynamically when user clicks on a row. Can you tell me how to call this function dynamically from my javascript file. Thanks in advance