Coldfusion 8 Binding a Grid to a Tree
In a previous post I mentioned that I probably wouldn't be using these two tags because they just don't provide me with the flexibility that will allow me to give our customers what they will likely want. But that doesn't completely remove their usefulness, it just reduces it to very specific applications. It still is a good way to demonstrate binding different UI elements together.
As the title states we are going to be binding a tree's select event to a grid. This means that when a user clicks on a node of a tree an Ajax call will be made to repopulate the grid.
Lets pretend for a moment that we have a cfTree named "myTree" in a form called "myTreeForm" and our tree is populated via its own bind call to a cfc that returns directories.
<cfform name="myTreeForm" >
<cftree name="myTree" height="400" width="200" format="html">
<cftreeitem bind="cfc:#request.cfcpath#.fileExplorer.getDirectories({cftreeitempath},{cftreeitemvalue})">
</cftree>
</cfform>
Now lets further pretend that we also have a grid called fileGrid in a form called gridform. This grid could be on the same page, or not, but is also subsequently bound to a method in a component that returns files in a specified directory.
<cfform name="gridform" format="html">
<cfgrid name="fileGrid" format="html" pagesize="10" sort="true"
bind="cfc:#request.cfcpath#.fileExplorer.getfiles({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},{myTreeForm:myTree.node})">
<cfgridcolumn name="DIRECTORY" display="false"/>
<cfgridcolumn name="NAME" header="File Name" display="true"/>
<cfgridcolumn name="size" header="Size" display="true"/>
<cfgridcolumn name="datelastModified" header="Last Modified" width="150"/>
</cfgrid>
</cfform>
The biggest difference in the bind expression here and in my first post on CFGRID is the addition parameter I tagged on way at the end.
In case you missed it: {myTreeForm:myTree.node}
You only have to specify the form in the bind statement if the element you are binding to is not in the same form as the element that you are binding from.
...Or once again in normal English: You only have to specify the form in the bind expression if the two elements aren't in the same form.
And that's pretty much it.
Subscribe
Subscribe via RSS
Follow me on Twitter
Or, Receive daily updates via email.
Tags
adobe air ajax apple cf community cfml coldfusion examples ext flash flex google javascript jquery max2007 max2008 misc open source programming railo software technology ui
Recent Entries
No recent entries.
Blogroll
An Architect's View
CFSilence
Rey Bango
TalkingTree
Wish List
I am not sure why - although i declare all the argument at .cfc file.
Here is my error looks ---
You cannot specify more arguments to a CFC function than it declares.
Error parsing bind cfc:test_site.achowdhury.cf08.artists.components.artists.editArtist({cfgridaction}, {cfgridrow}, {cfgridchanged},{myformTree:mytree.node})
-------
Is that bind expression on the onchange attribute or the regular bind attribute? The regular bind attribute (the one to populate the grid) needs the parameters cfgridpage, cfgridpagesize, cfgridsortcolumn, and cfgridsortdirection. If you are using an editable grid then on the onchange attribute of the cfgrid you would use cfgridaction, cfgridrow and cfgridchanged.
But then you wouldn't add the additional parameter of the tree to the onchange event of the grid.
Could you also post the function you are calling?
In my application.cfm I created a request variable called cfcpath which is the dot ddelimited path
to my cfc's. You can remove the #request.cfcpath# in the bind expression and
replace it with the path to the cfc.
I am trying to get multiple nests in a tree grid and have the nodes populate data as I expand the tree. Is it possible to get a tree grid like http://www.treegrid.com/TreeGrid5_0/Examples/AspNe... using CF8?
Sorry for the confusion. On my local machine the path to my application is http://localhost/cf8 If you want the root of your tree to start somewhere else besides the wwwroot directory you can set a variable in your application.cfm page to point to whatever directory you want to start at. for example <cfset request.approot ='/cf8'> would make the cfdirectory tag get the directories starting in the cf8 directory instead of the wwwroot. I also will reply to your other email, as you have a couple of typo's between your tree and your grid...I should finish the tutorial series :).
As for the tree-grid you point to in the URL you can do that with CF but you will have to use the new EXTJS and code the JS by hand, but you can use CF8 to provide the data no problem
By the way, I got it to work on my workstation, but not on my server. I get a blank page with a thin gray bar accross the top. Strange. The server is a multi-server config using IIS, if that makes a difference. In contrast I used the CF internal web server on my workstaion.
Thanks again.
What data you provide to the tree shouldn't really matter you just need to make sure that you provide the tree with the data in the format that it expects.
If you think about it the cfdirectory tag returns a query object after querying the file system, no difference really, just make sure you return your results correctly.
Glad it proved useful!
I'm wondering what are the benefits for binding a grid to a tree? Editable cftree?
The windows explorer example that Wayne describe is a good use case for binding a tree to a grid. The point of this excersise was simply to show that it is possible to bind the two things to each other rather easily.