jQuery Grid Plugin - jqGrid - Topic: Inline edit - problem with scrolling

kobruleht on Inline edit - problem with scrolling

Wed, 20 Jul 2011 20:19:49 +0300

This solution causes annoyning flickering:

If scrolled horizontally, click in row displays always leftmost columns and only after that scrolls
to current horizontal offset.

How to remove this flash ?

onSelectRow: function (rowID) {
var grid2 = $("#grid");
var scrollPosition;
if (rowID && rowID !== lastSelectedRow) {
   scrollPosition = grid2.closest(".ui-jqgrid-bdiv").scrollLeft();
   grid2.jqGrid('restoreRow', lastSelectedRow);
   lastSelectedRow = rowID;
   $("#grid").jqGrid('editRow');
   setTimeout(function(){
     grid2.closest(".ui-jqgrid-bdiv").scrollLeft(scrollPosition);
     },100);
   return;
   }
$("#grid").jqGrid('editRow');
}

eros on Inline edit - problem with scrolling

Tue, 26 Apr 2011 04:27:45 +0300

I've found the solution. Here's the link-> http://stackoverflow.com/quest.....ments-open

And here's the solution for the above code(you may use scrollTop() for the vertical scrolling):

    onSelectRow: function(id){
        if(id && id!==lastsel2){
          var scrollPosition = 0;
          scrollPosition = jQuery("#rowed5").closest(".ui-jqgrid-bdiv").scrollLeft();

            //$(this).saveRow(lastsel2, true);
            $(this).restoreRow(lastsel2);
            $(this).editRow(id,true);

            jQuery("#rowed5").closest(".ui-jqgrid-bdiv").scrollLeft(scrollPosition);

            lastsel2=id;

eros on Inline edit - problem with scrolling

Tue, 26 Apr 2011 04:05:56 +0300

This post is too old but same here. Having problem with in-line editting scroll position.

I'll give a working example.

<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<script type="text/javascript" src="<c:url value="/js/jquery/grid.locale-ja.js" />" charset="UTF-8"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery/ui.jqgrid.css" />"/>
<script src="<c:url value="/js/jquery/jquery.jqGrid.min.js" />" type="text/javascript"></script>
<table id="rowed5"></table>
<script type="text/javascript" charset="utf-8">
var lastsel2;
$("#rowed5").jqGrid({
    datatype: "local",
    height: 250,
    width: 250,
    autowidth : false,
    shrinkToFit : false,
    colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
    colModel:[
        {name:'id',index:'id', width:90, sorttype:"int", editable: true},
        {name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
        {name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
        {name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX;AR1:ARAMEX123456789"}},
        {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}
    ],
    caption: "Input Types",
    resizeStop: function (newwidth, index) {
        var selectedRowId = $("#rowed5").getGridParam('selrow');
        if(selectedRowId) {
            //resize combobox proportionate to column size
            var selectElement = $('[id="' + selectedRowId + '_ship"][role="select"]');
            if(selectElement.length > 0){
                $(selectElement).width(newwidth);
            }
        }
    }
    ,
    onSelectRow: function(id){
        if(id && id!==lastsel2){
            //$(this).saveRow(lastsel2, true);
            $(this).restoreRow(lastsel2);
            $(this).editRow(id,true);

lastsel2=id;

$(this).scroll();

            //resize combobox proportionate to column size
            var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
            if(rowSelectElements.length > 0) {
                $(rowSelectElements).each(function(index, element){
                    var name = $(element).attr('name');
                    var columnElement = $('#rowed5_' + name);
                    if(columnElement.length > 0) {
                        var columnWidth = $(columnElement).width();
                        $(element).width(columnWidth);
                    }
                });
            }
        }
    }
});
var mydata2 = [
        {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
        {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
        {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
        {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX123456789"},
        {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
        {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
        {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
        {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
        {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
        ];
for(var i=0;i < mydata2.length;i++) {
$("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
}
</script>

Torge on Inline edit - problem with scrolling

Fri, 11 Mar 2011 16:28:09 +0200

I have the same problem.

I tried to use onCellSelect to scroll the cell back to fokus, but there is still a jump whcih is too confusing. ( each row has a bunch of checkboxes, this way the user will certainly check the wrong one)

Is there a way to prevent the row to scroll back to origin?

turok on Inline edit - problem with scrolling

Wed, 22 Sep 2010 07:28:48 +0300

Hi,

I use jqGrid in my project to display table data with large amount of columns, to have a nice view of grid I use horizontal scrolling. I use jqGrid in inline edit mode. And I have a trouble - i.e. I scroll grid with over 200 columns and watch data in row #5. In column i.e. # 134 I found bad data and desided to edit it, so I doubleclicked the row to switch row #5 in edit mode. Row switched successfully to edit mode, BUT the scroll position changed to the begin of the table at possition 0. (grid.bDiv.scrollLeft = 0). So I need again scrolling and search column #134 it's difficult, and it's exasperate. I want grid to stay at the same scroll possition. I tryed to save grid.bDiv.scrollLeft before exec editRow and restore it in oneditfunc, but it did not help. I tryed to find code in jquery.jqGrid.min.js where scrollLeft sets to zero, but did not find.

Could anybody can help me to solve this trouble???

Any comments...