Forum

May 22nd, 2014
A A A

Please consider registering
guest

Log In Register

Register | Lost password?
Advanced Search

— Forum Scope —

  

— Match —

   

— Forum Options —

    

Minimum search word length is 4 characters - maximum search word length is 84 characters

Topic RSS
Inline edit - problem with scrolling
22/09/2010
07:28
turok
New Member
Forum Posts: 1
Member Since:
22/09/2010
Offline

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

11/03/2011
16:28
Torge
Member
Forum Posts: 6
Member Since:
19/07/2010
Offline

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?

26/04/2011
04:05
eros
New Member
Forum Posts: 2
Member Since:
26/04/2011
Offline

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>

26/04/2011
04:27
eros
New Member
Forum Posts: 2
Member Since:
26/04/2011
Offline

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;

20/07/2011
20:19
kobruleht
Member
Forum Posts: 144
Member Since:
05/05/2011
Offline

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

Forum Timezone: Europe/Sofia

Most Users Ever Online: 215

Currently Online:
80 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1231

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11281

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10484

Posts: 30999

Newest Members: kefeoglu, davsha77, Elizabeth_Keen, jqgriddeveloper, Peter, tbass77

Moderators: tony: 7620, Rumen[Trirand]: 81

Administrators: admin: 61

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information