Do you have a grid such that it work well with Coldfusion templates
Hi
Do you have a grid such that it work well with Coldfusion templates
many thanks
-Joshi
Joshi Thomas
August 18,
Joshi,
Download and Extract the file "activewidgets-grid-1.0-gpl.zip" which naturally, is available on this site.
Open the file basic.htm in the Folder
ActiveWidgets\examples\grid
Save a backup copy of basic.htm, then save it as basic.cfm
Now edit the file back so it looks something like this:
<CFQUERY datasource="#request.app.dsn#" NAME="MyQuery" blockfactor="100" maxrows="100">
SELECT *
FROM MyTable
</CFQUERY>
<html>
<head>
<title>ColdFusion Implementation of AW Grid</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<SCRIPT language=JavaScript src="javascripts.js"></SCRIPT>
<script>
var myData = [
<cfoutput query="MyQuery">["#COL1#",
"#COL2#",
"#COL3#",
"#COL4#",
"#COL5#",
"#COL6#",
"#COL7#",
"#COL8#",
"#COL9#",
"#COL10#"
],</cfoutput>
];
var myColumns = ["Col1",
"Col2",
"Col3",
"Col4",
"Col5",
"Col6",
"Col7",
"Col8",
"Col9"
];
</script>
</head>
<body bgcolor="#FFFFFF"><br><br><br>
<cfoutput>
<script>
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// set number of rows/columns
obj.setRowProperty("count", #SITDetail.RecordCount#);
obj.setColumnProperty("count", 23);
// provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});
// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");
// set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
// write grid html to the page
document.write(obj);
</script>
</cfoutput>
</body>
</html>
Yep, ColdFusion Tags wrapped in JavaScript.
Works a treat.
See where you've got the CF variables above like : "#COL1#"... you can put <CFIF><CFELSE> tags in there too... and for that matter any CF tag.
Just be careful to only use single quotes or no quotes on things like <cfelseif myVar EQ '4'>
Regards,
>David
David Casey
August 25,
Another approach to this is to use either the CSV or XML implementation of the grid to load contents and use an XMLHTTPRequest that calls a script that will generate the content and hand it back to you in the proper format. This works well for getting data out of a database and into your grid as well.
Morgan Whitney
August 25,
Dave,
Thanks for the example....
Very helpful.
A remaining question I have however, is how do I pass the changes made in the grid back to the DB?
Any assistance, much appreciated.
Gavin Baumanis
November 25,
Gavin,
You need two CFM files to build a grid that allows users to modify grid data.
In the example below I have named these files CF_awgrid.cfm and CF_awgrid_action.cfm
Also, this may be stating the obvious but, not detailed below but necessary to make this example happen, you need:
- A .js file with the activewidgets javascript on it.
- A .css file with the activewidgets styles on it.
- A application.cfm file which contains your datsource info
and...
- A database with a table in it, and, if you want the example to work out of the box, the design of the table in the fomat
columnname,datatype,datalength is....
Col1, Varchar, 255
Col2, Varchar, 255
Col3, Varchar, 255
Col4, Varchar, 255
Col5, Varchar, 255
Col6, Varchar, 255
Col7, Varchar, 255
Col8, Varchar, 255
Col9, Varchar, 255
Col10, Varchar, 255
ID, int, 8 (Primary Key, Identity = yes)
- Also you need to set up a datasource in ColdFusion Administrator
So, a fair bit of assumed know how here, but as long as you understand why you need all that stuff you should find the source code below helpful:
Source code for CF_awgrid.cfm
<CFQUERY datasource="#request.app.dsn#" NAME="MyQuery" blockfactor="100" maxrows="100">
SELECT *
FROM MyTable
</CFQUERY>
<html>
<head>
<title>ColdFusion Implementation of AW Grid</title>
<!-- CSS relative link follows. Make sure you have the awgrid css styles on your CSS file -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Javascript relative link follows. Make sure you have the awgrid javascript on your JS file -->
<SCRIPT language=JavaScript src="javascript.js"></SCRIPT>
</head>
<body bgcolor="#FFFFFF">
<br>
<br>
<br>
<br>
<br>
<script>
var myData = [
<cfoutput query="MyQuery">["<form name=MyForm ACTION=CF_awgrid_action.cfm METHOD=POST><input type=hidden name=id value=#id#><input name=Col1 value=#COL1#>#COL1#",
"<input name=Col2 value=#COL2#>",
"<input name=Col3 value=#COL3#>",
"<input name=Col4 value=#COL4#>",
"<input name=Col5 value=#COL5#>",
"<input name=Col6 value=#COL6#>",
"<input name=Col7 value=#COL7#>",
"<input name=Col8 value=#COL8#>",
"<input name=Col9 value=#COL9#>",
"<input name=Col10 value=#COL10#>",
"<input type=submit value=Update Row></form>"
],</cfoutput>
];
var myColumns = ["Column 1 Header",
"Column 2 Header",
"Column 3 Header",
"Column 4 Header",
"Column 5 Header",
"Column 6 Header",
"Column 7 Header",
"Column 8 Header",
"Column 9 Header",
"Column 10 Header",
"Action"
];
</script>
<cfoutput>
<script>
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// set number of rows/columns
obj.setRowProperty("count", #MyQuery.RecordCount#);
obj.setColumnProperty("count", 11);
// provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});
// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");
// set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
// write grid html to the page
document.write(obj);
</script>
</cfoutput>
</body>
</html>
Source code for AW_grid_action.cfm
<!--- This template takes data passed from CF_awgrid.cfm and updates the database. --->
<CFQUERY datasource="#request.app.dsn#" NAME="ModifyDB">
UPDATE MyTable
SET
Col1 = '#Form.Col1#',
Col2 = '#Form.Col2#',
Col3 = '#Form.Col3#',
Col4 = '#Form.Col4#',
Col5 = '#Form.Col5#',
Col6 = '#Form.Col6#',
Col7 = '#Form.Col7#',
Col8 = '#Form.Col8#',
Col9 = '#Form.Col9#',
Col10 = '#Form.Col10#'
WHERE ID='#Form.ID#'
</CFQUERY>
<CFLOCATION URL="CF_awgrid.cfm">
Hope this example proves useful to all ...
As as final footnote, once you've got the example working you should get in there and add some javascript that validates your form fields (rather than you CF validation techniques) and should add some styles to your inputs and buttons to make the whole thing look neat)
Regards,
> David
David Casey
January 31,