obj.setCellLink("javascript:void(1);", 1);
obj.setCellTemplate(new AW.Templates.Link, 1); // and template
obj.onCellClicked = function(event, col, row){if (col==1 ) alert( this.getCellText(col, row));};
<html>
<head>
<title>Simple Freedom Outage Page</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="grid.css" tppabs="grid.css" rel="stylesheet" type="text/css" ></link>
<link href="aw.css" rel="stylesheet" type="text/css" ></link>
<script src="aw.js"></script>
<script src="grid.js" tppabs="grid.js"></script>
<!-- Include patches here -->
<script src="paging1.js" tppabs="paging1.js"></script>
<!-- grid format -->
<style>
.active-controls-grid {height: 380px; font: menu;}
.active-column-0 {width: 80px;}
.active-column-1 {width: 200px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}
.active-column-5 {text-align: right;}
.active-column-6 {text-align: right;}
.active-grid-column {border-right: 1px solid threedshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
/* button styles */
a.button, a.buttonDis {
display: block;
background-color: transparent;
background-image: url(button.png);
background-repeat: no-repeat;
width: 52px;
height: 24px;
padding: 3px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-color: #000000;
text-decoration: none;
cursor: default;
}
a.button:link, a.button:visited {
color: #000000;
cursor: default;
}
a.button:hover, a.button:active {
background-position: 0 -24px;
color: #000000;
cursor: default;
}
a.buttonDis:link, a.buttonDis:visited, a.buttonDis:hover, a.buttonDis:active {
background-position: 0 -48px;
color: #5F5F5F;
cursor: default;
}
.footer{
border: 1px solid black;
border-top-width: 1;
border-bottom-width: 1;
border-right-width: 0;
border-left-width: 0;
font-size: 10px;
Font-Family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: none;
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFB012', startColorstr='#FFCF54', gradientType='0');
}
</style>
<!-- grid data -->
<script>
var inputval="";
var Datalen = 0;
var myData =[];
var GlobData =[];
var rowidValues = [];
var resfilter = "";
var restot = "LOADING, PLEASE WAIT.";
var myColumns = ["Line Range", "Rep Posted", "When Reported", "Ticket", "Description", "Update"];
// create ActiveWidgets data model - text-based table
var table = new Active.Text.Table;
// provide data URL - plain text comma-separated file
table.setURL("outages.txt");
// create javascript object
var obj = new Active.Controls.Grid;
obj.setModel("row", new Active.Rows.Page);
obj.setStatusProperty("code", "loading");
var defaultResponse = table.response;
//begin table response
table.response = function(data){
defaultResponse.call(table, data);
Datalen=table.getCount();
//load CSV and convert to array
for(var x=0; x< Datalen; x++) {
GlobData.push([table.getText( x, 0), table.getText( x, 1), table.getText( x, 2), table.getText( x, 3), table.getText( x, 4), table.getText( x, 5)]);
}
myData = GlobData ;
restot = Datalen ;
obj.setRowProperty("count", Datalen);
obj.setColumnProperty("count", 6);
obj.getDataText = function(i, j){return myData[i][j]};
obj.setDataText = function(value, i, j){myData[i][j] = value};
obj.setColumnProperty("text", function(i){return myColumns[i]});
//obj.setProperty("row/pageSize", 10);
// SET TIMEOUT ( )
window.setTimeout(function(){
obj.setStatusProperty("code", "");
resfilter = Datalen;
document.getElementById('result').innerHTML = "<b>Number of matches : "+resfilter+" of: " + restot +"</b>";
goToPage(0);
}, 0); //(end of TIMEOUT)
} //(end of tableresponse method)
// start asyncronous data retrieval
table.request();
function populateListBox() {
for(var c=0; c<myColumns.length; c++) {
document.write("<option value="+c+">"+myColumns[c]+"</option>");
}
document.write("<option value= myColumns.length>All Columns</option>");
}
function ReadThisListBox(){
document.write("<option value=0>Begin With</option>");
document.write("<option value=1>Contains</option>");
}
//*********************************************
function FilterGrid() {
myData =[];
obj.setStatusProperty("code", "loading");
obj.refresh();
var colToBeSearched = document.forms['gridSearchForm'].colSearchName.value;
var WhereToBeSearched = document.forms['gridSearchForm'].BeginContains.value;
var toSearch = inputval;
var res = 0;
if(colToBeSearched < myColumns.length){
if(WhereToBeSearched == 0 ) {
for(var x=0; x<GlobData.length; x++) {
if ( GlobData[ x ][ colToBeSearched ].toUpperCase().substr(0, toSearch.length) == toSearch.toUpperCase().substr(0, toSearch.length) ) {
myData.push(GlobData[x]);
res++;
}
}
}
if(WhereToBeSearched ==1){
for(var x=0; x<GlobData.length; x++) {
if((GlobData[x][colToBeSearched].toUpperCase().indexOf(toSearch.toUpperCase())) >= 0) {
myData.push(GlobData[x]);
res++;
}
}
}
}
else {
if(WhereToBeSearched == 0 ) {
for(var x=0; x<GlobData.length; x++) {
for(var y=0; y<GlobData[x].length; y++) {
if ( GlobData[ x ][ y ].toUpperCase().substr(0, toSearch.length) == toSearch.toUpperCase().substr(0, toSearch.length) ) {
myData.push(GlobData[x]);
res++;
break;
}
}
}
}
if(WhereToBeSearched ==1){
for(var x=0; x<GlobData.length; x++) {
for(var y=0; y<GlobData[x].length; y++) {
if((GlobData[x][y].toUpperCase().indexOf(toSearch.toUpperCase())) >= 0) {
myData.push(GlobData[x]);
res++;
break;
}
}
}
}
}
obj.setCellLink("javascript:void(1);", 1);
obj.setCellTemplate(new AW.Templates.Link, 1); // and template
obj.onCellClicked = function(event, col, row){if (col==1 ) alert( this.getCellText(col, row));};
obj.setModel("row", new Active.Rows.Page);
if(res>0){
resfilter = res;
obj.setRowProperty("count", res);
}
else{
resfilter = 0;
myData = [[" NOT FOUND", " NOT FOUND", " NOT FOUND", " NOT FOUND", " NOT FOUND", " NOT FOUND"]];
obj.setRowProperty("count", 1);
}
obj.getDataText = function(i, j){return myData[i][j]};
obj.setDataText = function(value, i, j){myData[i][j] = value};
window.setTimeout(function(){
obj.setStatusProperty("code", "");
goToPage(0);
document.getElementById('result').innerHTML = "<b>Number of matches : "+resfilter+" of: " + restot +"</b>";
}, 0);
}
///***************************************
</script>
</head>
<body>
<!-- top page control buttons -->
<script>
// write grid html to the page
document.write(obj);
</script>
<script>
<!-- First -->
var firstbutton = new AW.UI.Button;
firstbutton.setControlText("First");
<!-- Previous -->
var previousbutton = new AW.UI.Button;
previousbutton.setControlText("Previous");
<!-- Next -->
var nextbutton = new AW.UI.Button;
nextbutton.setControlText("Next");
<!-- Last -->
var lastbutton = new AW.UI.Button;
lastbutton.setControlText("Last");
</script>
<script>
<!-- First -->
document.write(firstbutton);
firstbutton.onClick = function(){
goToPage(-Infinity); }
<!-- Previous -->
document.write(previousbutton);
previousbutton.onClick = function(){
goToPage(-1); }
</script>
<!-- bottom page control buttons -->
<span id='pageLabel'></span>
<script>
<!-- Next -->
document.write(nextbutton);
nextbutton.onClick = function(){
goToPage(1); }
<!-- Last -->
document.write(lastbutton);
lastbutton.onClick = function(){
goToPage(Infinity); }
</script>
<script>
function GETINPUTVAL(e){
inputval = e ;
FilterGrid();
}
function goToPage(delta){
obj.setProperty("row/pageSize", 20);
var count = obj.getProperty("row/pageCount");
var number = obj.getProperty("row/pageNumber");
number += delta;
if (number < 0) {number = 0}
if (number > count-1) {number = count-1}
document.getElementById('pageLabel').innerHTML = "Page " + (number + 1) + " of " + count + " ";
obj.setProperty("row/pageNumber", number);
obj.refresh();
}
</script>
<form name=gridSearchForm >
<select name=colSearchName>
<script>
populateListBox();
</script>
</select>
<select name=BeginContains>
<script>
ReadThisListBox();
</script>
</select>
<input id="autocompleteinput" type=text name=keyword onKeyUp="GETINPUTVAL(this.value);//event.returnValue = event.keyCode;">
</form>
<div id=result>
</div>
<script>
document.getElementById('result').innerHTML = "<b>Number of matches : "+resfilter+" OF: " + restot +"</b>";
</script>
<br>
<br>
</body>
</html>
obj.onCellClicked = function(event, col, row) {
alert("row: " + row + " - col: " + col + " - val: " + this.getCellText(col, row));
}
This topic is archived.