Scrolling a Div programatically using say Javascript

Question

Hi I have a jqgrid which is embedded in a Div. I am deleting records from the grid and reloading the grid using grid.Trigger('reload'). The width of the grid is considerably high so it has a scroll bar. Now I scrolled through the end of the grid horizontally before deleting records. Each time I delete the records and reload the grid, the column headers and their values are slightly misaligned. When I move the scroll bar back to original position or just move the scroll bar slightly they are aligned properly.

So I thought its better to move the scroll bar to its inital position when the grid reloads. How can a scroll bar be programatically moved using javascript. Or is there any other way to solve my problem?

Answer 1

From daniweb (untested):

document.getElementById('id1').scrollTop = document.getElementById('id2').offsetTop;

Where id1 is the div; and id2 is the element to scroll to within the div.

Answer 2

It seems to me that you have mostly a problem with wrong calculation of the width by jqGrid and not a problem with the horizontal scrolling. Look at scripts which I posted in http://stackoverflow.com/questions/2686043/correctly-calling-setgridwidth-on-a-jqgrid-inside-a-jqueryui-dialog/2696776#2696776. They are not perfect, but can fix calculation of the width of grid in the most situations. Moreover I recommend you to verify whether you change (probably indirect) default padding properties of <td> elements. If if is so it can be required to adjust cellLayout option of jqGrid (see http://www.trirand.com/blog/?page_id=393/feature-request/celllayout/&value=cellLayout&type=1&include=1&search=1&ret=all).

UPDATED: One more tip: try to use the latest uncompressed version of jqGrid which you can downloaded from http://github.com/tonytomov/jqGrid. It has small fix in setGridWidth (see http://www.trirand.com/blog/?page_id=393/bugs/some-bugfixes-for-3-6-5/).