Wish List
Tags
adobe air ajax coldfusion examples ext flex javascript max2007 misc technology ui
Recent Entries
Search
RSS
Subscribe
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.
<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.
<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.
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