yellow flextable overview features history todo @file multilevel.xsl << parameters >> << global variables >> << main template >> << head >> << css >> << script >> << dhtmltable object >> << constructor >> << other dhtml table methods >> << accessor methods >> << current detail row methods >> << column totals >> << draw and fill table >> << draw empty table >> << fill table >> << draw and fill scrolling table >> << table dhtml >> << dhtml table body filled >> << col headers filled >> << picklist items filled >> << landscape col headers filled >> << rows filled >> << subtable filled >> << col resizing div element >> << create and add col header html >> << create and add summary row html >> << footnote >> << fix data cell widths >> << put left pane html in left pane and adjust width of right pane >> << fix col header and sum row cell width >> << move col headers and sum cells into left pane >> << footnote (1 - 100 of 100 rows) >> << field formatting >> << col resizing methods >> << mouse down >> << mouse move >> << mouse up >> << left pane >> << right pane >> << row methods >> << fast print >> << support functions >> << navigation >> << go to subreport >> << sorting >> << fix col widths >> << multilevel >> << get multilevel data >> << show multilevel view >> << multilevel row methods >> << unsorted >> << general >> << body >> << report title >> << options >> << menubar >> << option items >> << capitalize >> << show column picklist >> << orientation >> << number of records to show >> << reset columns to defaults >> << pick non scrolling rows >> << customization scripts >> << the container for the DHTML table object >> << script to draw table >> << metadata >> << first page of data >> << create the table with one page of data >> << the rest of the data >> << create the table again >> << xsl for rowset data >> samples frame @file left.htm << head >> << body >> << checkboxes to choose detail >> multilevel xml samples main xml detail xml detail1 detail2 misc old version of highlight deprecated multicolumn sorting sorting - 2nd version debugging virtual list svtable.htm << head >> << body >> << source table >> << target table >> << script >> << copy rows >> deprecated htmldatalines fill table << fill master detail >> << fill portrait >> << fill landscape >> << fill footnote >> << navbar filters >> << left pane >> << copy rows into left pane html string >> << copy columns into left pane html string >> << wrap the left pane tr tags in a table tag >> << reset col attributes >> draw table << dhtml table body >> << col headers >> << picklist items >> << landscape col headers >> << rows >> << footer row for summaries >> << footnote and navbar >> << col resizing div element >> << navbar >> flextable stylesheet OLD << parameters >> << global variables >> << main template >> << head >> << css >> << script >> << dhtmltable object >> << constructor >> << other dhtml table methods >> << accessor methods >> << current detail row methods >> << column totals >> << draw and fill table >> << draw empty table >> << col resizing div element >> << fill table >> << draw and fill scrolling table >> << table dhtml >> << dhtml table body filled >> << col headers filled >> << picklist items filled >> << landscape col headers filled >> << rows filled >> << subtable filled >> << create and add col header html >> << create and add summary row html >> << footnote >> << fix data cell widths >> << put left pane html in left pane and adjust width of right pane >> << fix col header and sum row cell width >> << move col headers and sum cells into left pane >> << footnote (1 - 100 of 100 rows) >> << field formatting >> << col resizing methods >> << mouse down >> << mouse move >> << mouse up >> << left pane >> << right pane >> << row methods >> old version of highlight << fast print >> << support functions >> << navigation >> << go to subreport >> << sorting >> << fix col widths >> sorting - 2nd version multicolumn sorting << multilevel >> << get multilevel data >> deprecated << show multilevel view >> << multilevel row methods >> << unsorted >> << general >> functions still in development << body >> << report title >> << options >> << menubar >> << option items >> << capitalize >> << show column picklist >> << orientation >> << number of records to show >> << reset columns to defaults >> << pick non scrolling rows >> << customization scripts >> << the container for the DHTML table object >> << script to draw table >> << metadata >> << first page of data >> << create the table with one page of data >> << the rest of the data >> << create the table again >> << set non scrolling columns >> << enable nav buttons now that we have all the data >> << xsl for rowset data >> rowset WD xsl << stylesheet >> functions still in development multilevle.xsl: Produce a DHTML hierarchical table widget via XML + XSL. Features: Alternate row colors. Click a column header to sort. Resizable column (drag column edge). First page of data is displayed immediately while rest of xml data is loading. Child data is loaded asynchronously. Configure number of records to show. Automatic formatting of different types of data. May 2003: fixed for public release (some features of non hierarchical version removed) July 3 2001: moved client.xsl back into LEO format July 20 2001: finished column resizing, minor fixes @first <?xml version='1.0' encoding="ISO-8859-1"?> @first <xsl:stylesheet version="1.1" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> @first <xsl:output method="html" indent="no" encoding="iso-8859-1" /> @language html  << parameters >> << global variables >> << main template >> </xsl:stylesheet> @code  <xsl:param name="appPrefix" select="'QE'"/>  <xsl:param name="paged" select="'false'"/>  <xsl:param name="reportTitle" select="'Your Title Here'"/>  <xsl:param name="printReportTitle" select="'Summit Inquiry'"/>  <xsl:param name="titleFormat" select="'pagehead'"/>  <xsl:param name="orientation" select="'landscape'"/>  <xsl:param name="rowCount" select="'22'"/>  <xsl:param name="navigation" select="'true'"/>  <xsl:param name="popUp" select="'true'"/>  <xsl:param name="customization" select="'true'"/>  <xsl:param name="footnote" select="''"/>  <xsl:param name="numNonScrollingCols" select="'0'"/>  <xsl:param name="leftPanePixelWidth" select="'50'"/>  <xsl:param name="tableWidth" select="782"/> @code <xsl:variable name="rightPanePixelWidth"> <xsl:choose> <xsl:when test="$numNonScrollingCols != '0'"><xsl:value-of select="'770' - $leftPanePixelWidth"/></xsl:when> <xsl:otherwise><xsl:value-of select="'770'"/></xsl:otherwise> </xsl:choose> </xsl:variable>  <xsl:variable name="printReportTitlex"> <xsl:choose> <xsl:when test="$appPrefix = 'QE'">SUMMIT Inquiry Results (Fast Print)</xsl:when> <xsl:otherwise>Standard Report</xsl:otherwise> </xsl:choose> </xsl:variable>   <xsl:variable name="newRowCount"> <xsl:choose> <xsl:when test="$navigation = 'false'"> <xsl:value-of select="count(//rows/row)"/> </xsl:when> <xsl:otherwise> <xsl:value-of select="$rowCount"/> </xsl:otherwise> </xsl:choose> </xsl:variable> @code <xsl:template match="/"> <html> << head >> << body >> </html> </xsl:template> @code <head id="topw"> << css >> <xsl:text> </xsl:text> << script >> </head> @code <style type="text/css"> BODY {font-family:Arial,sans-serif; font-size:8pt; font-weight:100; margin-top:0; margin-left:6; margin-right:0} TD {font-family:Arial,sans-serif; font-size:8pt; font-weight:100;} SELECT {font-family:Arial,sans-serif; font-size:12px; font-weight:normal} OPTION {font-family:Arial,sans-serif; font-size:12px; font-weight:normal} TH {font-family:Arial,sans-serif; font-size:12px; font-weight:bold; text-align:left} BUTTON {font-size:14; font-weight:bold; width:30; text-align:center} INPUT {font-family:Arial; font-size:10pt;} a:link {text-decoration:underline;} a:visited {text-decoration:underline;} a:active {text-decoration:underline;} a:hover {text-decoration:underline;} .plusButton {font-family:Arial,sans-serif; font-size:8pt; font-weight:normal; width:16; height:6;color:black; background-color:gainsboro; border:1px solid gray; text-align:center;} .plusButtonHeader {width:20;} .plusButtonFooter {width:19;} .pagehead {color:#0C6EB0; font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:9pt; height:22px;} .pagehead2 {text-align:center;color:#0C6EB0; font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:11pt;} .printReportHeader {font-family:Arial,sans-serif; font-size:12pt; font-weight:bold; text-align:center; margin-bottom:5;} .colhead {color:white; padding-right:0; cursor:hand; background-color:#003366; height:12; text-align:left; font-weight:bold; border-top:1px solid white; border-right:1px solid white;} .colheadportrait {color:white; cursor:hand; background-color:slateblue; height:12; text-align:center; font-weight:bold; border-bottom:1px solid white;} .colheadsorted {color:white; padding-right:0; cursor:hand; background-color:blue; height:12; text-align:left; font-weight:bold; border-top:1px solid white; border-right:1px solid white;} .evenrow {background-color:#E9F2F2; cursor:hand; xline-height:17px;} .oddrow {background-color:#C9E5E7; cursor:hand; xline-height:17px;} .dialogtable {border:2px solid #000000;background-color:#E9F2F2;} .dialogrow {background-color:#C9E5E7; cursor:hand; xline-height:19px;} .dataTable {background-color:#FFFFFF} .datarow {background-color:lavender;cursor:hand;} .default {text-align:right;} .Text {text-transform:capitalize;} .Number {text-align:right;} .summaryRow {background-color:#7EBEBE; color:black; text-align:right; border-color:#7EBEBE;} .summaryItem {background-color:#7EBEBE; color:black; font-weight:700; font-size:7pt; height:26px; text-align:right;border-top:1px solid white;border-right:1px solid white;} .summaryItem2 {background-color:#7EBEBE; color:white; font-weight:700; font-size:7pt; text-align:right;border-bottom:1px solid white;} .highlightedRow{background-color:navy; color:white; cursor:hand} .navbutton {cursor:hand} .cellStylePortrait {text-align:right;text-transform:capitalize;border-right:1px solid white;border-bottom:1px solid white;}  .subTable {margin-left:20;background-color:white;border-collapse:collapse; margin-top:5; width:700;} .subHead {color:black; background-color:gainsboro; cursor:hand; height:12; text-align:left;} .subHeadCell {font-weight:bold; border:1px solid teal; text-transform:capitalize} .subRow {color:white} .subCell {border:1px solid teal;text-transform:capitalize}  .level1Table {} .level1Row {background-color:E1EAEA; cursor:hand} .level1Cell {border:1px solid white;} .level1ColHead {color:white; cursor:hand; background-color:#003366; height:12; text-align:center; font-weight:bold;} .level1Highlight {background-color:003163; color:white; cursor:hand} .level2Table {margin-left:40; border-collapse:collapse;background-color:white; margin-top:4;width:700} .level2Row {background-color:C8DFDF; text-transform:capitalize; cursor:hand} .level2Cell {border:1px solid white;} .level2ColHeadRow {text-weight:bold; color:white; background-color:#4E8787; cursor:hand; height:12; text-align:left; font-weight:bold; text-transform:capitalize} .level2ColHeadCell {border:1px solid white; font-weight:bold; font-size:8pt} .level2Highlight {background-color:003163; color:white; cursor:hand; text-transform:capitalize} .sortLink {color:white;cursor:hand} .dialogCustom1 {position:absolute; top:4; left:200} .hSpace1 {height:-1} .datetime {text-align:right;} .money {text-align:right;} .char {text-align:left;text-transform:capitalize;} .varchar {text-align:left;text-transform:capitalize;} .decimal {text-align:right;} .timestamp {text-align:right;} .default,.Text,.Number,.Date,.datetime,.money,.char,.varchar.decimal,.timestamp, {border-top:1px solid white;border-right:1px solid white;} </style> @language java @code <script> // Script by Joe Orr copyright 2002 under the Perl Artistic License. // For information about use see: // http://www.perl.com/pub/a/language/misc/Artistic.html // This is a DERIVED file. The source is in a LEO file. // Formatting of the scripts in this file may not be as intended. // Also, this script is HEAVILY documented in the source LEO file (flextable.leo) // which should be present in the same directory as this one. // For information about using LEO see // http://www.jserv.com/jk_orr/leo.htm // minor formatting function var loaded = false; function init() { <xsl:if test="$customization != 'false'"> orientation[0].checked = 'true'; </xsl:if> loaded = true; // fso = new ActiveXObject("Scripting.FileSystemObject"); // f = fso.CreateTextFile('test95.htm',true); // f.write(document.documentElement.innerHTML); // f.Close(); } << dhtmltable object >> << general >> </script> @code << constructor >> << other dhtml table methods >> // End of method definitions, now add each method to the object prototype // Accessor Methods clsDHTMLTable.prototype.setTableRows = setTableRows; clsDHTMLTable.prototype.setStartRow = setStartRow; clsDHTMLTable.prototype.setOrientation = setOrientation; // draw and fill table clsDHTMLTable.prototype.drawEmptyTable = drawEmptyTable; clsDHTMLTable.prototype.drawFilledTable = drawFilledTable; clsDHTMLTable.prototype.fillTable = fillTable; clsDHTMLTable.prototype.fillCell = fillCell; clsDHTMLTable.prototype.getCellData = getCellData; // misc methods clsDHTMLTable.prototype.calculateColTotals = calculateColTotals; clsDHTMLTable.prototype.formatItem = formatItem; clsDHTMLTable.prototype.highlightRow = highlightRow; clsDHTMLTable.prototype.changeCol = changeCol; clsDHTMLTable.prototype.addSumFunctionByColName = addSumFunctionByColName; // sorting and related methods clsDHTMLTable.prototype.sortRows = sortRows; clsDHTMLTable.prototype.reset = reset; clsDHTMLTable.prototype.showHourGlass = showHourGlass; clsDHTMLTable.prototype.restoreMouseDefaults = restoreMouseDefaults; clsDHTMLTable.prototype.setColWidths = setColWidths; // used after sorting // deprecated //clsDHTMLTable.prototype.buildSortFunctionBody = buildSortFunctionBody; // master detail methods clsDHTMLTable.prototype.toggleRowOpen = toggleRowOpen; clsDHTMLTable.prototype.closeAll = closeAll; clsDHTMLTable.prototype.openAll = openAll; clsDHTMLTable.prototype.multilevel = multilevel; clsDHTMLTable.prototype.getDetail = getDetail; // Navigation methods clsDHTMLTable.prototype.goNext = goNext; clsDHTMLTable.prototype.goPrev = goPrev; clsDHTMLTable.prototype.goFirst = goFirst; clsDHTMLTable.prototype.goLast = goLast; // Report and detail screens clsDHTMLTable.prototype.makeReport = makeReport; clsDHTMLTable.prototype.goSubreport = goSubreport; // get next, prev clsDHTMLTable.prototype.getNext = getNext; clsDHTMLTable.prototype.getPrev = getPrev; clsDHTMLTable.prototype.getCurr = getCurr; // col resizing clsDHTMLTable.prototype.TDselMove = TDselMove; clsDHTMLTable.prototype.TDselUp = TDselUp; clsDHTMLTable.prototype.TDselDown = TDselDown; // table resize clsDHTMLTable.prototype.flagResize = flagResize; clsDHTMLTable.prototype.resize = resize; @code // N.B. LOTS of extra documentation for this code is in the LEO file // in which the code was created. // the table object ============================== /** * @numRows the number of rows to display at a time * @index the starting row for the dataArray, from which comes the table data * @id the DOM id to be given to the DHTML table * @name set this to the same name as the variable holding the instance of this object * @dataArray the name of a two-dimensional array contain the data to be put in the table * @container the html element in which to place this table * @colNames column names (field names) * @colTitles column headings * @colTypes array containing datatype of each cell (determines cell formatting, e.g. right-alignment) * @colFormats array containing data formats for cell item (determines formatting of item, e.g. currency) * @orientation (optional) portrait or landscape * @tableStyle (optional) if 'masterdetail' will display tree grid * @totalsHash (optional) an associate array (hash) containing col name keys and sum values. * @detail (optional) object holding the url for the detail page and list of params. * When user double clicks on a line, the colum values corresponding to * the param names will be appended to the url and browser will be * redirected to the resulting url. * * if you use one of the 'optional' parameters, you'll have to pass in null for any optional * parameters to the left of the optional parameter you are using. True optional parameters * aren't available for Javascript 1.2 */ function clsDHTMLTable (numRows, index, id, name, container, dataArray, colNames, colTitles, colTypes, colFormats, orientation, tableStyle, totalsHash, detail) { <![CDATA[ // required parameters ===================================== this.tableRows = numRows; this.startRow = index; this.id = id; this.name = name; this.dataArray = dataArray; this.totalRows = dataArray.length; this.container = container; this.names = colNames; this.titles = colTitles; this.types = colTypes; this.formats = colFormats; // end of required parameters section ======================= // optional parameters ====================================== // orientation: // landscape = col header (normal database table presentation, field name is in col header) // portrait = row header (rows become columns, field name is in row header) this.orientation = orientation; if (! this.orientation) this.orientation = 'landscape'; this.tableStyle = tableStyle; // paged, scrolling or master detail if (! this.tableStyle) this.tableStyle = 'paged'; this.totalsHash = totalsHash; // associative array (hash) containing col names and totals this.details = oDetailJSP; // end of optional parameters section ======================= // used for remembering which row is highlighted this.highlightedRow = null; // used for holding col totals (which we might calculate ourselves) this.colTotals = new Array(); // array to hold flag indicating whether a given column is to have // a total calculated by the script this.totalFlags = new Array(); // array to hold list of columns that will not scroll horizontally (they will be // placed in left side, outside of horizontally scrolling window) this.nonScrollingColumns = new Array(); // other properties this.mixedCase = true; this.divHeight = 0; //if this is greater than 0, the table will be displayed in a scrolling window this.showLineNums = false; this.colPickList = false; this.tableWidth = ]]><xsl:value-of select="$tableWidth"/><![CDATA[ // next property is currently not being used but is used when // implementing single-click multicolumn sort this.numOfColumnsToSort = 2; // create an array to hold a list of the indexes in the order in which // you want them displayed. This is used for "moving" columns around. this.columnIndexes = new Array(); for (i = 0; i < this.dataArray[0].length; i++) this.columnIndexes[i] = i; // Do the same thing for the rows. This is used for sorting rows. this.rowIndexes = new Array(); for (i = 0; i < this.dataArray.length; i++) this.rowIndexes[i] = i; // An array to add arbitrary functions to summarize a column // For future functionality //this.sumFunctions = new Array(); //for (i = 0; i < this.columnIndexes.length; i++) this.sumFunctions[i] = 'nothing'; // An array to hold the styles so we can do stuff like overwrite the cursor // for all styles with the hourglass icon and then restore the original. // This array is describing something in the page (the stylesheet) so it isn't really // necessary to put inside the object. However, this is done to make the code more // component-like. this.rules = new Array(); // for remembering which row we are currently on this.currDetailRow = -2; // for remembering which row we are currently on this.currHighlightedRow = -2; // resize table after window has been resized this.resized = false; window.onresize = this.flagResize; ]]> } @code << accessor methods >> << current detail row methods >> << column totals >> << draw and fill table >> << field formatting >> << col resizing methods >> << row methods >> << fast print >> << navigation >> << go to subreport >> << sorting >> << multilevel >> << unsorted >> @code <![CDATA[ /** * Set the number of rows that the table will display * @param numRows The number of rows to display. This can be changed at any time, and * the table will redraw with the requested number of rows. If the table * is displaying in portrait mode, this is actually the number of columns, */ function setTableRows (numRows) { numRows = numRows / 1; // make sure Javascript knows that it is a number if (numRows == "") numRows = this.tableRows; if (numRows < 2) {alert("At least 2 records must be displayed."); return} if (numRows > this.totalRows) {numRows = this.totalRows} if (numRows > 50) {alert("Maximum of 50 rows may be displayed"); numRows = 50;} this.tableRows = numRows / 1; this.startRow = 0; if (this.orientation == 'landscape') { //if (this.divHeight > 0) this.divHeight = numRows * 24 + 90; } this.drawEmptyTable(); this.fillTable(); } /** * Set which is the first record (from the array of data) from which the table * will start filling. * */ function setStartRow (r) { r = r / 1; // make sure it Javascript knows that it is a number if (r + this.tableRows > this.totalRows) { r = this.totalRows - this.tableRows; } if (r < 0) r = 0; this.startRow = r; this.fillTable(); } function setOrientation (x) { if (x != 'portrait' && x != 'landscape') return; this.orientation = x; if (x == 'portrait') { //this.divHeight = this.columnIndexes.length * 26; } else { //this.divHeight = this.tableRows * 24 + 90; } this.drawEmptyTable(); this.fillTable(); } // next function not currently in use function setNumOfColumnsToSort (i) { if (i < 4 && i > 0) this.numOfColumnsToSort = i; } ]]> @code <![CDATA[ // Next three functions are for remembering what row is the // current detail row (the row being viewed in detail view). function getCurr() { return rows[this.currDetailRow + this.startRow][0]; } function getNext() { if (this.currDetailRow + this.startRow < this.dataArray.length - 1) { return rows[this.currDetailRow + this.startRow + 1][0]; } else { return -1; } } function getPrev() { if (this.currDetailRow > 0) { return rows[this.currDetailRow + this.startRow - 1][0]; } else { return -1; } } ]]> @doc This function will calculate col totals. (Col totals can also be passed via the xml). You have to tell the object to calculate a particular row: Tell the dataTable object to sum the 3d column: dataTable.totalFlags[2] = true; @code <![CDATA[ function calculateColTotals() { var summClass = 'summaryItem'; if (this.orientation == 'portrait') summClass = 'summaryItem2'; for(c = 0; c < this.columnIndexes.length; c++){ total = " "; // if flags have been set for us to calculate the col totals, do so now if (this.totalFlags[c] != undefined) { total = 0; for (j = 0; j < this.totalRows; j++) { num = this.dataArray[j][c]; num = num / 1 ; total += num; } total = total * 100; total = Math.round(total) total = total / 100; if (this.formats[c] == "MYF") total = this.formatItem(total, "MYF"); } // if col totals have been passed in via the hashTotals, use those. if (this.totalsHash) { // if there is key in the totalsHash corresponding to the name of // the current col, then get the value for that key as the total if (this.totalsHash[this.names[c]] != undefined) { total = this.totalsHash[this.names[c]]; // format the total based according to the format specified for the current col total = formatItem(total, this.formats[c]); } } this.colTotals[c] = '<td class="' + summClass + '"><nobr style="overflow:hidden" id="sumCell">' + total + '</nobr></td>'; } } ]]> @doc drawEmptyTable draws an empty table. fillTable populates it with data. @code << draw empty table >> << fill table >> << draw and fill scrolling table >> @code <![CDATA[ function drawEmptyTable() { var rowStyle; var cellStyle; var html = ''; // start table dhtml (main dhtml, will be right pane when there are two panes) html += "<table id='" + this.id + "' border='0' cellpadding='2' bgcolor='white' cellspacing='0' STYLE='border-collapse:collapse;border-color:white;' class='dataTable';>"; // start container table with left pane for holding non-scrollable columns // and right pane to hold the data table html = '<table border="0" cellspacing="0" cellpadding="0"><tr>' + '<td valign="top"><div id="leftPane"></div></td>' + '<td><div id="rightPane" style="width:' + this.tableWidth + '; overflow-X:auto;">' + html var aHeadings = new Array(); var nowrap = ""; var item; var pickList = ""; for(c = 0; c < this.columnIndexes.length; c++){ // if picklist will appear in place of col headers if (this.pickList) { pickList = "<select onclick=\"window.event.cancelBubble = true;\" onchange='dataTable.changeCol(" + c + ", this.value, this.options[this.selectedIndex].text)'>"; // loop thru all of the field titles to create a pick list for (cc = 0; cc < this.columnIndexes.length; cc++) { pickList += "<option value='"; pickList += cc; pickList += "'"; if (cc == this.columnIndexes[c]) pickList += " selected "; pickList += ">" + this.titles[cc]; pickList += "</option>"; } pickList += "</select>"; item = pickList; } else { item = this.titles[this.columnIndexes[c]]; item = '<span class="sortLink">' + item + '</span>'; } if (this.orientation == 'landscape') { aHeadings[c] = '<td' + ' class="colhead" ' + nowrap + ' col="' + c + '" id="' + this.id + 'Col' + c + '">' // mini table to contain header + resize link + '<nobr>' + '<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>' // label (col head text) + '<td onmousedown="dataTable.showHourGlass();" title="Click to Sort Table on This Column"' + ' onclick="dataTable.sortRows(this.parentElement.parentElement.parentElement.parentElement.parentElement, ' + c + ',1); "' // + ' onclick="dataTable.sortRows(' + this.id + 'Col' + c + ',' + c + '); "' + '>' + '<nobr id="colLabel"><b>' + item + '</b></nobr>' + '</td>' // resizing handle + '<td onmouseover="this.style.cursor=\'E-resize\'" onmousedown="colresize=true;dataTable.TDselDown()" style="width:8" title="Drag to Resize" >  </td>' + '</tr></table>' + '</nobr>' // end of mini table + '</td>'; } else { aHeadings[c] = '<td ' + ' class="colheadportrait" ' + nowrap + ' col="' + c + '" id="' + this.id + 'Col' + c + '">' + item + '</td>'; } } // add col headers to html if (this.orientation != 'portrait') { html += "<tr>"; for (i = 0; i < aHeadings.length; i++) html += aHeadings[i]; html += "</tr>"; } this.calculateColTotals(); var maxR = this.tableRows; var maxC = this.columnIndexes.length; // If in portrait orientation, the table is in effect rotated 90 degrees to the left // Therefore, the rows become columns and the columns become rows, from the standpoint // of the original orientation. if (this.orientation == 'portrait') { maxR = this.columnIndexes.length; maxC = this.tableRows; } var startC = 0; if (this.showLineNums) startC = -1; for(r = 0; r < maxR; r++){ // alternate the row styles rowStyle = 'oddrow'; if (r % 2 == 0) rowStyle = 'evenrow'; // if (this.tableStyle == 'masterDetail') rowStyle = 'dataRow'; // TR html += "<tr ondblclick='" + this.name + ".goSubreport(this);'" + " class='" + rowStyle + "'" + " onclick='" + this.name + ".highlightRow(this); selection.empty()'" + " rowIndex=" + r + ">"; // if it is portrait format, then put field titles in first cell of each row if (this.orientation == 'portrait') { html += aHeadings[r]; } // TD for(c = startC; c < maxC; c++){ cellStyle = this.types[this.columnIndexes[c]]; if (this.orientation == 'portrait') cellStyle = 'cellStylePortrait'; html += '<td nowrap class="' + cellStyle + '" ><nobr> </nobr></td>'; } // if it is portrait format, then put totals in last cell of row if (this.orientation == 'portrait') html += this.colTotals[r]; html += "</tr>"; } // end of row loop // Footer row for summaries. var total; var num; html += "<tr class='summaryRow'>"; if (this.orientation != 'portrait') { for (i = 0; i < this.colTotals.length; i++) html += this.colTotals[this.columnIndexes[i]]; html += "</tr>"; } // finish data table (right pane) html += "</table>"; // close container table (that has left pane and right pane) html += '<br></div></td></tr></table>'; // start box to display record count and current index and navbar html += '<table border="0" width="100%"><tr></tr>'; html += '<tr></tr>'; html += "<td align='left' nowrap align='left'><span id='" + this.id + "Footer'></span></td>" /* * add navbar. This consists of 4 button images. * Each button has an id which consists of the table id (dom id of the dthml table) concatenated with: * buttonFirst, buttonPrev, buttonNext, buttonLast * Each button has the onclick event linked to an appropriate method: * goFirst, goPrev, goNext, goLast */ var b1 = '<img' + ' onclick="' + this.name + '.goFirst()"' + ' id="' + this.id + 'ButtonFirst" ' + ' alt="First Record" ' + ' style="cursor:hand;filter:gray alpha(opacity=20)" ' + ' src="../images/up1.gif">'; var b2 = '<img' + ' onclick="' + this.name + '.goPrev()"' + ' id="' + this.id + 'ButtonPrev" ' + ' alt="Prev Page" ' + ' style="cursor:hand;filter:gray alpha(opacity=20)"' + ' src="../images/up2.gif">'; var b3 = '<img' + ' onclick="' + this.name + '.goNext()"' + ' id ="' + this.id + 'ButtonNext" ' + ' alt="Next Page" ' + ' style="cursor:hand;filter:gray alpha(opacity=20)" ' + ' src="../images/down2.gif">'; var b4 = '<img' + ' onclick="' + this.name + '.goLast()"' + ' id ="' + this.id + 'ButtonLast" ' + ' alt="Last Page" ' + ' style="cursor:hand;filter:gray alpha(opacity=20)" ' + ' src="../images/down1.gif">'; var navBarStyle = 'display:block'; ]]> <xsl:choose> <xsl:when test="$navigation != 'true'"> <![CDATA[navBarStyle = 'display:none';]]> </xsl:when> <xsl:otherwise> <![CDATA[navBarStyle = 'display:none';]]> </xsl:otherwise> </xsl:choose> <![CDATA[ var navBar = '<td align="left"> ' + '<table cellspacing="0" cellpadding="0" border="0" style="' + navBarStyle + ';position:absolute;left:600px;"><tr>' + '<td>' + b1 + '</td><td>' + b2 + '</td><td>' + b3 + '</td><td>' + b4 + '</td>' + '</tr></table>' + '</td>' html += navBar; // close box to display record count and current index and navbar html += '</table>'; // render the table eval (this.container + ".innerHTML = html"); } ]]> @code <![CDATA[ /* *@showNavigation If not false, the navbuttons will be greyed as appropriate. This * doesn't determine whether the buttons exist, only whether they * are updated to show the current navigable status of the widget. */ function fillTable(showNavigation) { var maxR = Math.min(this.tableRows, this.totalRows); var maxC = this.columnIndexes.length; var startC = 0; var oDHTMLTable = eval(this.id); var colShift = 0; var rowShift = 0; if (this.orientation == 'portrait') { maxR = this.columnIndexes.length; maxC = Math.min(this.tableRows, this.totalRows); for(c = 0; c < maxC; c++){ for(r = 0; r < maxR; r++){ oDHTMLTable.rows(r + rowShift).cells(c + 1).innerHTML = this.formatItem(rows[this.rowIndexes[c + this.startRow]][this.columnIndexes[r]], this.formats[this.columnIndexes[r]], this.types[this.columnIndexes[r]]); } } changeStyle('.colhead', 'height', '12'); } else if (this.orientation == 'landscape') { for(r = 0; r < maxR; r++){ for(c = 0; c < maxC; c++){ //tmp = this.formatItem(this.dataArray[this.rowIndexes[r + this.startRow]][this.columnIndexes[c]], this.formats[this.columnIndexes[c]],this.types[this.columnIndexes[c]]) tmp = this.formatItem(this.dataArray[r + this.startRow][this.columnIndexes[c]], this.formats[this.columnIndexes[c]],this.types[this.columnIndexes[c]]) //tmp = '<nobr>' + tmp + '</nobr>'; oDHTMLTable.rows(r + 1).cells(c + colShift).firstChild.innerHTML = tmp; } } changeStyle('.colhead', 'height', '42'); } ]]> // table footer ("1 - 5 of 100 rows found") <xsl:choose> <xsl:when test="$footnote = ''"> var f = (this.startRow + 1) + " - " + (Math.min(this.startRow + this.tableRows, this.totalRows)) + " of " + this.totalRows + " found "; eval (this.id + "Footer.innerHTML = '" + f + "'"); </xsl:when> <xsl:when test="$footnote = 'null'"> </xsl:when> <xsl:otherwise> eval (this.id + "Footer.innerHTML = '" + "<xsl:value-of select="$footnote"/>" + "'"); </xsl:otherwise> </xsl:choose> <![CDATA[ if (showNavigation != false) { eval (this.id + 'ButtonFirst.style.filter = ""'); eval (this.id + 'ButtonPrev.style.filter = ""'); eval (this.id + 'ButtonNext.style.filter = ""'); eval (this.id + 'ButtonLast.style.filter = ""'); if (this.startRow == 0) { eval (this.id + 'ButtonFirst.style.filter = "gray alpha(opacity=20)"'); eval (this.id + 'ButtonPrev.style.filter = "gray alpha(opacity=20)"'); } if (this.startRow + this.tableRows >= this.totalRows) { eval (this.id + 'ButtonNext.style.filter = "gray alpha(opacity=20)"'); eval (this.id + 'ButtonLast.style.filter = "gray alpha(opacity=20)"'); } } if (this.orientation == 'landscape') { var leftPaneHTML = ""; // get a ref to the DHTML Table; var oDHTMLTable = eval(this.id); var maxTableR = oDHTMLTable.rows.length; for (r = 0; r < maxTableR; r++) { // skip if not landscape mode if (this.orientation != 'landscape') break; // create the tr start tag, and copy the row style from the data table //leftPaneHTML += '<tr '; var rowClass = oDHTMLTable.rows(r).className; var currRowIndex = oDHTMLTable.rows(r).rowIndex; leftPaneHTML += "<tr ondblclick='" + this.name + ".goSubreport(this);'" + " class='" + rowClass + "'" + " onclick='" + this.name + ".highlightRow(this)'" + " rowIndex='" + currRowIndex + "'" + ">"; for (c = 0; c < this.nonScrollingColumns.length; c++) { // skip the column if it hasn't been given a 'true' value in // the non-scrolling columns Array. if (this.nonScrollingColumns[c] == undefined) continue; if (! this.nonScrollingColumns[c]) continue; // copy the cell to the left pane // first unhide the cell in the right pane in case it has been hidden oDHTMLTable.rows(r).cells(c).style.display = "block"; leftPaneHTML += oDHTMLTable.rows(r).cells(c).outerHTML; // hide the cell in the right pane oDHTMLTable.rows(r).cells(c).style.display = "none"; } leftPaneHTML += '</tr>'; } leftPane.innerHTML = '<table ' + 'id = ' + this.id + 'LeftPaneTable ' + 'style="background-color:white; border-collapse:collapse;" ' + 'cellpadding="2" border="0" cellspacing="0" bgcolor="black"' + '>' + leftPaneHTML + '</table><br>'; rightPane.style.width = this.tableWidth - (eval (this.id + "LeftPaneTable.clientWidth")); var oLeftPane = eval(this.id + 'LeftPaneTable'); for (i = 0; i < oLeftPane.rows(0).cells.length; i++) { oLeftPane.rows(0).cells(i).col = i; } var oRightPane = oDHTMLTable; for (j = 0; j < oRightPane.rows(0).cells.length; j++) { if (oRightPane.rows(1).cells(j).style.display != 'none') { oRightPane.rows(0).cells(j).col = j; } } } } function fillCell(table, r, c, colShift) { tmp = this.formatItem(this.dataArray[this.rowIndexes[r + this.startRow]][this.columnIndexes[c]], this.formats[this.columnIndexes[c]],this.types[this.columnIndexes[c]]); table.rows(r).cells(c + colShift).firstChild.innerHTML = tmp; } ]]> @code <![CDATA[ function drawFilledTable() { var rowStyle; var cellStyle; var html = ''; << table dhtml >> << col resizing div element >> << create and add col header html >> << create and add summary row html >> << footnote >> // render the table eval (this.container + ".innerHTML = html"); << fix data cell widths >> << put left pane html in left pane and adjust width of right pane >> << move col headers and sum cells into left pane >> << footnote (1 - 100 of 100 rows) >> << fix col header and sum row cell width >> } function getCellData(r, c) { return this.formatItem(this.dataArray[this.rowIndexes[r + this.startRow]][this.columnIndexes[c]], this.formats[this.columnIndexes[c]],this.types[this.columnIndexes[c]]); } ]]> @code // start table dhtml (main dhtml, will be right pane when there are two panes) html += "<table id='" + this.id + "' border='0' cellpadding='2' bgcolor='white' cellspacing='0' STYLE='border-collapse:collapse;border-color:white;' class='dataTable';>"; // start container table with left pane for holding non-scrollable columns // and right pane to hold the data table var leftOverflow = "overflow:hidden;"; var overflow = ";overflow-X:hidden;overflow-Y:auto;"; var height = "height:462px;"; var onscroll ='" onscroll="leftPane.scrollTop = this.scrollTop;" '; html = '<table border="0" cellspacing="0" cellpadding="0">' + '<tr>' + '<td valign="top"><div id="leftPane" ' + ' style="' + height + leftOverflow + '"' + '></div></td>' + '<td>' + '<div id="rightPane" style="width:' + this.tableWidth + overflow + height + onscroll + '>' + html; << dhtml table body filled >> // finish data table (right pane) html += "</table>"; // close container table (that has left pane and right pane) html += ' <br></div></td>' + ' </tr>' + '</table>'; @code << col headers filled >> this.calculateColTotals(); var maxR = this.tableRows; var maxC = this.columnIndexes.length; var startC = 0; << rows filled >> @code var aHeadings = new Array(); var nowrap = ""; var item; var pickList = ""; for(c = 0; c < this.columnIndexes.length; c++){ // if picklist will appear in place of col headers if (this.pickList) { << picklist items filled >> } if (this.orientation == 'landscape') { << landscape col headers filled >> } else { // portrait col headers aHeadings[c] = '<td ' + ' class="colheadportrait" ' + nowrap + ' col="' + c + '" id="' + this.id + 'Col' + c + '"><nobr>' + item + '</nobr></td>'; } } @code pickList = "<select onclick=\"window.event.cancelBubble = true;\" onchange='dataTable.changeCol(" + c + ", this.value, this.options[this.selectedIndex].text)'>"; // loop thru all of the field titles to create a pick list for (cc = 0; cc < this.columnIndexes.length; cc++) { pickList += "<option value='"; pickList += cc; pickList += "'"; if (cc == this.columnIndexes[c]) pickList += " selected "; pickList += ">" + this.titles[cc]; pickList += "</option>"; } pickList += "</select>"; item = pickList; } else { item = this.titles[this.columnIndexes[c]]; item = '<span class="sortLink">' + item + '</span>'; @code aHeadings[c] = '<td' + ' class="colhead" ' + nowrap + ' col="' + c + '" id="' + this.id + 'Col' + c + '">' // mini table to contain header + resize link + '<nobr>' + '<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>' // label (col head text) + '<td onmousedown="dataTable.showHourGlass();" title="Click to Sort Table on This Column"' + ' onclick="dataTable.sortRows(this.parentElement.parentElement.parentElement.parentElement.parentElement, ' + c + ',1); "' // + ' onclick="dataTable.sortRows(' + this.id + 'Col' + c + ',' + c + '); "' + '>' + '<nobr id="colLabel"><b>' + item + '</b></nobr>' + '</td>' // resizing handle + '<td onmouseover="this.style.cursor=\'E-resize\'" onmousedown="colresize=true;dataTable.TDselDown()" style="width:8" title="Drag to Resize" >  </td>' + '</tr></table>' + '</nobr>' // end of mini table + '</td>'; @code var htmlRowLines = new Array(); var myLine = ""; // a couple of arrays to hold cells to be copied to left pane var field = ""; var fields = new Array(); var leftPaneLines = new Array(); var table = eval(this.id); var CSSClass = ""; var inlineStyle = ""; for(r = 0; r < maxR; r++){ // alternate the row styles rowStyle = 'oddrow'; if (r % 2 == 0) rowStyle = 'evenrow'; this.tableStyle = 'scrolling'; // TR myLine = "<tr ondblclick='" + this.name + ".goSubreport(this);'" + " class='" + rowStyle + "'" + " onclick='" + this.name + ".highlightRow(this);'" + " rowIndex=" + r + ">"; // Master-Detail button myLine += '<td id="plusButton" class="dataRow" style="display:none" onclick="' + this.name + '.toggleRowOpen(this);"' + '><nobr class="plusButton">−</nobr></td>'; // TD leftPaneLines[r] = myLine; for(c = startC; c < maxC; c++){ CSSClass = this.types[this.columnIndexes[c]]; inlineStyle = ""; if (this.nonScrollingColumns[c] != undefined){ inlineStyle = 'style="display:none;"'; } field = '<td nowrap class="' + CSSClass + '"' + inlineStyle + ' ><nobr>' + this.getCellData(r, c) + '</nobr></td>'; myLine += field; // copy into left pane if nec if (this.nonScrollingColumns[c] != undefined){ field = '<td nowrap class="' + CSSClass + '" ><nobr>' + this.getCellData(r, c) + '</nobr></td>'; fields[c] = field; } } leftPaneLines[r] += fields.join("") + "</tr>"; myLine += "</tr>"; << subtable filled >> htmlRowLines[r] = myLine; } // end of row loop html += htmlRowLines.join(""); //html += htmlDataLines.join(""); @code var subTable; var sr; var sc; var maxDetail = 5; var pk = this.getCellData(r, 0); var detailHTML = ""; for (j = 0; j < maxDetail; j++) { detailHTML += '<span id="level1_' + j + '" + pk = "' + pk + '"></span>'; } myLine += '<tr STYLE="display:none"><td id="detailFrame" pk="' + pk + '" colspan="' + (this.columnIndexes.length + 1) + '">' // + subTable + detailHTML + '</td></tr>'; @code @code // add col headers for landscape (must be placed in separate div tags for left and // right pane headers). First, place all col headers in right pane, left pane col // headers will be moved into left pane later. var headHTML; // first make a table with a two cells, each cell contains a div tag which // will hold the left or right pane col headers headHTML = '<table id="colHeaderTable" style="border-collapse:collapse;" cellpadding="0" cellspacing="0"><tr>'; headHTML += '<td><div id="leftPaneHeader"></div></td>'; headHTML += '<td><div id="rightPaneHeader" style="overflow:hidden">' headHTML += '<table style="border-collapse:collapse; border-color:white"><tr>'; // add dummy cell for head of open button column headHTML += '<td id="plusButtonHeader" class="colHead" style="display:none;" ' + this.name + '.toggleRowOpenAll(this);"' + '><nobr class="plusButtonHeader"> </nobr></td>'; for (i = 0; i < aHeadings.length; i++) headHTML += aHeadings[i]; headHTML += '</tr></table>'; // now put the colheader table containing left and right col headers together // with the main data table. html = '<table border="0" style="border-collapse:collapse; border-color:white">' + '<tr><td>' + headHTML + '</td></tr></table>' + html + '</td></tr></table>'; @code var total; var num; var sumRowHTML = ""; // if (this.tableStyle == 'masterDetail') { // sumRowHTML += '<td class="openButton" id="openButton"> </td>'; // } for (i = 0; i < this.colTotals.length; i++) sumRowHTML += this.colTotals[this.columnIndexes[i]]; var sumHTML = '<table border="0" id="sumRowTable" style="border-collapse:collapse;" cellpadding="0" cellspacing="0"><tr>'; sumHTML += '<td valign="top"><div id="leftPaneSumRow" style="height:42;"></div></td>'; sumHTML += '<td><div id="rightPaneSumRow" style="height:42;overflow-X:auto" onscroll="rightPane.scrollLeft=this.scrollLeft; rightPaneHeader.scrollLeft=this.scrollLeft">' sumHTML += '<table border="0" style="margin:0;border:0px solid #7EBEBE; border-collapse:collapse;" cellpadding="0" cellspacing="0"><tr>'; sumHTML += '<td id="plusButtonFooter" class="summaryItem" style="display:none;"><nobr class="plusButtonFooter"> </nobr></td>'; sumHTML += sumRowHTML; sumHTML += '</tr></table>'; sumHTML += '</div></td></tr></table>'; html += sumHTML; @code // start box to display record count and current index and navbar html += '<table border="0" width="100%"><tr>'; html += "<td align='left' nowrap align='left'><span id='" + this.id + "Footer'>xxx</span></td>" // close box to display record count and current index and navbar html += '</table>'; @code // fix the first cell in the col of the data field to // be the width of the col header. This way the col will // be at least as wide as the col header. var table = eval(this.id); var cells = table.rows(0).cells; var w, label, cell; for (c = 0; c < colLabel.length; c++) { label = colLabel(c); // col header cell cell = cells(c + 1); // first data cell // TODO: move this to string init? label.style.overflow = 'hidden'; // alert(label.innerHTML + "\n = " + label.parentElement.clientWidth); cell.style.width = label.parentElement.clientWidth;// - 20; } @code // put left pane html in left pane var leftPaneHTML = ""; leftPaneHTML = leftPaneLines.join(""); leftPane.innerHTML = '<table ' + 'id = ' + this.id + 'LeftPaneTable ' + 'style="background-color:white; border-collapse:collapse;" ' + 'cellpadding="2" border="0" cellspacing="0" bgcolor="black"' + '>' + leftPaneHTML + '</table><br>'; // adjust right pane width now that left pane has been filled rightPane.style.width = this.tableWidth - (eval (this.id + "LeftPaneTable.clientWidth")); @code var cells = table.rows(0).cells; var leftPaneCells = leftPane.firstChild.rows(0).cells; var w, w2, label, cell; for (c = 0; c < cells.length - 1; c++) { if (c < this.nonScrollingColumns.length) { cell = leftPaneCells(c + 1); // offset by one bc of "+" button label = colLabel(c); // col header cell label.style.overflow = 'hidden'; w = cell.clientWidth; label.style.width = w + 100; label = sumCell(c); label.style.width = w; if (c == 0) label.style.width = w + 1; } else { cell = cells(c + 1); // offset by one bc of "+" button colLabelx = colLabel(c); // col header cell sumCellx = sumCell(c); // first check if sum cell is wider than reg cell // if so reset first cell to be same width as sum cell // alert(cell.clientWidth + " " + sumCellx.clientWidth + "\n" + sumCellx.outerHTML); if (sumCellx.parentElement.clientWidth > cell.clientWidth) { cell.style.width = sumCellx.parentElement.clientWidth + 1; // alert(sumCellx.innerHTML); } colLabelx.style.width = cell.clientWidth - 7; sumCellx.style.width = cell.clientWidth; // now reset col header // cell = cells(c + 1); // offset by one bc of "+" button // label = colLabel(c); // col header cell // label.style.overflow = 'hidden'; // w = cell.clientWidth; // label.style.width = w - 9; // label = sumCell(c); // label.style.width = w; // // check if sum cell width is greater than col header width // // if, so reset col header width // cell = cells(c + 1); // first data cell // label = colLabel(c); // sumCell = sumCell(c); // w = cell.clientWidth; // w2 = label.parentElement.clientWidth + 5; // w3 = sumCell(c).clientWidth; // w = cells(c + 1).clientWidth; // w2 = colLabel(c).parentElement.clientWidth + 5; // w3 = sumCell(c).clientWidth; // w = Math.max(w, w2, 23); // colLabel(c).p // cells(c + 1).firstChild.style.width = w2 - 4; // sumCell(c).style.width = w; // if (w2 > w) { // cells(c + 1).firstChild.style.width = w2 - 4; // w = w2; // } else { // label.style.width = w - 9; // } // sum cell // label = sumCell(c); // label.style.overflow = 'hidden'; // label.style.width = Math.max(w, 10); } } @code // move col headers and col sum fields into left pane var rightPaneHeaderTable = rightPaneHeader.firstChild; var leftPaneHeaderHTML = ""; var rightPaneSumRowTable = rightPaneSumRow.firstChild; var leftPaneSumRowHTML = ""; for (c = 0; c < this.nonScrollingColumns.length; c++) { // skip the column if it hasn't been given a 'true' value in // the non-scrolling columns Array. if (this.nonScrollingColumns[c] == undefined) continue; if (! this.nonScrollingColumns[c]) continue; // copy the cell to the left pane // first unhide the cell in the right pane in case it has been hidden rightPaneHeaderTable.rows(0).cells(c + 1).style.display = "block"; leftPaneHeaderHTML += rightPaneHeaderTable.rows(0).cells(c + 1).outerHTML; rightPaneSumRowTable.rows(0).cells(c + 1).style.display = "block"; leftPaneSumRowHTML += rightPaneSumRowTable.rows(0).cells(c + 1).outerHTML; // hide the cell in the right pane rightPaneHeaderTable.rows(0).cells(c + 1).style.display = "none"; rightPaneSumRowTable.rows(0).cells(c + 1).style.display = "none"; } // leftPaneHeaderHTML = '<table cellpadding="0" cellspacing="0">' + leftPaneHeaderHTML + '</table>'; leftPaneHeaderHTML = '<tr>' + leftPaneHeaderHTML + '</tr>'; leftPaneSumRowHTML = '<tr>' + leftPaneSumRowHTML + '</tr>'; leftPaneHeader.innerHTML = '<table ' + 'style="background-color:white; border-collapse:collapse;" ' + 'cellpadding="2" border="0" cellspacing="0" bgcolor="black"' + '>' + leftPaneHeaderHTML + '</table>'; leftPaneSumRow.innerHTML = '<table ' + 'style="background-color:black; border:0px solid #7EBEBE; border-collapse:collapse;" ' + 'cellpadding="0" border="0" cellspacing="0" bgcolor="black"' + '>' + leftPaneSumRowHTML + '</table>'; rightPaneHeader.style.overflow = "hidden"; rightPaneHeader.style.width = rightPane.clientWidth; rightPaneSumRow.style.overflow = "hidden"; rightPaneSumRow.style.width = rightPane.clientWidth; @code ]]> <xsl:choose> <xsl:when test="$footnote = ''"> var f = (this.startRow + 1) + " - " + (Math.min(this.startRow + this.tableRows, this.totalRows)) + " of " + this.totalRows + " found "; eval (this.id + "Footer.innerHTML = '" + f + "'"); </xsl:when> <xsl:when test="$footnote = 'null'"> </xsl:when> <xsl:otherwise> eval (this.id + "Footer.innerHTML = '" + "<xsl:value-of select="$footnote"/>" + "'"); </xsl:otherwise> </xsl:choose> <![CDATA[ @code <![CDATA[ /** * Format an item, e.g. convert a date from 1999-10-01 to 10/01/99. * * @item The item to be formatted. * @formatName The format to use. When you construct a clsDHTMLTable object, you may pass the * the constructor an array containing a list of column formats. To add a new * format, simply edit the "switch" statement below. */ function formatItem(item, formatName, dataType){ try { dataType = dataType.toUpperCase(); } catch (e) { } switch (dataType) { case "DECIMAL": formatName = "MYF"; break; case "TIMESTAMP": formatName = "SDT"; break; case "default": formatName = "MYF"; break; case "DATE": formatName = "SDT"; break; default: } if (item == 'null') return " "; if (item == '') return " "; var myItem = item; if (myItem == undefined) return; if (myItem.length < 3) return myItem; switch (formatName) { case "default": case "money": case "MY": case "RTH": case "MYF": //if (myItem > 1) {myItem = myItem / 1}; myItem = myItem / 1; // get rid of exponential notation myItem = myItem.toString(); if (myItem.indexOf('.') == -1) myItem += ".00"; myItem += "0000"; // make sure we've go enough zeros on end myItem = myItem.replace(/(\.\d\d)\d+/, "$1"); // truncate to 2 dec places myItem = commify(myItem); break; case "MYD": // drop pennies myItem = Math.floor(myItem / 1); myItem = commify(myItem); break; case "MYT": // amount in thousands myItem = Math.floor(myItem / 1000); myItem = commify(myItem); break; case "MYM": // amount in millions myItem = Math.floor(myItem / 1000000); myItem = commify(myItem); break; case "RTF": // format rate forced myItem = myItem / 1; // get rid of exponential notation myItem = myItem.toString(); if (myItem.indexOf('.') == -1) myItem += ".00"; myItem += "0000"; // make sure we have enough zeros on end myItem = myItem.replace(/(\.\d\d\d)\d+/, "$1"); // truncate to 3 dec places break; case "FC": // remove leading and trailing spaces myItem = myItem.replace(/^\s+/, ''); myItem = myItem.replace(/\s+$/, ''); myItem = myItem.replace(/&/, '&'); break; case "datetime": case "SDT": myItem = myItem.replace(/^(\d\d)(\d\d)-(\d\d)-(\d\d).*/, "$3/$4/$2"); // rearrange the data items break; default: // remove leading and trailing spaces myItem = myItem.replace(/^\s+/, ''); myItem = myItem.replace(/\s+$/, ''); // kludge alert: some code fields have format type = 'text'. So assume // that anything below 4 chars is a code. if (this.mixedCase) { if (myItem.length > 3) myItem = myItem.toLowerCase(); // fields which are text with mixed numbers and letters and no spaces are codes and should // be in caps if ((myItem.search(/\s/) == -1) && (myItem.search(/\d/) != -1) && (myItem.search(/[A-Za-z]/) != -1)){ myItem = myItem.toUpperCase(); } } // roman numerals in text fields myItem = myItem.replace(/\sii$/g, ' II'); myItem = myItem.replace(/\siii$/g, ' III'); myItem = myItem.replace(/\siv$/g, ' IV'); myItem = myItem.replace(/\svi$/g, ' VI'); } return myItem; } ]]> @doc html+= '<div id="TDsel" onmouseover="dragTD=true" onmouseout="dragTD=false" onmousemove="dataTable.TDselMove()" onmouseup="dataTable.TDselUp()" style="position:absolute;filter:alpha(opacity=20);border:2 solid black;top:0;left:-1000;height:100%;z-index:2;background-color:white" > </div>'; @code var lLeft; var oPaneDiv; var currCol; var oDHTMLTable = eval(this.id); << mouse down >> << mouse move >> << mouse up >> } @code function TDselDown(){ // find out height of the title bar, if any titleHeight = 0; try { titleHeight = tableHeader.clientHeight } catch (e) {} // the TD element for the col head // TD TR TABLE NOBR TD oEL = event.srcElement.parentElement.parentElement.parentElement.parentElement; // the NOBR element for the first cell currCol = (oEL.col / 1); // currCol = this.columnIndexes[currCol]; // the DIV element holding the data table oPaneDIV = oEL.parentElement.parentElement.parentElement.parentElement; // the TD containing the data table (this will be either left or right pane oPaneTD = oEL.parentElement.parentElement.parentElement.parentElement.parentElement; // change the TDsel style tst=TDsel.style; // we need the offset of the TD for this col, plus // the offset of the TD holding the pane (e.g. right pane) // minus how much the pane has been scrolled tst.pixelLeft=oEL.offsetLeft + oPaneTD.offsetLeft - oPaneDIV.scrollLeft + 5; tst.posWidth=oEL.offsetWidth; var oDHTMLTable = eval(this.id); if (this.tableStyle == "paged") { tst.pixelHeight=(oDHTMLTable.parentElement.offsetHeight); } else { tst.pixelHeight=(oDHTMLTable.parentElement.offsetHeight + 45); } tst.pixelTop=titleHeight+3; lLeft=tst.pixelLeft; dragTD=true; TDsel.setCapture(); } @code function TDselMove(){ var oDHTMLTable = eval(this.id); TDcellWidth=event.clientX + oDHTMLTable.scrollLeft - lLeft; // + oDHTMLTable.scrollTop - lLeft + 8; // resize TDsel TDsel.style.posWidth = TDcellWidth; } @code function TDselUp(){ var oDHTMLTable = eval(this.id); TDsel.releaseCapture(); TDcellWidth = Math.max(TDcellWidth, 6); var oRightPane = eval(this.id); // in scrolling or masterDetail there is another row for every data row, // so when loooping thru the rows, we need to step by two // Also, the row to start on will be 1 in the case of the paged display, // because the col header is row 0 var step = 2; var startR = 0; if (this.tableStyle == "paged") { step = 1; startR = 1; } if ((oPaneDIV.id == 'leftPaneHeader') || (oPaneDIV.id =='leftPane')) { << left pane >> } else { << right pane >> } // move TDsel off the screen TDsel.style.left=-1000; @code oLeftPane = eval(this.id + "LeftPaneTable") // adjust the col label label = colLabel(currCol); label.style.overflow = 'hidden'; label.style.width = TDcellWidth - 6; // resize the col footer label = sumCell(currCol); label.style.width = TDcellWidth + 4; // shift the col num if this is not paged view bc of the button (visible or not) that // exists in the other views if (this.tableStyle != "paged") currCol++; // loop thru the NOBR elements in each field in the column var oLeftPaneDHTML = eval(this.id + "LeftPaneTable"); for (r = startR; r < oLeftPaneDHTML.rows.length; r++) { // get the NOBR element in the cell nobrEL = oLeftPane.rows(r).cells(currCol).firstChild; nobrEL.style.overflow = 'hidden'; nobrEL.style.width=TDcellWidth; nobrEL.parentElement.style.width=TDcellWidth; } // adjust the size of the right pane since the size of the left pane has changed. oRightPane.parentElement.style.width = Math.max(this.tableWidth - oLeftPane.clientWidth, 5); if (this.tableStyle != "paged") { rightPaneHeader.style.width = oRightPane.parentElement.style.width; rightPaneSumRow.style.width = oRightPane.parentElement.style.width; } @code // resize the col header label = colLabel(currCol + this.nonScrollingColumns.length); label.style.overflow = 'hidden'; label.style.width = TDcellWidth - 5; // resize the col footer label = sumCell(currCol + this.nonScrollingColumns.length); label.style.width = TDcellWidth + 4; // shift the col num if this is not paged view bc of the button (visible or not) that // exists in the other views if (this.tableStyle != "paged") currCol++; // loop thru the NOBR elements in each field in the column (right pane) for (r = startR; r < oDHTMLTable.rows.length; r = r + step) { // get the NOBR element in the cell nobrEL = oRightPane.rows(r).cells(currCol).firstChild; nobrEL.style.overflow = 'hidden'; nobrEL.style.width=TDcellWidth; nobrEL.parentElement.style.overflow = 'hidden'; nobrEL.parentElement.style.width=TDcellWidth; } @code <![CDATA[ var oldSubTableRow; function highlightSubTableRow(me) { try { oldSubTableRow.className = "level1Row"; } catch (e) {} me.className = "level2Highlight"; oldSubTableRow = me; } /** * highlightRow * * @me The element that was clicked on. * */ function highlightRow(me) { var theTable = eval(this.id); var rowIndex = me.rowIndex; // var startRow = 0; var step = 1; var d = 2; var style1 = "evenrow"; var style2 = "oddrow"; if (this.tableStyle != "paged") d = 4; if (this.tableStyle != "paged") step = 2; if (this.tableStyle == "paged") { style1 = "oddrow"; style2 = "evenrow"; rowIndex++; } if (this.tableStyle == "masterDetail") { for (r = 0; r < theTable.rows.length; r = r + 2) { theTable.rows(r).className = "level1Row" } eval("theTable.rows(" + (rowIndex / 1) * 2 + ").className = 'level1Highlight'"); return; } // unhilite all rows in right pane var r; var row; for (r = 0; r < theTable.rows.length; r = r + step) { row = theTable.rows(r); if (r % d == 0) { row.className = style1; } else { row.className = style2; } } // hilite row (this will hilite the row in the right pane regardless of which // pane was clicked on eval("theTable.rows(" + (rowIndex / 1) * step + ").className = 'highlightedRow'"); // try to hilight the same row in the left pane (there may be no // columns in the left pane, so put this in a try clause). try { // unhilite theTable = eval(this.id + "LeftPaneTable"); var r; for (r = 0; r < theTable.rows.length; r++) { row = theTable.rows(r); if (r % 2 == 0) { row.className = style1; } else { row.className = style2; } } // hilite row eval("theTable.rows(" + (rowIndex / 1) + ").className = 'highlightedRow'"); } catch (e) { // do nothing } // save the current index for use with getnext and getprev functions // and to show which row was prev highlighted this.currDetailRow = (rowIndex / 1); this.currHighlightedRow = (rowIndex / 1); this.resize(); } /* changeStyle : change a CSS style in the document * *@styleName : name of style to change, e.g. TD or .custom1 *@key : e.g. width or font-family *@value : value to be set * * example: changeStyle(".custom", "line-height", "6px"); */ function changeStyle(styleName, key, value) { var myRules = document.styleSheets[0].rules; var size; var lineHeight = ""; for (i = 0; i < myRules.length; i++) { if (myRules[i].selectorText == styleName) { eval ("myRules[i].style." + key + " = " + value); break; } } } ]]> @code <![CDATA[ << support functions >> var repWindow; // this will hold a pointer to the print report window // for use by fast report window var z = 100; function makeReport() { // zoom variable: see above z = 100; var d = new Date(); var today = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getYear(); var repTitle = ']]><xsl:value-of select="$printReportTitle"/><![CDATA['; //var repTitle = top.document.title; //try { // tmp = repTitle.split("-"); // repTitle = tmp[1]; // repTitle = repTitle.replace(/^\s+/, ""); // repTitle = repTitle.replace(/\s+$/, ""); // repTitle += "(Fast Print)"; //} catch (e) { //} // report header var repHeader = '<div class="notice">This report should be printed in Landscape View. To configure your browser ' + ' to print in Landscape View, select File > Page Setup > Landscape.</div>' + '<table width=100% align="center"><tr>' + '<td width="33%" style="border:0px"></td>' + '<td width="33%" style="border:0px" class="printReportHeader" align="center"><nobr>]]>' //+ '<xsl:value-of select="$printReportTitle"/><![CDATA[</td>' + repTitle + '</nobr></td>' + '<td style="border:0px" align="right" width="33%">' + '<a href="javascript:window.print()" class="menuItem">Print</a>   ' + '<a href="javascript:window.close()" class="menuItem">Exit</a></td></tr></table>'; var zoomMenu = '<span class=\'zoomMenu\'><a href="javascript:top.opener.zoom(\'+\')">zoom in</a>   <a href="javascript:top.opener.zoom(\'-\')">zoom out</a></span>'; zoomMenu = ''; if (repWindow != undefined) { repWindow.close(); } repWindow = null; repWindow = window.open("",repWindow, "height=600,width=940,status=no,toolbar=no,menubar=yes,scrollbars=yes,location=no,left=40,top=10"); repWindow.focus(); // loading 1 of 10 rows repWindow.document.write('<div align="center" class="printReportHeader" id="tmpmsg">Loading row <span id="rowIndex">0</span> of ' + this.dataArray.length + ' rows.</div>'); // this var will hold the html for displaying the main table myHTML = ""; var tableHeader = ""; myHTML = '\n<html><head><style type="text/css">\n' + 'BODY {font-family:Arial,sans-serif; font-size:8pt; font-weight:100; margin-left:0;}\n' + 'TR {font-family:Arial,sans-serif; font-size:8pt; font-weight:100; }\n' + 'TD {font-family:Arial,sans-serif; font-size:8pt; font-weight:100; border:1px solid gray;text-transform:capitalize;}\n' + '.colheader {color:black; background-color:#DDDDDD; height:30}' + '.summaryItem{color:black; font-weight:bold; background-color:#DDDDDD; height:30; text-align:right}' + '.default {text-align:right;}\n' + '.Text {text-transform:capitalize}\n' + '.Number {text-align:right;}\n' + '.zoomMenu {font-size:9px}\n' + '.notice {font-weight:bold; color:red; text-align:center; margin-bottom:20}' + '.menuItem {font-weight:bold;}' + '@media print{\n' + ' .notice {display:none}\n' + ' .menuItem {display:none}\n' + ' .zoomMenu {display:none}\n' + '}\n' + '.printReportHeader {align:center; font-family:Arial,sans-serif; font-size:10pt; font-weight:bold; text-align:center; height:20; margin-bottom:5;}\n' + '</style>\n' + '</head><body onload="top.opener.initFastReport()">\n' + repHeader; tableHeader = '\n<div style="height:620;" class="printPage">' + '<table STYLE="border-collapse:collapse" cellpadding="2" id="fastReportTable" width="100%">\n'; // data table headers (a string containing the html for the col header row) tableHeader += '<tr class="colheader">'; for (c = 0; c < this.columnIndexes.length; c++) { tableHeader = tableHeader + "<td><b>" + this.titles[this.columnIndexes[c]] + "</b></td>"; } tableHeader += '</tr>'; var cellData; var cellStyle; var maxR = this.dataArray.length; var maxC = this.dataArray[0].length; var HTMLLines = new Array(); var lineHTML; for(r = 0; r < maxR; r++){ if (r % 35 == 0) { lineHTML = tableHeader + '<tr>'; } else { lineHTML = '<tr>'; } // the html for the table for(c = 0; c < maxC; c++){ cellStyle = this.types[this.columnIndexes[c]]; lineHTML += '<td nowrap class="' + cellStyle + '">'; // get the cell data. This is basically equivalent to // this.rows[r][c] except that: // 1. we want to format the data: formatItem(item, formatName) // 2. we have to look things up via index, bc they might have been moved around cellData = this.formatItem(rows[this.rowIndexes[r]][this.columnIndexes[c]], this.formats[this.columnIndexes[c]]); lineHTML += cellData; } lineHTML += '</tr>\n'; if (r % 35 == 34) lineHTML += '\n</table></div><br><br>\n' + repHeader; HTMLLines[r] = lineHTML; repWindow.rowIndex.innerHTML = r + 1; } // concatenate the rows of data myHTML += HTMLLines.join(""); var totalsHTML = '<tr>'; this.calculateColTotals(); for (i = 0; i < this.colTotals.length; i++) totalsHTML += this.colTotals[this.columnIndexes[i]]; totalsHTML += '</tr>'; myHTML += totalsHTML; myHTML += '\n</table>'; // if (repWindow != undefined) repWindow.document.write(myHTML); //repWindow.document.write(repHeader); //repWindow.document.close(); repWindow.document.write(myHTML); repWindow.tmpmsg.outerHTML = ""; // repWindow.zoomMenuHolder(0).innerHTML = zoomMenu; repWindow.document.close(); } // next function not currently in use function stopReport() { this.reportStop = true; } ]]> @code function zoom(op) { eval("z = z " + op + " 10"); for (i = 0; i < repWindow.fastReportTable.length; i++) { repWindow.fastReportTable(i).style.zoom = z + '%'; } } // for use by fast report window: resize the report so that the at // least the first table of data is no longer than 1000 pixels wide. // This way it should print out on one A4 piece of paper (landscape) function initFastReport() { var w = repWindow.fastReportTable(0).clientWidth; resizePct = 940 / w; for (i = 0; i < repWindow.fastReportTable.length; i++) { repWindow.fastReportTable(i).style.zoom = resizePct; } } @code <![CDATA[ // Navigation methods function goNext() { this.setStartRow(this.startRow + this.tableRows); } function goPrev() { this.setStartRow(this.startRow - this.tableRows); } function goFirst() { this.startRow = 0; this.fillTable(); } function goLast() { this.setStartRow(this.totalRows - this.tableRows); } ]]> @code <![CDATA[ function goSubreport(me) { if (! this.details.pageURL) return; if (me.rowIndex > this.dataArray.length) { // alert('Say there, pal. You just double clicked on an empty row.\nWhat exactly are you trying to accomplish?'); return; } var myURL = this.details.pageURL + "&"; var myParam = ""; var myValue = ""; var colNum = 0; var popWinName = "nothing"; for (i=0; i < this.details.params.length; i++) { myParam = this.details.params[i]; // We have the name of the col (this is the param name) // now we need to get the value of the column that // has this name. In order to do that first we need // to know what is the column index for the given col name. // So, we loop thru the col name array and find what position // this name is at. for (colNum = 0; c < this.names.length; colNum++) { if (this.names[colNum] == myParam) break; } // Now that we've got the col num we can get the value // from the data Array. Each row of the table has a "rowIndex" // attribute, and the startRow is the index of the first row // (which might not be zero, because the user might have clicked // on 'next'). We divide rowIndex by 1 so that Javascript knows // that it is a number and not a string. We use row index to look // up the actual rowindex bc the table might have been sorted, meaning // that the row index is no longer the same as the data order. myValue = this.dataArray[this.rowIndexes[me.rowIndex / 1] + this.startRow][colNum]; // append the param (i.e. the col name) and value on to the url myURL += myParam + '=' + myValue; // save the first param value to use in the popup window name. The first // value should be some kind of unique id, so that the pop window (used // for detail screen) will correspond to that id popWinName = myValue; if (i < this.details.params.length - 1) myURL += '&'; } ]]> <xsl:choose> <xsl:when test="$popUp = 'false'"> location.href=myURL; </xsl:when> <xsl:otherwise> var popWin = window.open(myURL,popWinName,"height=618,width=934,left=40,top=45,status=no,toolbar=no,menubar=no,location=no,resizable=yes"); popWin.focus(); </xsl:otherwise> </xsl:choose> <![CDATA[ // window.open("Sample.htm",null,"height=400,width=800,status=yes,toolbar=no,menubar=no,location=no"); } ]]> @code <![CDATA[ /** * sortRows: Sort rows based on one column * * @me the TD element of the colheader that was clicked * @colThatWasClicked On the html table object, the number of the column that the user clicked on. * */ function sortRows(me, colThatWasClicked) { colThatWasClicked; // First we need to figure out which actual data col is in the current html col. var colIndex = this.columnIndexes[colThatWasClicked] + 1; colIndex--; // code to toggle the search direction if (colThatWasClicked == this.colThatWasClickedPrev) { this.oldSort = this.oldSort * -1; } else { this.oldSort = 1; } this.colThatWasClickedPrev = colThatWasClicked; oldSort = this.oldSort; // the alphabetic sort function charBasedSort(a,b) { if (b[colIndex] < a[colIndex]) return oldSort; if (b[colIndex] > a[colIndex]) return oldSort * -1; if (b[colIndex] == a[colIndex]){ return 0; } } // the numeric sort function numBasedSort(a, b) { x = (a[colIndex])/1 - (b[colIndex])/1; return x * oldSort; } // Find out what data type that col has var colDataType = this.types[colIndex]; // Now that we know the type, we choose the sort switch (colDataType) { case 'Text': case 'Date': this.dataArray.sort(charBasedSort); break; default: this.dataArray.sort(numBasedSort); } // reset the col header style to that for an unsorted col, // and save the col widths (because they will be lost when the table is redrawn) var leftColWidths = new Array(); var oLeftPane = eval(this.id + 'LeftPaneTable'); for (c = 0; c < oLeftPane.rows(0).cells.length; c++) { leftColWidths[c - 1] = oLeftPane.rows(0).cells(c).clientWidth; //alert("x c =" + c + " \nw = " + oLeftPane.rows(0).cells(c).clientWidth); oLeftPane.rows(0).cells(c).className = "colhead"; } var rightColWidths = new Array(); var oRightPane = eval(this.id); for (c = 0; c < oRightPane.rows(0).cells.length; c++) { rightColWidths[c - 1] = oRightPane.rows(0).cells(c).clientWidth; oRightPane.rows(0).cells(c).className = "colhead"; } if (this.tableStyle == "paged") { this.fillTable(); } else { this.drawFilledTable(); } eval(me.id + '.className = "colheadsorted"'); // Try to highlight col in left pane. // If the clicked col has been moved into the left pane, then there will be more // than one col with the same id, and the first one will be accessible as id(0). eval ('try{' + me.id + '(0).className="colhead colheadsorted"}catch(e){}finally{}'); this.restoreMouseDefaults(); //this.setColWidths(leftColWidths,rightColWidths); return; } << fix col widths >> // Hey, why isn't this function inside the sort function, since that is only place it will be called // from? Gee I'm glad you asked that. It's bc this function has to be called in a separate event // (e.g. onclick) than the soft function, otherwise, the screen doesn't get refreshed with the new // cursor. function showHourGlass() { return; var myRules = document.styleSheets[0].rules; for (i = 0; i < myRules.length; i++) { this.rules[i] = myRules[i].style.cursor; myRules[i].style.cursor = 'wait'; } } function restoreMouseDefaults() { return; // Need this line in case showHourGlass wasn't called if (this.rules[0] == undefined) return; var myRules = document.styleSheets[0].rules; for (i = 0; i < myRules.length; i++) { myRules[i].style.cursor = this.rules[i]; } } ]]> @code function setColWidths(leftColWidths, rightColWidths) { // right pane var oRightPane = eval(this.id); var step = 1; var colAdjust = 1; var startRow = 1; if (this.tableStyle != "paged") { step = 2; colAdjust = 0; startRow = 0; } for (c = 0; c < oRightPane.rows(0).cells.length; c++) { label = colLabel(c + colAdjust); //alert(label); label.style.overflow = 'hidden'; label.style.width = Math.max(rightColWidths[c] - 10, 0); //alert(c + " " + rightColWidths[c]); // loop thru the NOBR elements in each field in the column // alert(c); for (r = startRow; r < oRightPane.rows.length; r += step) { // get the NOBR element in the cell nobrEL = oRightPane.rows(r).cells(c).firstChild; nobrEL.style.overflow = 'hidden'; nobrEL.style.width=Math.max(rightColWidths[c] - 10, 10); } } return; if (this.tableStyle == "masterDetail") return; // left pane var oLeftPane = eval(this.id + "LeftPaneTable"); for (c = 0; c < oLeftPane.rows(0).cells.length; c++) { label = colLabel(c); label.style.overflow = 'hidden'; // alert(leftColWidths[c]); label.style.width = Math.max(leftColWidths[c] - 10, 0); // loop thru the NOBR elements in each field in the column for (r = 1; r < oLeftPane.rows.length; r++) { // get the NOBR element in the cell nobrEL = oLeftPane.rows(r).cells(c).firstChild; nobrEL.style.overflow = 'hidden'; nobrEL.style.width=Math.max(leftColWidths[c] - 10, 0); } } // adjust left and right pane widths oRightPane.parentElement.style.width = Math.max(this.tableWidth - oLeftPane.clientWidth, 10); } @code << get multilevel data >> << show multilevel view >> << multilevel row methods >> @code <![CDATA[ // this array will be used to remember which detail tables we have already retrieved gotIt = new Array(); function getDetail(show, position, url) { if (this.tableStyle == 'paged') { alert("Multilevel view is only available when this result set is shown in vertically scrolling display.\nThe current display is paged (not vertically scrolled). \nPlease choose vertical scrolling from the options menu.") return; } mlMenu.style.display = "block"; function hash() { } var dataRowHash = new hash(); if (show) { // check to see if we already have this data if (gotIt[position]) { itemFrame = eval ("level1_" + position); for (r = 0; r < detailFrame.length; r++) { itemFrame(r).style.display = "block"; } return; } gotIt[position] = true; rowsetXML.async = false; rowsetXML.load(url); var dataCols, lineHTML, pk; var dataRows = rowsetXML.getElementsByTagName("row"); // get the formats and headers for the detail table var formats = rowsetXML.getElementsByTagName("format"); var headings = rowsetXML.getElementsByTagName("heading"); var types = rowsetXML.getElementsByTagName("type"); var colNames = rowsetXML.selectNodes("//column/@name"); var widths = new Array(); // if the cell is a desc cell, make it wide for (c = 0; c < colNames.length; c++) { widths[c] = "10"; if (colNames[c].text.match(/desc/i)) { widths[c] = ""; } } var width=10; // create a hash with keys = the pk and values = the html for the detail table rows for that pk lineHTML = ""; for (r = 0; r < dataRows.length; r++) { dataCols = dataRows[r].getElementsByTagName("value"); lineHTML = ""; for (c = 2; c < dataCols.length; c++) { lineHTML += '<td class="' + types(this.columnIndexes[c]).text + '"' //+ ' style="width:' // + (widths[c].text * 6) + '"' // + widths[c] + '"' + ' nowrap>' + this.formatItem(dataCols[c].text, formats[c].text) + '</td>'; } lineHTML = '<tr onclick="highlightSubTableRow(this)" class="level2Row">' + lineHTML + '</tr>'; pk = dataCols[1].text; // KLUDGE if (dataRowHash[pk] == undefined) { dataRowHash[pk] = lineHTML; } else { dataRowHash[pk] += lineHTML; } } // the html for the detail table head var headingHTML = ""; for (c = 2; c < headings.length; c++) { headingHTML += '<td valign="top" class="level2ColHeadCell" nowrap>' + this.formatItem(headings[c].text, "") + '</td>'; } headingHTML = '<tr class="level2ColHeadRow">' + headingHTML + '</tr>'; // now loop thru the detail tables in the DHTML and insert the table lines // detailFrame is an empty element holding all of the subtables for a given master line // itemFrame is an empty element holding a single subtable itemFrame = eval ("level1_" + position); for (r = 0; r < detailFrame.length; r++) { pk = itemFrame(r).pk; if (dataRowHash[pk]) { itemFrame(r).innerHTML = '<table border="0" class="level2Table">' + headingHTML + dataRowHash[pk] + '</table>'; } else { itemFrame(r).innerHTML = '<table border="0" class="level2Table">' + headingHTML + '</table>'; } detailFrame(r).parentElement.style.display = "block"; } // show the buttons this.multilevel(); } else { // else hide it itemFrame = eval ("level1_" + position); for (r = 0; r < detailFrame.length; r++) { itemFrame(r).style.display = "none"; } } //fso = new ActiveXObject("Scripting.FileSystemObject"); //f = fso.CreateTextFile('testm.htm',true); //f.write(topx.innerHTML); //f.Close(); } ]]> @code <![CDATA[ function multilevel() { var oDHTMLTable = eval(this.id); this.tableStyle = "masterDetail"; // get rid of left pane, including col headers and col sums leftPane.innerHTML = ""; leftPaneHeader.innerHTML = ""; leftPaneSumRow.innerHTML = ""; // unhide cols in right pane var maxTableR = oDHTMLTable.rows.length; for (r = 0; r < maxTableR; r = r + 2) { oDHTMLTable.rows(r).className = "level1Row"; for (c = 0; c < this.nonScrollingColumns.length; c++) { // skip the column if it hasn't been given a 'true' value in // the non-scrolling columns Array. if (this.nonScrollingColumns[c] == undefined) continue; if (! this.nonScrollingColumns[c]) continue; // alert(oDHTMLTable.rows(0).cells(c + 1).innerHTML); oDHTMLTable.rows(r).cells(c + 1).className = "level1Cell"; oDHTMLTable.rows(r).cells(c + 1).style.display = "block"; } } var rightPaneHeaderTable = rightPaneHeader.firstChild; var rightPaneSumRowTable = rightPaneSumRow.firstChild; // unhide col headers and col sums for (c = 0; c < this.nonScrollingColumns.length; c++) { if (this.nonScrollingColumns[c] == undefined) continue; if (! this.nonScrollingColumns[c]) continue; sumCell(c).style.display = 'block'; rightPaneHeaderTable.rows(0).cells(c + 1).style.display = "block"; rightPaneSumRowTable.rows(0).cells(c + 1).style.display = "block"; } // show the open/close buttons for (c = 0; c < plusButton.length; c++) { plusButton(c).style.display = 'block'; } plusButtonHeader.style.display = 'block'; plusButtonFooter.style.display = 'block'; // reset the data pane width (now right pane only) rightPane.style.width = 782; rightPaneHeader.style.width = 782; rightPaneSumRow.style.width = 782; } ]]> @code <![CDATA[ function toggleRowOpen(me) { event.cancelBubble = true; var myDisplay; myDisplay = me.parentNode.nextSibling.style.display; if (myDisplay != 'none') { myDisplay = 'none'; me.firstChild.innerHTML = '+'; } else { myDisplay = 'block'; me.firstChild.innerHTML = '−'; } me.parentNode.nextSibling.style.display = myDisplay; // if (this.highlightedRow != null) { // this.highlightedRow.className = this.oldRowStyle; // } // this.oldRowStyle = me.className; // me.className = "highlightedRow"; // this.highlightedRow = me; } function closeAll() { if (this.tableStyle == 'masterDetail') { var r; var maxRows = this.tableRows; var runMe; for (r = 1; r < maxRows * 2; r = r + 2) { runMe = (this.id + '.rows(' + r + ').style.display = "none";'); eval(runMe); runMe = (this.id + '.rows(' + (r - 1) + ').cells(0).firstChild.innerHTML = "+";'); eval(runMe); } } else { alert("Nothing to close!"); } } function openAll(){ if (this.tableStyle == 'masterDetail') { var r; var maxRows = this.tableRows; var runMe; for (r = 1; r < maxRows * 2; r = r + 2) { runMe = (this.id + '.rows(' + r + ').style.display = "block"'); eval(runMe); runMe = (this.id + '.rows(' + (r - 1) + ').cells(0).firstChild.innerHTML = "−"'); eval(runMe); } } else { alert("Nothing to open!"); } } ]]> @code <![CDATA[ /** * changeCol: Change which column of data appears in a given colum in the display table. * * @colIndex The column in the table that the picklist is in. * @titleIndex The title index that has been chosen to put in that column. */ // the "action" parameter is for future functionality function changeCol(colIndex, titleIndex, action) { // which data column was being displayed in this html column? var oldIndex = this.columnIndexes[colIndex]; // find out which html col now contains the data column which is being moved // to the chosen col. Put the old data col in that html col. for (i = 0; i < this.columnIndexes.length; i++) { if (this.columnIndexes[i] == titleIndex) { this.columnIndexes[i] = oldIndex; break; } } // assign the chosen data column to the chosen html column this.columnIndexes[colIndex] = titleIndex; this.drawEmptyTable(); this.fillTable(); this.restoreMouseDefaults(); return; } ]]> <![CDATA[ // Set columns back to same order as beginning (which is the same as in the original data). function reset() { for (i = 0; i < this.dataArray.length; i++) this.rowIndexes[i] = i; for (i = 0; i < this.dataArray[1].length; i++) this.columnIndexes[i] = i; this.drawEmptyTable(); this.fillTable(); } ]]> <![CDATA[ // The following function is under development. function addSumFunctionByColName(colName, strSumFunction) { var colIndex = -1; for(c = 0; c < this.columnIndexes.length; c++){ if (this.titles[c] == colName) { colIndex = c; break; } } this.sumFunctions[colIndex] = strSumFunction; } // for resizing table after window has been resized function resize () { if (this.resized == true) { try { oDHTMLTable = eval(this.id); oDHTMLTable.style.display = 'none'; this.tableWidth = document.body.clientWidth - 20; // "tableHeader" is temporarily hard coded here til I decide // what to do with it... TODO fix tableHeader.style.width = document.body.clientWidth - 20; rightPaneHeader.style.width = rightPane.clientWidth; oDHTMLTable.style.display = 'block'; this.fillTable(); } catch (e) { } } this.resized = false; } function flagResize () { // can't seem to get "this.resized" to work so have hard coded the name here... dataTable.resized = true; } ]]> @code <![CDATA[ /* changeFontSize : Change the font size of an HTML element by changing the doc stylesheet. * This function will work with any page. * * @op : + or - * @styleName : e.g. TD or .custom */ function changeFontSize(op, styleName) { var myRules = document.styleSheets[0].rules; var size; var lineHeight = ""; for (i = 0; i < myRules.length; i++) { if (myRules[i].selectorText == styleName) { var lineHeight = myRules[i].style.lineHeight; size = myRules[i].style.fontSize; size = size.replace(/\D/g, ""); // get the numeral (the style will be e.g. "8pt") size = size / 1; // i.e. (int) size eval ("size = size " + op + " 1"); size = size + "pt"; myRules[i].style.fontSize = size; } } } // add commas to a numeral function commify (myItem) { myItem = myItem.toString(); // add commas myItem = myItem.replace(/^(-?\d+)(\d{3})/g, "$1,$2"); // kludge - the latter command only gets the first comma // this gets the second... couldn't get a more Perlish regex to work here. myItem = myItem.replace(/^(-?\d+)(\d{3})/g, "$1,$2"); // this gets the third.. yo, if this was Perl, I wouldn't have to do this... myItem = myItem.replace(/^(-?\d+)(\d{3})/g, "$1,$2"); // and the fourth... myItem = myItem.replace(/^(-?\d+)(\d{3})/g, "$1,$2"); // did I mention that the above regexes would have been better in Perl? //myItem = "$" + myItem; return myItem; } ]]> @language html @code <body onload="init();"> <span id="topx"> << report title >> << options >> << the container for the DHTML table object >> << script to draw table >> << xsl for rowset data >> </span> <div id="TDsel" onmouseover="dragTD=true" onmouseout="dragTD=false" onmousemove="dataTable.TDselMove()" onmouseup="dataTable.TDselUp()" style="position:absolute;filter:alpha(opacity=30);border:2 solid black;top:0;left:-1000;height:100%;z-index:2;background-color:thistle" > </div> </body> @code <xsl:if test="$reportTitle"> <table style="margin-left:0; margin-bottom:1;" width="{$tableWidth - 1}" cellpadding="0" bgcolor="#C9E5E7" border="0" id="tableHeader"> <tr> <td title="{$reportTitle}" class="{$titleFormat}"> <nobr style="width:340; overflow:hidden"> <xsl:value-of select="$reportTitle"/> </nobr> </td> </tr> </table> </xsl:if> @code <xsl:if test="$customization != 'false'"> <div class="dialogCustom1"> << menubar >> <div id="customDialog" style="display:none"> <br/><br/><br/><br/><br/> <table class="dialogTable" cellpadding="2" cellspacing="2" width="350" > <tr style="background-color:navy"> <td style="cursor:hand;border:0" align="right" onclick="showCustomDialog()"> <img src="/inquiry/images/x2.png" border="0"/> </td> </tr> << option items >> </table> << customization scripts >> </div> </div> </xsl:if> @code                             <nobr style="overflow:hidden; position:absolute; top:0;"> <table><nobr><tr><td><nobr>  <a href="javascript:changeFontSize('+', 'TD')">Zoom in</a>   <a href="javascript:changeFontSize('-', 'TD')">Zoom out</a>   </nobr> </td> <td> <nobr> <span id="mlMenu" style="display:none"> <a href="javascript:dataTable.openAll()">Open All</a>   <a href="javascript:dataTable.closeAll()">Close All</a>   </span> </nobr> </td></tr></nobr></table> </nobr> @code << capitalize >> << show column picklist >> << orientation >> << number of records to show >> << reset columns to defaults >> << pick non scrolling rows >> @code <tr class="dialogRow"> <td align="center"> <strong>Capitalize: </strong> <input type="checkbox" value="" onclick="dataTable.mixedCase = ! this.checked;dataTable.drawEmptyTable();dataTable.fillTable()"/> </td> </tr> @code <tr> <td class="dialogRow" align="center"> <strong>Show column pick list: </strong> <input type="checkbox" value="" id="pickListCheckbox" onclick="customDialog.style.display = 'none';dataTable.pickList = this.checked;dataTable.drawEmptyTable();dataTable.fillTable()"/> </td> </tr> @code <tr> <td class="dialogRow" align="center"> <strong>Orientation: </strong> <input type="radio" checked="true" name="orientation" onclick="dataTable.setOrientation('landscape')">View as Row</input>  <input type="radio" name="orientation" onclick="dataTable.setOrientation('portrait')">View as Col</input> </td> </tr> @code <tr> <td class="dialogRow" align="center"> <strong>Number of records to show: </strong> <input style="font-size:10; color:#000000; width:20;" type="text" value="" id="inputNumRows" onchange="dataTable.setTableRows(this.value);"/> </td> </tr> @code <tr> <td class="dialogRow" style="height:30" align="center"> <button onclick="dataTable.reset()" style="font-size:11; font-weight:normal; width:180; background-color:#E9F2F2">Reset Columns to Defaults</button> </td> </tr> @code  @code <script> <![CDATA[ function openSplash(splashType){ window.open("/inquiry/html/start" + splashType + "splash.html?delay=5000", "", "height=97,width=285,left=350,top=320,status=no,toolbar=no,menubar=no,location=no,resizable=no,titlebar=no"); } ]]> function showCustomDialog() { pickListCheckbox.checked = false; if (customDialog.style.display == 'none') { // have to get rid of col pick lists when displaying custom dialog bc // otherwise the dropdown menus show thru the dialog if (dataTable.pickList) { dataTable.pickList = false; dataTable.drawEmptyTable(); dataTable.fillTable() } customDialog.style.display = 'block' } else { customDialog.style.display = 'none' } } // add or remove a selected column to the left pane function setNonScrollingColumn(colIndex) { if (dataTable.nonScrollingColumns[colIndex - 1] == true) { dataTable.nonScrollingColumns[colIndex - 1] = false; } else { dataTable.nonScrollingColumns[colIndex - 1] = true; } dataTable.drawEmptyTable(); dataTable.fillTable(); } </script> @code <div id="tableFrame" onmousemove="selection.empty()"> </div> @code << metadata >> << first page of data >> << create the table with one page of data >> << the rest of the data >> << create the table again >> @doc Fills the following associative arrays: oColTotals oDetailJSP Fills the following arrays: fieldNames fieldTitles (col headings) fieldFormats (used by format function) fieldTypes (for choosing css style) @code <script> var paged = <xsl:value-of select="$paged"/> // associative array to hold precalculated col totals function clsColTotals() { <xsl:for-each select="//rows/total/value"> <xsl:if test=". != ''"> this.<xsl:value-of select="@name"/>='<xsl:value-of select="."/>';</xsl:if> </xsl:for-each> } oColTotals = new clsColTotals(); // associative array to hold the JSP detail page info function clsDetailJSP() { this.pageURL='<xsl:value-of select="normalize-space(//detail-jsp/jsp-name)"/>'; this.params=[<xsl:for-each select="//detail-jsp/pk">'<xsl:value-of select="normalize-space(.)"/>'<xsl:if test="position() != last()">,</xsl:if></xsl:for-each>]; } oDetailJSP = new clsDetailJSP();  var fieldNames = new Array(<xsl:text/> <xsl:for-each select="//coldef/column"> <xsl:text>"</xsl:text> <xsl:value-of select="@name"/>"<xsl:if test="position() != last()">,</xsl:if> </xsl:for-each> <xsl:text>);</xsl:text>  var fieldTitles = new Array(<xsl:text/> <xsl:for-each select="//coldef/column"> <xsl:text>"</xsl:text> <xsl:value-of select="normalize-space(heading)"/>"<xsl:if test="position() != last()">,</xsl:if> </xsl:for-each> <xsl:text>);</xsl:text> // fix the titles so that they will wrap for a max of two lines <![CDATA[ for (i = 0; i < fieldTitles.length; i++) { // replace all the spaces with nbsp; fieldTitles[i] = fieldTitles[i].replace(/ /g, " "); // now replace the first nbsp with a reg space fieldTitles[i] = fieldTitles[i].replace(/ /, " "); } ]]>  var fieldTypes = new Array(<xsl:text/> <xsl:for-each select="//coldef/column"> <xsl:text>"</xsl:text> <xsl:value-of select="normalize-space(type)"/>"<xsl:if test="position() != last()">,</xsl:if> </xsl:for-each> <xsl:text>);</xsl:text>  var fieldFormats = new Array(<xsl:text/> <xsl:for-each select="//coldef/column"> <xsl:text>"</xsl:text> <xsl:value-of select="normalize-space(format)"/>"<xsl:if test="position() != last()">,</xsl:if> </xsl:for-each> <xsl:text>);</xsl:text> </script> @doc Just get as many rows as we need to fill the first page. @code <script> var rows = new Array(); <xsl:for-each select="//row[position() < $newRowCount + 1]"> rows [<xsl:value-of select="position() - 1"/><xsl:text>] = [</xsl:text> <xsl:for-each select="./*"> <xsl:text>"</xsl:text>  <xsl:value-of select="translate(normalize-space(.),'"', '')"/> <xsl:text>"</xsl:text> <xsl:if test="position() != last()">,</xsl:if> </xsl:for-each> <xsl:text>];</xsl:text> </xsl:for-each> </script> @code <script> var paged = <xsl:value-of select="$paged"/> // create a new data table var tableStyle = "paged"; if (! paged) tableStyle = "scrolling"; var dataTable = new clsDHTMLTable(<xsl:value-of select="$newRowCount"/>,0, "DHTMLTable", "dataTable", "tableFrame", rows, fieldNames, fieldTitles, fieldTypes, fieldFormats, null, tableStyle, oColTotals, oDetailJSP); dataTable.orientation="<xsl:value-of select="$orientation"/>"; dataTable.totalFlags[2] = true; // move as many cols into the left (non scrolling page) as are indicated by the // nonScrollingCols parameter if (<xsl:value-of select="$numNonScrollingCols"/> < rows[0].length ) { for (i = 0; i <=<xsl:value-of select="$numNonScrollingCols"/>; i++) { dataTable.nonScrollingColumns[i - 1] = true; } } dataTable.drawEmptyTable(); dataTable.totalRows = <xsl:value-of select="count(//rows/row)"/>; dataTable.fillTable(false); </script> @doc html lines of data <tr ondblclick='dataTable.goSubreport(this);' class='evenrow' onclick='dataTable.highlightRow(this);' rowIndex="0"> <td id="plusButton" class="dataRow" style="display:none" onclick="dataTable.toggleRowOpen(this);"> <nobr class="plusButton">minus;</nobr> </td> <td id="plusButton" class="dataRow" style="display:none" onclick="dataTable.toggleRowOpen(this);"> <nobr class="plusButton">minus;</nobr> </td> <td class="Text" style="display:none;" ><nobr>0000491</nobr></td> <td class="Text" ><nobr>columbia mall</nobr></td> <td class="default" ><nobr>168,657,853.56</nobr></td> <td class="Number" ><nobr>7.377</nobr></td> <td class="Text" ><nobr>MD</nobr></td> <td class="Text" ><nobr>regional mall</nobr></td> <td class="Text" ><nobr>PEN</nobr></td> <td class="Text" ><nobr>NT</nobr></td> </tr> <tr STYLE="display:none"> <td id="detailFrame" pk="0000491" colspan="13"> <span id="level1_0" + pk = "0000491"></span> <span id="level1_1" + pk = "0000491"></span> <span id="level1_2" + pk = "0000491"></span> <span id="level1_3" + pk = "0000491"></span> <span id="level1_4" + pk = "0000491"></span> </td> </tr> @code <script> <xsl:for-each select="//row[position() > $newRowCount]"> rows [<xsl:value-of select="position() + $newRowCount - 1"/><xsl:text>] = [</xsl:text> <xsl:for-each select="./*"> <xsl:text>"</xsl:text>  <xsl:value-of select="translate(normalize-space(.),'"', '')"/> <xsl:text>"</xsl:text> <xsl:if test="position() != last()">,</xsl:if> </xsl:for-each> <xsl:text>];</xsl:text> </xsl:for-each> </script> @code <script> dataTable = new clsDHTMLTable(<xsl:value-of select="count(//rows/row)"/>,0, "DHTMLTable", "dataTable", "tableFrame", rows, fieldNames, fieldTitles, fieldTypes, fieldFormats, null, tableStyle, oColTotals, oDetailJSP); dataTable.totalFlags[2] = true; if (paged == false) { // move as many cols into the left (non scrolling page) as are indicated by the // nonScrollingCols parameter if (<xsl:value-of select="$numNonScrollingCols"/> < rows[0].length ) { for (i = 0; i <=<xsl:value-of select="$numNonScrollingCols"/>; i++) { dataTable.nonScrollingColumns[i - 1] = true; } } dataTable.drawFilledTable(); dataTable.totalRows = <xsl:value-of select="count(//rows/row)"/>; } </script> @code <xml id="rowsetXSL" src="../xml/xmlrowset-WD.xsl"></xml> <xml id="rowsetXML"></xml> @silent @root ml.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Multilevel Demo Page</title> </head> <frameset cols="154,*" > <frame name="nav" src="left.htm"> <frame name="results" src="main.htm"> </frameset> </html> @first <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> @language html <html> <<head>> <<body>> </html> @code <head> <title>Multilevel Demo 2</title> <style type="text/css"> </style> <script language="Javascript"> function processDetail(currentCheckBox) { if (! parent.results.loaded) { currentCheckBox.checked = false; //alert('Page has not finished loading. Please retry after page has loaded.'); //return; } var url = ""; var position = 1; var detailType = currentCheckBox.value; if (detailType == "AUTH") { position = 1; url = "detail1.xml"; } if (detailType == "NOTE") position = 2; if (detailType == "PROP") { position = 3; url = "detail2.xml"; } parent.results.dataTable.getDetail(currentCheckBox.checked, position, url); document.body.style.cursor = "default"; } function init() { try { check1.checked = false; check2.checked = false; } catch (e) { } } </script> </head> @code <body onload="init()" bgcolor="#FFFFFF" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> <br> <br> <table width="208" cellpadding="2" cellspacing="0" border="0"> <tr> <td valign="top"> <table cellpadding="2" cellspacing="0" border="0"> <tr> <td colspan="2" style="color:black; font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:8pt">Choose A Detail Level</td> </tr> <tr> << checkboxes to choose detail >> </tr> </table> </td> </tr> </table> </body> @code <td width="20"> </td> <td width="143" style="color:#0C6EB0; font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:8pt"><input id="check1" type=checkbox value="AUTH"; onclick="processDetail(this);">Authorization</td> </tr> <tr> <td width="20"> </td> <td width="143" style="color:#0C6EB0; font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:8pt;"><input id="check2" type=checkbox value="PROP" onclick="processDetail(this);">Property</td> </tr> <tr> <td> </td> @silent @root main.xml <?xml version="1.0" encoding="utf-8"?> <rows xmlns:dt="urn:schemas-microsoft-com:datatypes" rptTitle="Note Authorization"> <coldef> <column name="noteNo"><heading>Note No</heading><type>Text</type><needtotal>N/A</needtotal><hidden>"n"</hidden><format>AN</format><width>10</width></column> <column name="projName"><heading>Project Name</heading><type>Text</type><needtotal>N/A</needtotal><hidden>"n"</hidden><format>TX</format><width>20</width></column> <column name="currPrinBal"><heading>Principal Bal</heading><type>default</type><needtotal>Y</needtotal><hidden>"n"</hidden><format>MYF</format><width>20</width></column> <column name="grsRate"><heading>Grs Rt</heading><type>Number</type><needtotal>N</needtotal><hidden>"n"</hidden><format>RTF</format><width>7</width></column> <column name="locStateCode"><heading>St</heading><type>Text</type><needtotal>N/A</needtotal><hidden>"n"</hidden><format>TX</format><width>3</width></column> <column name="locCity"><heading>City</heading><type>Text</type><needtotal>N/A</needtotal><hidden>"n"</hidden><format>TX</format><width>16</width></column> <column name="clsgDt"><heading>Clsg Dt</heading><type>Date</type><needtotal>N/A</needtotal><hidden>"n"</hidden><format>SDT</format><width>9</width></column> <column name="matDt"><heading>Mat Dt</heading><type>Date</type><needtotal>N/A</needtotal><hidden>"n"</hidden><format>SDT</format><width>9</width></column> <column name="term"><heading>Term</heading><type>Number</type><needtotal>N/A</needtotal><hidden>"n"</hidden><format>NM</format><width>4</width></column> <column name="propClassDesc"><heading>Property Class</heading><type>Text</type><needtotal>N/A</needtotal><hidden>"n"</hidden><format>TX</format><width>15</width></column> <column name="propSubClassDesc"><heading>Property Subclass</heading><type>Text</type><needtotal>N/A</needtotal><hidden>"n"</hidden><format>TX</format><width>15</width></column> <column name="tiaaAcctDesc"><heading>Account</heading><type>Text</type><needtotal>N/A</needtotal><hidden>"n"</hidden><format>TX</format><width>10</width></column> <column name="installAmt"><heading>Install Amt</heading><type>default</type><needtotal>Y</needtotal><hidden>"n"</hidden><format>MYF</format><width>14</width></column> <column name="teamDesc"><heading>Group</heading><type>Text</type><needtotal>N/A</needtotal><hidden>"n"</hidden><format>TX</format><width>10</width></column> </coldef> <row><value name="noteNo">000032000</value><value name="projName">ROUND SQUARE MALL</value><value name="currPrinBal">3402935.83</value><value name="grsRate" dt:dt="number">8.0</value><value name="locStateCode">WI</value><value name="locCity">SMALLVILLE </value><value name="clsgDt">1967-12-20</value><value name="matDt">2005-05-01</value><value name="term" dt:dt="number">449</value><value name="propClassDesc">RETAIL </value><value name="propSubClassDesc">REGIONAL MALL </value><value name="tiaaAcctDesc">PEN</value><value name="installAmt">78928.93</value><value name="teamDesc">NT</value></row> <row><value name="noteNo">000032001</value><value name="projName">BIG SQUARE MALL</value><value name="currPrinBal">4.290948695E7</value><value name="grsRate" dt:dt="number">7.9</value><value name="locStateCode">WI</value><value name="locCity">SMALLVILLE </value><value name="clsgDt">1995-09-20</value><value name="matDt">2005-10-01</value><value name="term" dt:dt="number">120</value><value name="propClassDesc">RETAIL </value><value name="propSubClassDesc">REGIONAL MALL </value><value name="tiaaAcctDesc">PEN</value><value name="installAmt">325659.86</value><value name="teamDesc">NT</value></row> <row><value name="noteNo">000041707</value><value name="projName">JOE CENTER IND PARK</value><value name="currPrinBal">510779.67</value><value name="grsRate" dt:dt="number">10.5</value><value name="locStateCode">NJ</value><value name="locCity">SMALLVILLE </value><value name="clsgDt">1971-11-17</value><value name="matDt">2006-06-01</value><value name="term" dt:dt="number">415</value><value name="propClassDesc">INDUSTRIAL </value><value name="propSubClassDesc">WAREHOUSE/DISTRIBUTION </value><value name="tiaaAcctDesc">PEN</value><value name="installAmt">10337.24</value><value name="teamDesc">ESI</value></row> <row><value name="noteNo">000043500</value><value name="projName">BILLY BOB RHUBARB RANCH</value><value name="currPrinBal">230405.84</value><value name="grsRate" dt:dt="number">9.875</value><value name="locStateCode">CA</value><value name="locCity">SMALLVILLE </value><value name="clsgDt">1979-07-31</value><value name="matDt">2005-08-01</value><value name="term" dt:dt="number">313</value><value name="propClassDesc">INDUSTRIAL </value><value name="propSubClassDesc">WAREHOUSE/DISTRIBUTION </value><value name="tiaaAcctDesc">PEN</value><value name="installAmt">5355.0</value><value name="teamDesc">W</value></row> <row><value name="noteNo">000048400</value><value name="projName">URK FASHION</value><value name="currPrinBal">0.0</value><value name="grsRate" dt:dt="number">10.0</value><value name="locStateCode">CA</value><value name="locCity">BROOKLYN </value><value name="clsgDt">1980-08-25</value><value name="matDt">2013-11-01</value><value name="term" dt:dt="number">399</value><value name="propClassDesc">RETAIL </value><value name="propSubClassDesc">REGIONAL MALL </value><value name="tiaaAcctDesc">PEN</value><value name="installAmt">233825.13</value><value name="teamDesc">W</value></row> <row><value name="noteNo">000048401</value><value name="projName">URK FASHION</value><value name="currPrinBal">0.0</value><value name="grsRate" dt:dt="number">9.375</value><value name="locStateCode">CA</value><value name="locCity">BROOKLYN </value><value name="clsgDt">1980-08-25</value><value name="matDt">2013-11-01</value><value name="term" dt:dt="number">399</value><value name="propClassDesc">RETAIL </value><value name="propSubClassDesc">REGIONAL MALL </value><value name="tiaaAcctDesc">PEN</value><value name="installAmt">145616.06</value><value name="teamDesc">W</value></row> <row><value name="noteNo">000048402</value><value name="projName">URK FASHION</value><value name="currPrinBal">0.0</value><value name="grsRate" dt:dt="number">9.75</value><value name="locStateCode">CA</value><value name="locCity">BROOKLYN </value><value name="clsgDt">1981-12-30</value><value name="matDt">2013-11-01</value><value name="term" dt:dt="number">383</value><value name="propClassDesc">RETAIL </value><value name="propSubClassDesc">REGIONAL MALL </value><value name="tiaaAcctDesc">PEN</value><value name="installAmt">225595.58</value><value name="teamDesc">W</value></row> <row><value name="noteNo">000048403</value><value name="projName">URK FASHION</value><value name="currPrinBal">0.0</value><value name="grsRate" dt:dt="number">9.375</value><value name="locStateCode">CA</value><value name="locCity">BROOKLYN </value><value name="clsgDt">1983-03-31</value><value name="matDt">2013-11-01</value><value name="term" dt:dt="number">368</value><value name="propClassDesc">RETAIL