Automatically scrolling a dynamic table

[dschectman]

I have an interesting issue. I need to implement a dynamic table to
mimic a select list. Each time you double click from the master list,
a row is added to the list of selected items. The list of selected
items has a column header and differentiation between odd and even
rows. This part is trivial. Clients have the ability to re-order the
list of selected items. This is also trivial: I trap the onClick event
for a row to select it. When the client clicks on the up arrow or down
array, I just swap rows in the table by removing the selected row and
inserting its contents at the new position.

The trick is that screen space is limited so that the list of selected
items can only display 6 rows including the header. If there are more
the 6 rows, the table contains scroll bars. When I try moving a
selected item down the list, the list does not automatically scroll
when the item reaches the last visible row. The item disappears from
view until you manually scroll the table.

Is it possible to automatically scroll the table when you set focus to
a row that is not visible on the screen? Is it possible to have the
table scroll by calling a JavaScript function?

Thanks in advance. HTML and JavaScript snippets are included below.


<div style='position:relative; vertical-align: top; height:150px;
width:625px; overflow:auto;
scrollbar-face-color : #D3CFC9;'>
<table class="contenttable" cellspacing="0" cellpadding="0"
rules="all"
bordercolor="#DADADA" border="2" id="_selectedItems"
style="border-color:#DADADA;border-width:2px;border-style:Solid;border-collapse:collapse;">
<tr class="columnheader">
<td colspan=>Code</td>
<td>Description</td>
</tr>
</table>
</div>

function AddGridItem(code, desc, rowid)
{
var selectedGridTab = document.getElementById("_selectedItems");

// If rowid is -1 append alse inert at rowid
if (rowid==-1) rowid = selectedGridTab .rows.legnth;
var row = selectedGridTab.insertRow(rowid);

// Column 1 is the code, column 2 is the description
var codeCell= row.insetCell(0);
codeCell.innerHTML = code;
var descCell= row.insetCell(1);
descCell.innerHTML = desc;

// Highlight even and add rows
var css = ((rowid % 2) == 0)? "even" : "odd";
row.attributes("class").value =css;
}

function swapRow(grid, rowid, offset)
{
// Get selected row, index and contrents
var currrow = grid.rows[rowid];
var name = currrow.cells[0].innerHTML;
var desc = currrow.cells[1].innerHTML;

// Selected index and new index up or down (offset is 1 or -1)
var curridx = currrow.rowIndex;
var otheridx = curridx+offset;

// Remove selected row
grid.deleteRow(curridx);

// Add row
AddGridItem(code,desc,otheridx);

// Redo odd/even rows
RepaintTable(grid);
}

function RepaintTable(tab)
{
var noOfRows = tab.rows.length;
var start=1; // Grid has a column header start at the second row
for(var i = start; i < noOfRows; i++)
{
var css = ((i % 2) == 0)? "even" : "odd";
var noOfCols = tab.rows.cells.length;
for(j = 0; j < noOfCols; j++)
{
tab.rows.attributes("class").value = css;
}
}
}

 

[VK]

The trick is that screen space is limited so that the list of selected
items can only display 6 rows including the header. If there are more
the 6 rows, the table contains scroll bars. When I try moving a
selected item down the list, the list does not automatically scroll
when the item reaches the last visible row. The item disappears from
view until you manually scroll the table.

Is it possible to automatically scroll the table when you set focus to
a row that is not visible on the screen? Is it possible to have the
table scroll by calling a JavaScript function?

Try someObject.scrollIntoView(false) method on different parts of your
psi-element. scrollIntoView should work only on window itself but you
never know how one could extent it...