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,

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

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.

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,

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>


<link rel="stylesheet" type="text/css" href="styles.css">


<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



<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

Forum search