3.2.0
Forum Demo Guide API Store

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>


<!-- grid format -->
<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.
ShepherdOwner
March 18,
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.
ShepherdOwner
March 20,
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);
}
Carlos
March 20,
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.

ShepherdOwner
March 20,
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){
Carlos
March 20,
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>


<!-- grid format -->
<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>
ShepherdOwner
March 20,

This topic is archived.

See also:

This example shows how to Drag and Drop Rows in a v2.0 Grid to change the row order Rob Francis (59)
grid.onCellValidated = function(text, column, row) ISSUE Andy (11)
Expanding / Collapsing a row ... Experiment-2..... Carlos (19)
Issues with composite nested controls in subclassed objects Anthony (18)
AddRow() Refreshes row prior to the added row Brad (7)
multi-row-marker autoscrolls to top.... Felix (13)
Sorting on second header row. Sudhaker Raj (15)
Bug in 2.0.1 - grid top row disappears Alex (ActiveWidgets) (13)
Checkboxes in only some rows Jesse (12)
Is there a way to set focus on the first row automatically?? Roger Mutangadura (12)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us