Geek asks and answers

How to keep jqGrid's horizontal scroll position while editing embed?

I have a jqGrid table on my page with a large number of columns, so the grid is wider than the browser window, a horizontal scrollbar appears.

The problem is that when the user clicks on a line to start editing, the browser frame scrolls to the left, which confuses the user and even sometimes hides the selected cell.

I tried the methods that I found here and here , but they do not work for me - I can restore the current scroll position, but I cannot set it. The cells are set as editable in the Modell columns, so I get the scroll position in the formatCell event and try to set the scroll position in afterEditCell with the following code:

afterEditCell: function(rowid, cellname, value, irow, icol) { 

 jQuery("#list").closest(".ui-jqgrid-bdiv").scrollLeft(scrollPosition);
 window.scrollTo(scrollPosition,0);
 if (window.pageXOffset) {window.pageXOffset = scrollPosition;};
 if (document.body.parentElement) {document.body.parentElement.scrollLeft = scrollPosition;};   
 if (document.body) {document.body.scrollLeft = scrollPosition;};

And this does not affect the behavior of the grid in any way - it scrolls to the leftmost position.

Are there other ways to implement this? Thank you very much in advance!

+3
source share
4 answers

try this function on loadComplete

var offset = $("#" + *subgrid_table_id*).offset();
var w = $(window);
var fromTop = offset.top - w.scrollTop();
$('html, body').animate({
    scrollTop: offset.top - fromTop
}, 1);

this code will save the last grid position

+2
source

move scrollable code inside setTimeout () like:

SetTimeout (() {   grid2.closest( "-jqgrid-bdiv" ) scrollLeft (scrollPosition).                          }, 100);

0

@Andrus - why timeout? In any case, I have embedded my code in my solution.

Inline editing from jqgrid page:

onSelectRow: function(id){
    if(id && id!==lastSel){ 
        jQuery('#grid_id').restoreRow(lastSel); 
        lastSel=id; 
    }
    jQuery('#grid_id').editRow(id, true); 
},

My scroll version that doesn't “jump” to the left:

onSelectRow: function(id){
    scrollPosition = jQuery('#grid_id').closest(".ui-jqgrid-bdiv").scrollLeft();
    if(id && id!==lastSel){ 
        jQuery('#grid_id').restoreRow(lastSel); 
        lastSel=id; 
    }
    jQuery('#grid_id').editRow(id, true).scrollLeft(scrollPosition); 
},
0
source 
onSelectRow: function(rowid, status, e){
  if (lastID) grid.jqGrid("restoreRow", lastID);

  if (rowid !== lastID) {
    var scrollPosition = grid.closest(".ui-jqgrid-bdiv").scrollLeft();

    grid.jqGrid("editRow", rowid, false, function(){
      setTimeout(function(){ $("input, select", e.target).focus(); }, 10);
    });

    setTimeout(function(){ grid.closest(".ui-jqgrid-bdiv").scrollLeft(scrollPosition); }, 0);

    lastID = rowid;
  }
  else lastID = null;
}
0
source

More articles:


All Articles