V2 - Extended Grid Headers As Rows or Override Sorting
I have a grid that has data from an XML source. The first few rows in the source are "special". I want to make those first few rows unsortable such that they always appear at the top of a grid. I first tried to accomplish this using obj.setHeaderCount which works for sorting but it changes the grid formatting for them. For instance, my cell highlighting templates don't fire on them, the backgrounds for mouseover, odd/even, etc don't work either.
Anyone got an easy way to force a couple of rows to be at the top but otherwise keep the formatting the same as the rest of the data?
Alternatively, I was thinking about leaving all the data in the data portion of the grid instead of in the header. To do this method I would need to override the standard sorting function such that it always kept my "special" rows at the top of the grid. Anyone have a sample of how to accomplish this? I've spent hours searching the forums here and elsewhere to no avail.
I am typically pretty proficient using widgets so lay on the good stuff. =)
Thanks
Mike
February 1,
Here is some sample code to see what I am talking about. Note that the first 5 rows can't be selected nor do the mouseover events on the entire row. I can get mouseover to work on a single cell but not the entire row. I was able to get the selector text to reset from the top header row easily enough.
<html>
<head>
<script src="/ActiveWidgets253/runtime/lib/aw.js"></script>
<link href="/ActiveWidgets253/runtime/styles/aqua/aw.css" rel="stylesheet"></link>
<style>
.aw-system-control {position: absolute}
.aw-grid-row { border-bottom: 1px solid #ccc;}
.aw-alternate-even {background: #fff;}
.aw-alternate-odd {background: #eee;}
.aw-mouseover-row {background: #c0c0c0;}
.aw-mousedown-row {background: #999;}
.aw-rows-selected {background: #316ac5; color: white;}
.aw-rows-selected .aw-grid-cell {background: none!important; color: white!important;}
#grid { width: 800px; height: 400px; }
</style>
</head>
<body>
<script>
function mySort(index, direction) {
alert("index: "+index+", dir: "+direction);
}
var grid = new AW.Grid.Extended();
grid.setId( "grid");
grid.setVirtualMode(false);
grid.setSelectorText(function(i){return this.getRowPosition(i)+grid.getHeaderCount();});
grid.setSelectorVisible(true);
grid.setSelectorResizable(true);
grid.setSelectorWidth(25);
grid.setSelectionMode("single-row");
grid.setHeaderText(["col1", "col2", "col3", "col4"]);
grid.setColumnCount(4);
grid.setRowCount(25);
grid.setCellText(function(c,r){return "R"+r+"C"+c;});
grid.setHeaderCount(5);
grid.setHeaderText(function(c,r){return "H:R"+r+"C"+c;});
grid.setTopText(function(i){return (i==0 ? "" : i);});
document.write(grid);
</script>
</body>
</html>
Mike
February 1,
That was the wrong example, please use the following. The difference is removed "extra" code and also added in the cell template stuff for cell and highlighting based on values to fully show how my data section should work with mouseover and selected rows.
<html>
<head>
<script src="/ActiveWidgets253/runtime/lib/aw.js"></script>
<link href="/ActiveWidgets253/runtime/styles/aqua/aw.css" rel="stylesheet"></link>
<style>
.aw-grid-row { border-bottom: 1px solid #ccc;}
.aw-alternate-even {background: #fff;}
.aw-alternate-odd {background: #eee;}
.aw-mouseover-row {background: #c0c0c0;}
.aw-mousedown-row {background: #999;}
.aw-rows-selected {background: #316ac5; color: white;}
.aw-rows-selected .aw-grid-cell {background: none!important; color: white!important;}
#grid { width: 800px; height: 400px; }
</style>
</head>
<body>
<script>
var grid = new AW.Grid.Extended();
grid.setId( "grid");
grid.setVirtualMode(false);
grid.setSelectorText(function(i){return this.getRowPosition(i)+grid.getHeaderCount();});
grid.setSelectorVisible(true);
grid.setSelectorResizable(true);
grid.setSelectorWidth(25);
grid.setSelectionMode("single-row");
grid.setColumnCount(4);
grid.setRowCount(5);
grid.setCellText(function(c,r){return "R"+r+"C"+c;});
grid.setHeaderCount(5);
grid.setHeaderText(function(c,r){return "H:R"+r+"C"+c;});
grid.setTopText(function(i){return (i==0 ? "" : i);});
grid.getCellTemplate().setStyle("background-color", function() {
return this.getCellProperty("bgcolor");
});
grid.defineCellProperty("bgcolor", function(col, row) {
if (col == 1 || row == 1) {
return "red";
}
});
document.write(grid);
</script>
</body>
</html>
Mike
February 1,