CODEWITHSUNDEEP
jqueryjqgrid
Andrey
Andrey

Reputation: 31

How to keep horizontal scroll position of jqGrid while inline-editing?

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

The problem is, that when user clicks on a row to begin editing, browser frame is scrolled to the left, thus confusing the user and even sometimes hiding the choosen cell.

I've tried the methods which i've found here and here, but they don't work for me - i can retreive current scroll position, but i can't set it. Cells are set as editable in columnsModel, so i get scroll position at formatCell event and try to set scroll position at 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 anyhow the behavior of grid - it scrolls to the most left position.

Are there any other ways to implement this?

Upvotes: 3

Views: 3293

Answers (4)

Irfan Soetedja
Irfan Soetedja

Reputation: 89

try this one on loadComplete function 

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 keep the last position of grid

Upvotes: 2

Konstantin Kuznetsov
Konstantin Kuznetsov

Reputation: 61

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;
}

Upvotes: 0

Pawel
Pawel

Reputation: 18262

@Andrus - why to timeout? Anyway I implemented your code to 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 version with scrolling which doesn't "jump" to 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); 
},

Upvotes: 0

Andrus
Andrus

Reputation: 27955

move scrolling code inside setTimeout() like:

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

Upvotes: 0

Related Questions