Problem with column headers' sorting
Hi all,
I'm having problems with column headers sorting the data. I'm not overriding any sort functionality in my code, and the behaviour I'm getting is the following: if I click the header once, it sorts 'ascending'. I keep clicking it, and it never switches to 'descending'. But, for some reason I couldn't identify precisely yet (it happens after drag & dropping columns, mainly playing with the display), at some point the header click won't sort at all. Also, in a different installation (with the same running code, maybe different data?) the header 'clicks' *never* sort.
An additional note: surfing the forums I applied a patch you suggested to 'Active.Controls.Grid':
http://www.activewidgets.com/javascript.forum.177.10/best-way-to-do.html
hoping that it could solve my problem, but it didn't.
Here's a code sample... could someone copy it into an html file in the same dir where 'runtime' is, and tell me what you see? And any suggestion why it's working that way?
Thanks!
/*********************************** SAMPLE *********/
<html>
<head>
<base target=doc>
<link href="runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<link rel="stylesheet" type="text/css" href="standard.css" title="style1">
<script src="runtime/lib/grid.js"></script>
<script src="js/customizeSearch.js"></script>
<script src="js/myTemplates.js"></script>
<script src="js/resizeGrid.js"></script>
<SCRIPT src="js/tools.js"></SCRIPT>
<style>
.active-selection-true, .active-selection-true .active-row-cell {
color:gold!important;
background-color: #906060!important;
}
.active-grid-row.gecko, .active-box-normal.gecko {
overflow-y: visible;
}
.active-templates-header .active-box-normal {background-color: gold;}
.active-templates-header .active-box-item {background-color: gold;}
.active-controls-grid {height: 250px; font: menu;}
#maingrid .active-column-0 {width: 50px; text-align: center; vertical-align: middle;}
#maingrid .active-column-1 {width: 40px; text-align: center; vertical-align: middle;}
#maingrid .active-column-2 {width: 50px; text-align: left; vertical-align: middle;}
#maingrid .active-column-3 {width: 80px; text-align: center; vertical-align: middle;}
#maingrid .active-column-4 {width: 80px; text-align: left; vertical-align: middle;}
#maingrid .active-column-5 {width: 80px; text-align: center; vertical-align: middle;}
#maingrid .active-column-6 {width: 80px; text-align: left; vertical-align: middle;}
#maingrid .active-column-7 {width: 200px; text-align: left; vertical-align: middle;}
#maingrid .active-column-8 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-9 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-10 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-11 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-12 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-13 {width: 0px; text-align: center; vertical-align: middle;}
#maingrid .active-column-14 {width: 0px; text-align: center; vertical-align: middle;}
#maingrid .active-column-15 {width: 0px; text-align: center; vertical-align: middle;}
#maingrid .active-column-16 {width: 0px; text-align: center; vertical-align: middle;}
#maingrid .active-column-17 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-18 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-19 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-20 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-21 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-22 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-23 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-24 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-25 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-26 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-27 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-28 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-29 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-30 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-31 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-32 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-33 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-34 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-35 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-36 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-37 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-38 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-39 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-40 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-41 {width: 0px; text-align: center; vertical-align: middle;}
#maingrid .active-column-42 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-43 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-grid-column {border-right: 1px solid threedlightshadow;}
#maingrid .active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-templates-input {
overflow: hidden;
height: 100%;
padding: 0px 5px;
margin: -1px 0px;
border: 1px solid #666;
vertical-align: middle;
font: menu;
line-height: 1.4em;
}
.active-templates-input.gecko {
display: block;
margin: 0px;
}
.active-input-checkbox {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0px 5px;
margin: 0px 0px 1px 0px;
vertical-align: middle;
}
</style>
</head>
<body onload="adjustHeight()" style="margin: 5px;">
<form name="results" target="doc" action="index.aspx?context=zipfromsearch" method="post">
<div id="scroll">
<table style="height:90%;width:100%;table-layout: fixed;" cellspacing=0 cellpadding=0>
<tr height="100%">
<td>
<script>
/*3 testing rows*/
var myData = [["<input type='checkbox' name='chk_0' value='row1'>","3","19968","09/01/2006","Florida","<a style='cursor: pointer' href='index.aspx?context=showhits&idx=0'><span title='Display this document in text format'><img src='images/text_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=sendresultsfile&idx=0&ext=doc'><span title='Display this document inside the browser'><img src='images/inline_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=sendresultsfilenative&idx=0&ext=doc'><span title='Display this document in its native viewer'><img src='images/native_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=retrieve&maxsize=200000&idx=0&reset=y'><span title='Display this document in its hits viewer'><img src='images/hits_viewer.gif' border='0'></span></a>","Tampa","floridatampa3.doc","Federico Halperin","","","c:\\Biztek\\Projects\\WebSearch3\\SampleDocs","Document Properties Title: florida tampa #1 Author: Federico Halperin Template","100","","64","09/01/2006","","C:\\Biztek\\Projects\\WebSearch3\\SampleDocs\\floridatampa3.doc","","florida tampa #1","Microsoft Office Word","BIZTEK","2005/09/03 19:27:00","2006/01/09 07:09:00","Federico Halperin","3","Normal.dot","00:01:00","","","","","","","","","","","","","100","","","doc"],["<input type='checkbox' name='chk_1' value='row1'>","3","24064","09/01/2006","Florida","<a style='cursor: pointer' href='index.aspx?context=showhits&idx=1'><span title='Display this document in text format'><img src='images/text_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=sendresultsfile&idx=1&ext=doc'><span title='Display this document inside the browser'><img src='images/inline_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=sendresultsfilenative&idx=1&ext=doc'><span title='Display this document in its native viewer'><img src='images/native_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=retrieve&maxsize=200000&idx=1&reset=y'><span title='Display this document in its hits viewer'><img src='images/hits_viewer.gif' border='0'></span></a>","Tampa","floridatampa2.doc","Rich Bryant","","","c:\\Biztek\\Projects\\WebSearch3\\SampleDocs","Document Properties Title: florida tampa #1 Author: Rich Bryant Template: Norm","100","","64","03/09/2005","","C:\\Biztek\\Projects\\WebSearch3\\SampleDocs\\floridatampa2.doc","","florida tampa #1","Microsoft Office Word","BIZTEK","2005/09/03 20:26:00","2005/09/03 20:26:00","Rich Bryant","2","Normal.dot","00:00:00","","","","","","","","","","","","","100","","","doc"],["<input type='checkbox' name='chk_2' value='row1'>","3","24064","09/01/2006","Florida","<a style='cursor: pointer' href='index.aspx?context=showhits&idx=2'><span title='Display this document in text format'><img src='images/text_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=sendresultsfile&idx=2&ext=doc'><span title='Display this document inside the browser'><img src='images/inline_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=sendresultsfilenative&idx=2&ext=doc'><span title='Display this document in its native viewer'><img src='images/native_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=retrieve&maxsize=200000&idx=2&reset=y'><span title='Display this document in its hits viewer'><img src='images/hits_viewer.gif' border='0'></span></a>","Tampa","floridatampa1.doc","Rich Bryant","","","c:\\Biztek\\Projects\\WebSearch3\\SampleDocs","Document Properties Title: florida tampa #1 Author: Rich Bryant Template: Norm","100","","64","03/09/2005","","C:\\Biztek\\Projects\\WebSearch3\\SampleDocs\\floridatampa1.doc","","florida tampa #1","Microsoft Office Word","BIZTEK","2005/09/03 20:23:00","2005/09/03 20:26:00","Rich Bryant","1","Normal.dot","00:03:00","","","","","","","","","","","","","100","","","doc"]];
/*all the columns. some of them are hidden (width=0) from the display (on purpose), because the interface provides a customizer*/
var myColumns = ["Select", "Hits", "Size", "Date Added", "State", "Actions", "City", "File Name", "Author", "Case", "Client", "System File Location", "First 80 Chars", "Score", "Phrase Count", "Word Count", "Date Published", "CreationDate", "Filename", "Producer", "Title", "Application", "Company", "Created", "Last_saved", "Last_saved_by", "Revision_number", "Template", "Total_editing_time", "BatchNum", "Claim", "FromDate", "MemberID", "PatientAccount", "PgCounter", "SSN", "TifCounter", "TINNum", "TotalCharge", "teta", "estupid", "Score", "DOC_Score", "Band_Name"];
var obj = new Active.Controls.Grid;
obj.setId("maingrid");
obj.setRowProperty("count", myData.length);
obj.setColumnProperty("count", myColumns.length);
obj.setRowHeaderWidth("0px");
obj.setColumnHeaderHeight("20px");
obj.setSelectionProperty("multiple", false);
/*setting the image template to the File Name column*/
obj.setColumnTemplate(new Active.Templates.Image, 7);
Object.prototype.clone = clone;
var indices = [];
for(i=0; i<obj.getColumnProperty("count");i++) indices[i] = i;
obj.setColumnTexts(myColumns);
obj.setColumnValues(indices);
obj.getDataText = function(i, j){return myData[i][j]};
obj.setDataText = function(value, i, j){myData[i][j] = value};
obj.setDataProperty("image", function(i, j){return myData[i][44]});
/*the patch suggested in
http://www.activewidgets.com/javascript.forum.177.10/best-way-to-do.html */
Active.Controls.Grid.patch = function(){
var obj = this.prototype;
obj.sort = function(index){
var a = {}, direction = 'ascending';
var rows = this.getRowProperty('values');
if (this.getSortProperty('index') == index) {
if (this.getSortProperty('direction') == 'ascending') {direction = 'descending'}
rows.reverse();
}
else {
for (var i=0; i<rows.length; i++) {
var text = '' + this.getDataProperty('value', rows[i], index);
var value = Number(text.replace(/[ ,%$]/gi, '').replace(/((.*))/, '-$1'));
a[rows[i]] = isNaN(value) ? text.toLowerCase() + ' ' : value;
}
rows.sort(function(x,y){return a[x] > a[y] ? 1 : (a[x] == a[y] ? 0 : -1)});
}
this.setRowProperty('values', rows);
this.setSortProperty('index', index);
this.setSortProperty('direction', direction);
};
};
Active.Controls.Grid.patch();
/*end of patch*/
/**** Column dragging ************/
var header = obj.getTemplate("top/item");
var mousedown = false;
var startX;
var startY;
var startElement;
var startElementChild;
var dragStart = function(event) {
startX=event.screenX;
startY=event.screenY;
startElementChild=event.srcElement;
startElement=startElementChild.parentNode;
startElement.width=startElement.offsetWidth;
startElement.height=startElement.offsetHeight;
if (startElement.height==0) startElement.parent.offsetHeight;
var offsetObj = startElement;
startElement.x = 0;
startElement.y = 0;
while(offsetObj.offsetParent.tagName!='BODY') {
startElement.x += offsetObj.offsetLeft
startElement.y += offsetObj.offsetTop
offsetObj = offsetObj.offsetParent
}
mousedown = true;
}
var drag = function(event) {
var x=event.screenX;
var y=event.screenY;
var dragHeaderDiv = document.getElementById('dragHeaderDiv');
if(dragHeaderDiv) dragHeaderDiv.style.left = x - 230;
else if(mousedown && (x<startElement.x || x>(startElement.x+startElement.width))) {
var dragHeaderDiv = startElement.cloneNode(true)
dragHeaderDiv.id = "dragHeaderDiv";
dragHeaderDiv.className = dragHeaderDiv.className.replace(RegExp("sort-(ascending|descending)", "g"), "sort-none");
dragHeaderDiv.className += "active-header-over";
dragHeaderDiv.setAttribute("onmouseleave","")
dragHeaderDiv.setAttribute("onmouseenter","")
dragHeaderDiv.style.position = "absolute";
dragHeaderDiv.style.left = x - 230;
dragHeaderDiv.style.top = startElement.y;
dragHeaderDiv.style.width = startElement.width;
dragHeaderDiv.style.height = startElement.height;
dragHeaderDiv.style.zIndex = 10000;
dragHeaderDiv.style.MozOpacity = 0.7;
dragHeaderDiv.style.filter = "alpha(opacity=70)"
startElement.parentNode.appendChild(dragHeaderDiv);
}
}
var getIndexFromId = function(id) {
var colonPos = id.indexOf(":");
var slashPos = id.indexOf("/");
var index = id.substring(colonPos+1);
if(slashPos!=-1) index = id.substring(0,slashPos);
var indices = obj.getColumnValues();
for(i=0;i<indices.length;i++) if(indices[i]==Number(index)) {index=i; break;}
return index;
}
var getHeaderIndexAt = function(x) {
var headersDiv = document.getElementById(obj.getId()+".layout/top");
var offsetObj = headersDiv;
var offsetX = 0;
while(offsetObj.offsetParent.tagName!='BODY') {
offsetX += offsetObj.offsetLeft
offsetObj = offsetObj.offsetParent
}
var headers = headersDiv.childNodes;
var column = 0;
for(i=0;i<headers.length;i++) {
if(x>=offsetX && x<(headers[i].offsetWidth+offsetX)) { column=i; break; }
offsetX+=headers[i].offsetWidth;
}
return column;
}
var dragEnd = function(event) {
mousedown = false;
var dragHeaderDiv = document.getElementById('dragHeaderDiv');
if(dragHeaderDiv) {
startElement.parentNode.removeChild(dragHeaderDiv);
var x=event.screenX;
var dragIndex = getIndexFromId(startElement.id);
var dropIndex = getHeaderIndexAt(x);
var indices = obj.getColumnValues();
dropIndex = dropIndex>(indices.length-1)?(indices.length-1):dropIndex;
var move = false;
var dragValue = indices[dragIndex];
if(dragIndex<dropIndex) for(i=dragIndex;i<dropIndex;i++) indices[i]=indices[i+1];
else for(i=dragIndex;i>dropIndex;i--) indices[i]=indices[i-1];
indices[dropIndex] = dragValue;
obj.setColumnValues(indices);
obj.refresh();
}
else if(event.srcElement==startElementChild) {
header.setClass("header", "pressed");
window.status = "Sorting...";
header.timeout(function(){header.action("columnSort")});
}
savePreferences(obj);
}
/*custom function to save display preferences, working 100%*/
function savePreferences(obj) {
window.status = "Saving preferences...";
var headers = obj.getColumnTexts();
var preferences = "";
currentColumns = [];
reverse = [];
for(i=0; i<obj.getColumnCount();i++) {
currentColumns[i] = {text:'',width:'',value:''};
currentColumns[i].text = obj.getColumnText(obj.getColumnValue(i));
currentColumns[i].value = obj.getColumnValue(i);
reverse[currentColumns[i].value]=i; //mapping from value back to original index for css
}
var ss = window.document.styleSheets[window.document.styleSheets.length-1];
var selector = "#" + obj.getId() + " .active-column-";
var j=0;
for(i=0; i<ss.rules.length;i++)
{
if(ss.rules[i].selectorText == (selector+j))
{
currentColumns[reverse[j]].width = ss.rules[i].style.width.substring(0,ss.rules[i].style.width.length-2);
j++;
}
}
for(i=0; i<obj.getColumnCount();i++) {
if(currentColumns[i].width!=0)
preferences+=currentColumns[i].text + "~" + currentColumns[i].width + "|||";
}
parent.frames['prefs'].document.forms['prefsform'].prefstring.value = preferences;
parent.frames['prefs'].document.forms['prefsform'].submit();
window.status = "Preferences saved.";
}
header.setEvent("onmousedown", dragStart);
header.setEvent("onmouseup", dragEnd);
obj.setEvent("onmouseup", dragEnd);
obj.setEvent("onmousemove", drag);
obj.setStyle("height", "100%");
obj.setStyle("width", "100%");
document.write(obj);
</script>
</td>
</tr>
</table>
</div>
</form>
<script language="javascript">
parent.doc.window.location='about:blank'
</script>
</body>
</html>
/***************************** END OF SAMPLE *********/
I'm having problems with column headers sorting the data. I'm not overriding any sort functionality in my code, and the behaviour I'm getting is the following: if I click the header once, it sorts 'ascending'. I keep clicking it, and it never switches to 'descending'. But, for some reason I couldn't identify precisely yet (it happens after drag & dropping columns, mainly playing with the display), at some point the header click won't sort at all. Also, in a different installation (with the same running code, maybe different data?) the header 'clicks' *never* sort.
An additional note: surfing the forums I applied a patch you suggested to 'Active.Controls.Grid':
http://www.activewidgets.com/javascript.forum.177.10/best-way-to-do.html
hoping that it could solve my problem, but it didn't.
Here's a code sample... could someone copy it into an html file in the same dir where 'runtime' is, and tell me what you see? And any suggestion why it's working that way?
Thanks!
/*********************************** SAMPLE *********/
<html>
<head>
<base target=doc>
<link href="runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<link rel="stylesheet" type="text/css" href="standard.css" title="style1">
<script src="runtime/lib/grid.js"></script>
<script src="js/customizeSearch.js"></script>
<script src="js/myTemplates.js"></script>
<script src="js/resizeGrid.js"></script>
<SCRIPT src="js/tools.js"></SCRIPT>
<style>
.active-selection-true, .active-selection-true .active-row-cell {
color:gold!important;
background-color: #906060!important;
}
.active-grid-row.gecko, .active-box-normal.gecko {
overflow-y: visible;
}
.active-templates-header .active-box-normal {background-color: gold;}
.active-templates-header .active-box-item {background-color: gold;}
.active-controls-grid {height: 250px; font: menu;}
#maingrid .active-column-0 {width: 50px; text-align: center; vertical-align: middle;}
#maingrid .active-column-1 {width: 40px; text-align: center; vertical-align: middle;}
#maingrid .active-column-2 {width: 50px; text-align: left; vertical-align: middle;}
#maingrid .active-column-3 {width: 80px; text-align: center; vertical-align: middle;}
#maingrid .active-column-4 {width: 80px; text-align: left; vertical-align: middle;}
#maingrid .active-column-5 {width: 80px; text-align: center; vertical-align: middle;}
#maingrid .active-column-6 {width: 80px; text-align: left; vertical-align: middle;}
#maingrid .active-column-7 {width: 200px; text-align: left; vertical-align: middle;}
#maingrid .active-column-8 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-9 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-10 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-11 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-12 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-13 {width: 0px; text-align: center; vertical-align: middle;}
#maingrid .active-column-14 {width: 0px; text-align: center; vertical-align: middle;}
#maingrid .active-column-15 {width: 0px; text-align: center; vertical-align: middle;}
#maingrid .active-column-16 {width: 0px; text-align: center; vertical-align: middle;}
#maingrid .active-column-17 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-18 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-19 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-20 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-21 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-22 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-23 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-24 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-25 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-26 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-27 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-28 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-29 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-30 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-31 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-32 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-33 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-34 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-35 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-36 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-37 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-38 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-39 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-40 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-41 {width: 0px; text-align: center; vertical-align: middle;}
#maingrid .active-column-42 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-column-43 {width: 0px; text-align: left; vertical-align: middle;}
#maingrid .active-grid-column {border-right: 1px solid threedlightshadow;}
#maingrid .active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-templates-input {
overflow: hidden;
height: 100%;
padding: 0px 5px;
margin: -1px 0px;
border: 1px solid #666;
vertical-align: middle;
font: menu;
line-height: 1.4em;
}
.active-templates-input.gecko {
display: block;
margin: 0px;
}
.active-input-checkbox {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0px 5px;
margin: 0px 0px 1px 0px;
vertical-align: middle;
}
</style>
</head>
<body onload="adjustHeight()" style="margin: 5px;">
<form name="results" target="doc" action="index.aspx?context=zipfromsearch" method="post">
<div id="scroll">
<table style="height:90%;width:100%;table-layout: fixed;" cellspacing=0 cellpadding=0>
<tr height="100%">
<td>
<script>
/*3 testing rows*/
var myData = [["<input type='checkbox' name='chk_0' value='row1'>","3","19968","09/01/2006","Florida","<a style='cursor: pointer' href='index.aspx?context=showhits&idx=0'><span title='Display this document in text format'><img src='images/text_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=sendresultsfile&idx=0&ext=doc'><span title='Display this document inside the browser'><img src='images/inline_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=sendresultsfilenative&idx=0&ext=doc'><span title='Display this document in its native viewer'><img src='images/native_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=retrieve&maxsize=200000&idx=0&reset=y'><span title='Display this document in its hits viewer'><img src='images/hits_viewer.gif' border='0'></span></a>","Tampa","floridatampa3.doc","Federico Halperin","","","c:\\Biztek\\Projects\\WebSearch3\\SampleDocs","Document Properties Title: florida tampa #1 Author: Federico Halperin Template","100","","64","09/01/2006","","C:\\Biztek\\Projects\\WebSearch3\\SampleDocs\\floridatampa3.doc","","florida tampa #1","Microsoft Office Word","BIZTEK","2005/09/03 19:27:00","2006/01/09 07:09:00","Federico Halperin","3","Normal.dot","00:01:00","","","","","","","","","","","","","100","","","doc"],["<input type='checkbox' name='chk_1' value='row1'>","3","24064","09/01/2006","Florida","<a style='cursor: pointer' href='index.aspx?context=showhits&idx=1'><span title='Display this document in text format'><img src='images/text_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=sendresultsfile&idx=1&ext=doc'><span title='Display this document inside the browser'><img src='images/inline_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=sendresultsfilenative&idx=1&ext=doc'><span title='Display this document in its native viewer'><img src='images/native_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=retrieve&maxsize=200000&idx=1&reset=y'><span title='Display this document in its hits viewer'><img src='images/hits_viewer.gif' border='0'></span></a>","Tampa","floridatampa2.doc","Rich Bryant","","","c:\\Biztek\\Projects\\WebSearch3\\SampleDocs","Document Properties Title: florida tampa #1 Author: Rich Bryant Template: Norm","100","","64","03/09/2005","","C:\\Biztek\\Projects\\WebSearch3\\SampleDocs\\floridatampa2.doc","","florida tampa #1","Microsoft Office Word","BIZTEK","2005/09/03 20:26:00","2005/09/03 20:26:00","Rich Bryant","2","Normal.dot","00:00:00","","","","","","","","","","","","","100","","","doc"],["<input type='checkbox' name='chk_2' value='row1'>","3","24064","09/01/2006","Florida","<a style='cursor: pointer' href='index.aspx?context=showhits&idx=2'><span title='Display this document in text format'><img src='images/text_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=sendresultsfile&idx=2&ext=doc'><span title='Display this document inside the browser'><img src='images/inline_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=sendresultsfilenative&idx=2&ext=doc'><span title='Display this document in its native viewer'><img src='images/native_viewer.gif' border='0'></span></a><a style='cursor: pointer' href='index.aspx?context=retrieve&maxsize=200000&idx=2&reset=y'><span title='Display this document in its hits viewer'><img src='images/hits_viewer.gif' border='0'></span></a>","Tampa","floridatampa1.doc","Rich Bryant","","","c:\\Biztek\\Projects\\WebSearch3\\SampleDocs","Document Properties Title: florida tampa #1 Author: Rich Bryant Template: Norm","100","","64","03/09/2005","","C:\\Biztek\\Projects\\WebSearch3\\SampleDocs\\floridatampa1.doc","","florida tampa #1","Microsoft Office Word","BIZTEK","2005/09/03 20:23:00","2005/09/03 20:26:00","Rich Bryant","1","Normal.dot","00:03:00","","","","","","","","","","","","","100","","","doc"]];
/*all the columns. some of them are hidden (width=0) from the display (on purpose), because the interface provides a customizer*/
var myColumns = ["Select", "Hits", "Size", "Date Added", "State", "Actions", "City", "File Name", "Author", "Case", "Client", "System File Location", "First 80 Chars", "Score", "Phrase Count", "Word Count", "Date Published", "CreationDate", "Filename", "Producer", "Title", "Application", "Company", "Created", "Last_saved", "Last_saved_by", "Revision_number", "Template", "Total_editing_time", "BatchNum", "Claim", "FromDate", "MemberID", "PatientAccount", "PgCounter", "SSN", "TifCounter", "TINNum", "TotalCharge", "teta", "estupid", "Score", "DOC_Score", "Band_Name"];
var obj = new Active.Controls.Grid;
obj.setId("maingrid");
obj.setRowProperty("count", myData.length);
obj.setColumnProperty("count", myColumns.length);
obj.setRowHeaderWidth("0px");
obj.setColumnHeaderHeight("20px");
obj.setSelectionProperty("multiple", false);
/*setting the image template to the File Name column*/
obj.setColumnTemplate(new Active.Templates.Image, 7);
Object.prototype.clone = clone;
var indices = [];
for(i=0; i<obj.getColumnProperty("count");i++) indices[i] = i;
obj.setColumnTexts(myColumns);
obj.setColumnValues(indices);
obj.getDataText = function(i, j){return myData[i][j]};
obj.setDataText = function(value, i, j){myData[i][j] = value};
obj.setDataProperty("image", function(i, j){return myData[i][44]});
/*the patch suggested in
http://www.activewidgets.com/javascript.forum.177.10/best-way-to-do.html */
Active.Controls.Grid.patch = function(){
var obj = this.prototype;
obj.sort = function(index){
var a = {}, direction = 'ascending';
var rows = this.getRowProperty('values');
if (this.getSortProperty('index') == index) {
if (this.getSortProperty('direction') == 'ascending') {direction = 'descending'}
rows.reverse();
}
else {
for (var i=0; i<rows.length; i++) {
var text = '' + this.getDataProperty('value', rows[i], index);
var value = Number(text.replace(/[ ,%$]/gi, '').replace(/((.*))/, '-$1'));
a[rows[i]] = isNaN(value) ? text.toLowerCase() + ' ' : value;
}
rows.sort(function(x,y){return a[x] > a[y] ? 1 : (a[x] == a[y] ? 0 : -1)});
}
this.setRowProperty('values', rows);
this.setSortProperty('index', index);
this.setSortProperty('direction', direction);
};
};
Active.Controls.Grid.patch();
/*end of patch*/
/**** Column dragging ************/
var header = obj.getTemplate("top/item");
var mousedown = false;
var startX;
var startY;
var startElement;
var startElementChild;
var dragStart = function(event) {
startX=event.screenX;
startY=event.screenY;
startElementChild=event.srcElement;
startElement=startElementChild.parentNode;
startElement.width=startElement.offsetWidth;
startElement.height=startElement.offsetHeight;
if (startElement.height==0) startElement.parent.offsetHeight;
var offsetObj = startElement;
startElement.x = 0;
startElement.y = 0;
while(offsetObj.offsetParent.tagName!='BODY') {
startElement.x += offsetObj.offsetLeft
startElement.y += offsetObj.offsetTop
offsetObj = offsetObj.offsetParent
}
mousedown = true;
}
var drag = function(event) {
var x=event.screenX;
var y=event.screenY;
var dragHeaderDiv = document.getElementById('dragHeaderDiv');
if(dragHeaderDiv) dragHeaderDiv.style.left = x - 230;
else if(mousedown && (x<startElement.x || x>(startElement.x+startElement.width))) {
var dragHeaderDiv = startElement.cloneNode(true)
dragHeaderDiv.id = "dragHeaderDiv";
dragHeaderDiv.className = dragHeaderDiv.className.replace(RegExp("sort-(ascending|descending)", "g"), "sort-none");
dragHeaderDiv.className += "active-header-over";
dragHeaderDiv.setAttribute("onmouseleave","")
dragHeaderDiv.setAttribute("onmouseenter","")
dragHeaderDiv.style.position = "absolute";
dragHeaderDiv.style.left = x - 230;
dragHeaderDiv.style.top = startElement.y;
dragHeaderDiv.style.width = startElement.width;
dragHeaderDiv.style.height = startElement.height;
dragHeaderDiv.style.zIndex = 10000;
dragHeaderDiv.style.MozOpacity = 0.7;
dragHeaderDiv.style.filter = "alpha(opacity=70)"
startElement.parentNode.appendChild(dragHeaderDiv);
}
}
var getIndexFromId = function(id) {
var colonPos = id.indexOf(":");
var slashPos = id.indexOf("/");
var index = id.substring(colonPos+1);
if(slashPos!=-1) index = id.substring(0,slashPos);
var indices = obj.getColumnValues();
for(i=0;i<indices.length;i++) if(indices[i]==Number(index)) {index=i; break;}
return index;
}
var getHeaderIndexAt = function(x) {
var headersDiv = document.getElementById(obj.getId()+".layout/top");
var offsetObj = headersDiv;
var offsetX = 0;
while(offsetObj.offsetParent.tagName!='BODY') {
offsetX += offsetObj.offsetLeft
offsetObj = offsetObj.offsetParent
}
var headers = headersDiv.childNodes;
var column = 0;
for(i=0;i<headers.length;i++) {
if(x>=offsetX && x<(headers[i].offsetWidth+offsetX)) { column=i; break; }
offsetX+=headers[i].offsetWidth;
}
return column;
}
var dragEnd = function(event) {
mousedown = false;
var dragHeaderDiv = document.getElementById('dragHeaderDiv');
if(dragHeaderDiv) {
startElement.parentNode.removeChild(dragHeaderDiv);
var x=event.screenX;
var dragIndex = getIndexFromId(startElement.id);
var dropIndex = getHeaderIndexAt(x);
var indices = obj.getColumnValues();
dropIndex = dropIndex>(indices.length-1)?(indices.length-1):dropIndex;
var move = false;
var dragValue = indices[dragIndex];
if(dragIndex<dropIndex) for(i=dragIndex;i<dropIndex;i++) indices[i]=indices[i+1];
else for(i=dragIndex;i>dropIndex;i--) indices[i]=indices[i-1];
indices[dropIndex] = dragValue;
obj.setColumnValues(indices);
obj.refresh();
}
else if(event.srcElement==startElementChild) {
header.setClass("header", "pressed");
window.status = "Sorting...";
header.timeout(function(){header.action("columnSort")});
}
savePreferences(obj);
}
/*custom function to save display preferences, working 100%*/
function savePreferences(obj) {
window.status = "Saving preferences...";
var headers = obj.getColumnTexts();
var preferences = "";
currentColumns = [];
reverse = [];
for(i=0; i<obj.getColumnCount();i++) {
currentColumns[i] = {text:'',width:'',value:''};
currentColumns[i].text = obj.getColumnText(obj.getColumnValue(i));
currentColumns[i].value = obj.getColumnValue(i);
reverse[currentColumns[i].value]=i; //mapping from value back to original index for css
}
var ss = window.document.styleSheets[window.document.styleSheets.length-1];
var selector = "#" + obj.getId() + " .active-column-";
var j=0;
for(i=0; i<ss.rules.length;i++)
{
if(ss.rules[i].selectorText == (selector+j))
{
currentColumns[reverse[j]].width = ss.rules[i].style.width.substring(0,ss.rules[i].style.width.length-2);
j++;
}
}
for(i=0; i<obj.getColumnCount();i++) {
if(currentColumns[i].width!=0)
preferences+=currentColumns[i].text + "~" + currentColumns[i].width + "|||";
}
parent.frames['prefs'].document.forms['prefsform'].prefstring.value = preferences;
parent.frames['prefs'].document.forms['prefsform'].submit();
window.status = "Preferences saved.";
}
header.setEvent("onmousedown", dragStart);
header.setEvent("onmouseup", dragEnd);
obj.setEvent("onmouseup", dragEnd);
obj.setEvent("onmousemove", drag);
obj.setStyle("height", "100%");
obj.setStyle("width", "100%");
document.write(obj);
</script>
</td>
</tr>
</table>
</div>
</form>
<script language="javascript">
parent.doc.window.location='about:blank'
</script>
</body>
</html>
/***************************** END OF SAMPLE *********/
Federico Halperin
February 16,