Hide/Show Rows Issue

I wrote a page to hide and show rows. It allows for multiple rows to be selected to be hidden and it also allow for the showing of all the rows. In most cases it works fine but if the last few rows are selected to be hidden it gives a strage error and I can't find any reason why it shouldn't work on thise rows. Here is the code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hide/Show Rows</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>


<style>
#myGrid {
width: 100%;
height: 60%
}

#myGrid .aw-column-0 {width: 120px; }
/*#myGrid .aw-column-1 {width: 200px; background-color: threedlightshadow;} */
#myGrid .aw-column-1 {width: 200px; }
/* #myGrid .aw-column-2 {text-align: right; }
#myGrid .aw-column-3 {text-align: right; }
#myGrid .aw-column-4 {text-align: right; }
#myGrid .aw-column-5 {text-align: right; }
#myGrid .aw-column-6 {width: 200px; } */

.aw-grid-column {border-right: 1px solid threedshadow;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;}

.gecko[onresize]{-moz-binding:url(lib/gecko.xml#resize);}
.gecko[onmouseenter], .gecko[onmouseleave]{-moz-binding:url(lib/gecko.xml#mouse);}
.aw-box-item.gecko{-moz-binding:url(lib/gecko.xml#item);}
.aw-templates-image{-moz-binding:url(lib/gecko.xml#box);}

/* Highlight on mouseover */
/* Highlight on mouseover */
.aw-mouseover-row {background: #ccc!important}
.aw-mouseover-row .aw-mouseover-cell {background: #ccc!important}
.aw-cells-selected .aw-rows-selected {
color:#fff!important;
background:#316ac5!important
}
.aw-rows-selected .aw-grid-cell {background:none!important}
.aw-rows-selected .aw-row-selector {color:#000!important}
</style>

<script language="javascript">
var myHeaders = ["Timestamp", "Event ID", "Malware ID", "Generator IP", "Generator Hostname", "Corr Count", "Message"];
// Row Indicies
var rowIndices = [];

// create ActiveWidgets data model - text-based table
var table = new AW.CSV.Table;

// provide data URL - plain text comma-separated file
table.setURL("events.txt");
// create javascript object
var obj = new AW.UI.Grid;
obj.setId("myGrid"); // necessary for CSS rules

obj.setSelectionMode("multi-row");
obj.setSelectionMultiple(true);

var defaultResponse = table.response;

//begin table response
table.response = function(data){
//alert('table response' + data);
defaultResponse.call(table, data);
Datalen=table.getCount();

obj.setRowCount(Datalen);
obj.setColumnCount(myHeaders.length);

// assign external 'data model'
obj.setCellModel(table);

// enable row selectors
obj.setSelectorVisible(true);
obj.setSelectorWidth(15);

obj.setHeaderText(myHeaders); // js array
//obj.setProperty("row/pageSize", 10);

for (var i=0; i<Datalen; i++){
rowIndices.push(i);
}
obj.setRowIndices(rowIndices);

// SET TIMEOUT ( )
window.setTimeout(function(){
}, 2000); //(end of TIMEOUT)
} //(end of tableresponse method)

// start asyncronous data retrieval
table.request();
gridEventHandles();

// function to set all the grid event handles
function gridEventHandles(){

obj.onHeaderMouseOver = function(event, index){
window.status = "Header " + index + " mouse over";
};

obj.onHeaderMouseOut = function(event, index){
window.status = "Header " + index + " mouse out";
};

obj.onCellMouseOver = function(event, column, row){
window.status = "Cell " + column + "." + row + " mouse over";
};

obj.onCellMouseOut = function(event, column, row){
window.status = "Cell " + column + "." + row + " mouse out";
};

obj.onCellDoubleClicked = function(event, column, row){
window.status = "Cell " + column + "." + row + " double clicked"
};

obj.onCellClicked = function(event, column, row){
window.status = "Cell " + column + "." + row + " mouse clicked";
};

obj.onSelectorClicked = function(event, index){
window.status = "Selector " + index + " clicked";
};

obj.onSelectorDoubleClicked = function(event, index){
window.status = "Selector " + index + " double clicked";
};

obj.onSelectorMouseOver = function(event, index){
window.status = "Selector " + index + " mouse over";
};

obj.onSelectorMouseOut = function(event, index){
window.status = "Selector " + index + " mouse out"
};

obj.onSelectorMouseDown = function(event, index){
window.status = "Selector " + index + " mouse down"
};

obj.onSelectorMouseUp = function(event, index){
window.status = "Selector " + index + " mouse up"
};

}

function testtodrop(innum){
var value = obj.getSelectedRows();
for (var i=0; i<value.length; i++){
if (innum == value[i]){
glFound++;
return true;
}
}
return false;
}

// hide a row
function hideRow(){
var rowIndices = obj.getRowIndices();
var nbShownRows = rowIndices.length;
var value = obj.getSelectedRows();
var showindices = new Array(nbShownRows - value.length);

var k = 0;
glFound = 0;
for (var i=0; i<rowIndices.length; i++){
if (testtodrop(rowIndices[i]) == false){
showindices[k] = rowIndices[i];
k++;
}
}
//alert('showindices = ' + showindices);

obj.setRowIndices(showindices);
obj.setRowCount(showindices.length);
}

// show all rows
function restoreRows(){
obj.setRowIndices("");
obj.refresh();
}

</script>
</head>

<body>

<script language="javascript">
document.write(obj);
</script>
<input type="button" value="Hide Rows" onClick="hideRow()">
<input type="button" value="Show Rows" onClick="restoreRows()">
</body>
</html>

I am using a licensed code of Version 2.0. Thanks, in advanced for any help.

The error is:
Line:96
Char: 560
Error: 'this._rows[...]' is null or not an object
Code: 0

I'm pretty sure that this is a problem in aw.js but I can't figure out what is wrong.

This happens when deleting indices from the "active" array, you just need to use a temporary arry instead and then asign the correct one.
Try this way:

var newIDX = new Array();



//// delete selected rows ////////

function hideRow(){



if(numrows>0){



newIDX = [];

var TempIndex = obj.getRowIndices();

var rowsmarked = obj.getSelectedRows(); 

var numrows = rowsmarked.length;



var xx=0;



    for (var i=0; i<TempIndex.length; i++){

     for(var y=0; y<numrows; y++){

     if (TempIndex[i] == rowsmarked[y]){ xx=1; }

     }

if(xx==0){ newIDX.push(TempIndex[i]) } 

xx=0;    

    }

obj.setRowCount(newIDX.length);

obj.setRowIndices(newIDX);

TempIndex = [];

}

}



////// show all rows ///// 

function restoreRows(){ 

obj.setRowCount(Datalen);

obj.setRowIndices(rowIndices);

}

Based on the last reply I tried the following, I switched:

obj.setRowIndices(showindices);
obj.setRowCount(showindices.length);

to be

obj.setRowCount(showindices.length);
obj.setRowIndices(showindices);

And now it always works. It doesn't seem right to me that the ordering
matters.

Yes , Sorry a "moved lines" in my last post:
just move the lines:

var rowsmarked = obj.getSelectedRows(); 

var numrows = rowsmarked.length;

right before ... if(numrows>0){

Just in case anyone wants the working code it is the following:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hide/Show Rows</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>


<style>
#myGrid {
width: 100%;
height: 60%
}

#myGrid .aw-column-0 {width: 120px; }
#myGrid .aw-column-1 {width: 200px; }

.aw-grid-column {border-right: 1px solid threedshadow;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;}

.gecko[onresize]{-moz-binding:url(lib/gecko.xml#resize);}
.gecko[onmouseenter], .gecko[onmouseleave]{-moz-binding:url(lib/gecko.xml#mouse);}
.aw-box-item.gecko{-moz-binding:url(lib/gecko.xml#item);}
.aw-templates-image{-moz-binding:url(lib/gecko.xml#box);}

/* Highlight on mouseover */
/* Highlight on mouseover */
.aw-mouseover-row {background: #ccc!important}
.aw-mouseover-row .aw-mouseover-cell {background: #ccc!important}
.aw-cells-selected .aw-rows-selected {
color:#fff!important;
background:#316ac5!important
}
.aw-rows-selected .aw-grid-cell {background:none!important}
.aw-rows-selected .aw-row-selector {color:#000!important}
</style>

<script language="javascript">
var myHeaders = ["Timestamp", "Event ID", "Malware ID", "Generator IP", "Generator Hostname", "Corr Count", "Message"];
// Row Indicies
var rowIndices = [];

// Number of select rows processed
var glFound = 0;

// create ActiveWidgets data model - text-based table
var table = new AW.CSV.Table;

// provide data URL - plain text comma-separated file
table.setURL("events.txt");

// create javascript object
var obj = new AW.UI.Grid;
obj.setId("myGrid"); // necessary for CSS rules

obj.setSelectionMode("multi-row");
obj.setSelectionMultiple(true);

var defaultResponse = table.response;

//begin table response
table.response = function(data){
//alert('table response' + data);
defaultResponse.call(table, data);
Datalen=table.getCount();

obj.setRowCount(Datalen);
obj.setColumnCount(myHeaders.length);

// assign external 'data model'
obj.setCellModel(table);

// enable row selectors
obj.setSelectorVisible(true);
obj.setSelectorWidth(15);

obj.setHeaderText(myHeaders); // js array

for (var i=0; i<Datalen; i++){
rowIndices.push(i);
}
obj.setRowIndices(rowIndices);

// SET TIMEOUT ( )
window.setTimeout(function(){
}, 200); //(end of TIMEOUT)
} //(end of tableresponse method)

// start asyncronous data retrieval
table.request();

function getrowcount() {
var rowPosition = obj.getRowCount()-1;
var rowIndicesArray = obj.getRowIndices();
var rowIndex = rowIndicesArray ? rowIndicesArray[rowPosition] : rowPosition;
// if RowIndiciesArray exists, return correct indexvalue; else just position
return rowIndex;
}

function testtodrop(innum){
var value = obj.getSelectedRows();
for (var i=0; i<value.length; i++){
if (innum == value[i]){
glFound++;
return true;
}
}
return false;
}

// hide a row
function hideRow(){
var rIndices = obj.getRowIndices();
if (rIndices == 0){ // list in correct order
rIndices = [];
for (var r=0; r<rowIndices.length; r++){
rIndices.push(r);
}
}
var nbShownRows = rIndices.length;
var value = obj.getSelectedRows();
//alert('select are ' + value + ' nbShownRows ' + nbShownRows);
var showindices = new Array(nbShownRows - value.length);

var k = 0;
glFound = 0;
for (var i=0; i<rIndices.length; i++){
if (testtodrop(rIndices[i]) == false){
showindices[k] = rIndices[i];
k++;
}
}
//alert('showindices = ' + showindices);

obj.setRowCount(showindices.length);
obj.setRowIndices(showindices);
obj.setSelectedRows([]);
}

// show all rows
function restoreRows(){
obj.setRowCount(rowIndices.length);
obj.setRowIndices("");
obj.refresh();
}

</script>
</head>

<body>

<script language="javascript">
document.write(obj);
</script>
<input type="button" value="Hide Rows" onClick="hideRow()">
<input type="button" value="Show Rows" onClick="restoreRows()">
</body>
</html>

Forum search