Prev: replacement for window.showmodelessdialog in mozilla
Next: passing meta-knowledge about a form element
From: dschectman on 18 Jan 2006 14:55
I have a page with two dynamic tables. One is a master list of items
for selection. The second is a list of selected items.

The master list contains 4 columns.
1) The item code - hidden
For example NY
2) The item descrtion - visible
For example, New York
3) The item type - hidden
For example, state_country
4) The item type description - hidden
For example State
<table class="contenttable" cellspacing="0" cellpadding="0" rules="all"
bordercolor="#DADADA" border="2" id="_ctl0_searchResultsDataGrid"
style="border-color:#DADADA;border-width:2px;border-style:Solid;border-collapse:collapse;">
<tr class="columnheader">
<td class="hide">Code2</td><td>Name</td><td
class="hide">Code1</td><td class="hide">Type</td>
</tr>
<tr class="odd"
ondblclick="javascript:MoveSelectedItemToDestinationGrid('_ctl0_searchResultsDataGrid','_ctl0_selectedResultsDataGrid','_ctl0_selectedResultsDataGrid','_ctl0_selectedResults')"
onclick="javascript:SingleClickToMarkRowForSelection(this, event);"
onmouseover="javascript:HighlightRow(this);"
onmouseout="javascript:UnHighlightRow(this);">
<td class="hide">6020</td><td>Aerospace/Defense</td><td
class="hide">Micro</td><td class="hide">Micro Industry</td>
</tr>
....
</table>

The list of selected items is identical except that the last column,
item type description, is visible.
<table class="contenttable" cellspacing="0" cellpadding="0" rules="all"
bordercolor="#DADADA" border="2" id="_ctl0_selectedResultsDataGrid"
style="border-color:#DADADA;border-width:2px;border-style:Solid;border-collapse:collapse;">
<tr class="columnheader">
<td class="hide">Code2</td><td>Name</td><td
class="hide">Code1</td><td>Type</td>
</tr>
....
</table>

When you double click on an item, it moves it from the master list to
the list of selected items. When you double click on the list of
selected items it move the item back to the master list. When you
double click an item, the items are put in the destination list
correctly, but when you double click destination list, the third and
forth columns are reversed. The first two columns are correct. It is
as if the JavaScript engine wants all the visible columns to be
contiguous.

Here is the code that updates the two lists
function MoveSelectedItemToDestinationGrid(sourceGridId,
destinationGridId, resultsGridId, hiddenFieldId)
{
var sourceGrid = document.getElementById(sourceGridId);
var destinationGrid = document.getElementById(destinationGridId);
var sourceSelectedIndexes = GetSelectedIndexes(sourceGrid.rows);

// Add to destination
if ( sourceSelectedIndexes.length > 0 )
{
for( i = 0; i < sourceSelectedIndexes.length; i++ )
{
var row = destinationGrid.insertRow(destinationGrid.rows.length);
row.ondblclick =
function(){MoveSelectedItemToDestinationGrid(destinationGridId,
sourceGridId, resultsGridId, hiddenFieldId)};
row.onclick = function(){SingleClickToMarkRowForSelection(this,
event)};
row.onmouseover = function(){HighlightRow(this)};
row.onmouseout = function(){UnHighlightRow(this)};

for(j=0; j < sourceGrid.rows[0].cells.length; j++)
{
cell = row.insertCell(j);
cell.innerHTML =
sourceGrid.rows[sourceSelectedIndexes[i]].cells[j].innerHTML;
cell.className = destinationGrid.rows[0].cells[j].className;
}
}
// When you select an item, cells[2] is state_country and cells[3] is
State
// When you click on a selected item, cells[2] is State and cells[3] is
state_country
// It is as if JavaScript is lumping all the visible columns together
alert(row.cells[2].innerHTML + "|" + row.cells[3].innerHTML);

// Remove from source
var count = 0;
while ( count < sourceSelectedIndexes.length )
{
var firstIndex = GetSelectedIndex(sourceGrid.rows);
sourceGrid.deleteRow(firstIndex);
count++;
}

// Selected list when blank, has an
empty row
DeleteEmptyRow(destinationGrid);

// Preserve odd/even formatting for
rows
RepaintTable(sourceGrid);
RepaintTable(destinationGrid);

// save results as a hidden field for
form post
PopulateHiddenField( resultsGridId, hiddenFieldId );
}
}

Thanks in advance for your help.

From: Java script Dude on 20 Jan 2006 01:31
Try simplifying a test case before submitting to this group.

Such code as posted above will get a non-response almost every time.

JsD

 | 
Pages: 1
Prev: replacement for window.showmodelessdialog in mozilla
Next: passing meta-knowledge about a form element