So, a while ago I released a custom tag called Slush. It was a custom tag that would generate a Flash Form control allowing for left/right controls using select boxes. A user asked me if I had anything like that but with Up/Down type controls. In other words, he wanted to order items in a select box.
This isn't too hard to do. I'll show the code then talk about it a bit:
<cfsavecontent variable="fix">
var t2:Array = Array();
for(var i=0; i < people.getLength();i++) {
t2.push(people.getItemAt(i).data);
}
people_list.text = t2.join(",");
</cfsavecontent>
<cfsavecontent variable="moveUp">
if(people.selectedIndex > 0) {
var pos = people.selectedIndex;
var temp = people.getItemAt(pos);
people.addItemAt(pos-1,temp);
people.removeItemAt(pos+1);
people.selectedIndex = pos-1;
<cfoutput>#fix#</cfoutput>
}
</cfsavecontent>
<cfsavecontent variable="moveDown">
if(people.selectedIndex+1 < people.length) {
var pos = people.selectedIndex;
var temp = people.getItemAt(pos+1);
people.addItemAt(pos,temp);
people.removeItemAt(pos+2);
<cfoutput>#fix#</cfoutput>
}
</cfsavecontent>
<cfformgroup type="horizontal">
<cfselect name="people" multiple size="4" width="200">
<option value="1">Apple</option>
<option value="2">Beta</option>
<option value="3">Caladium</option>
<option value="4">Death Star</option>
</cfselect>
<cfformgroup type="vertical">
<cfinput type="button" name="moveUp" value="Up" onClick="#moveUp#">
<cfinput type="button" name="moveDown" value="Down" onClick="#moveDown#">
<cfinput type="submit" name="submit" value="Save">
</cfformgroup>
</cfformgroup>
<cfformgroup type="horizontal" visible=true height="0">
<cfinput type="text" name="people_list" value="1,2,3,4">
</cfformgroup>
</cfform>
<cfdump var="#form#">
First off - this isn't a custom tag version, but it could be changed into it. The first thing you should note is the cfselect box. This is the container for options that we will sort. Next note the Up and Down button. They use the code defined above in the moveUp and moveDown cfsavecontent blocks. The action script is, genrally, understandeable. It's pretty close to how you would do it in JavaScript.
So far - this is mostly trivial code. What isn't trivial is how you pass the order to the server. By default, a select box with the multiple option will pass no data if you don't select anything. I don't want to force the user to Select All before hitting submit, so I made a little hack. I added an invisible form field called people_list. Whenever the drop down is reordered, I repopulate the value property using the code defined in cfsavecontent block named "fix".
Thoughts? I'd be shocked if the folks at ASFusion.com don't have a much more elegant solution, so check there as well.
Archived Comments
Thanks for this, you don't give yourself enough credit while I'm sure a more elegant solution might be possible, this solves a very real world problem, today!
Ray,
Would you happen to ever have put this into a custom tag? I have to use this on the same page three times, and I know from your slush box custom tag that it really made things easier and less complicated. If you haven't, could you point out the items to throw into the custom tag and those to leave out?
Ray:
Thanks for your post. It helped me figure out how to move items up and down in a cfgrid. Here's the code for anyone who may have to tackle that feature.
Thanks,
Justin
<!--- helper function to swap rows in a data grid. --->
function swapGridRows(grid:mx.controls.DataGrid, index1:Number, index2:Number):Void {
var item1,item2 = {};
item1 = grid.dataProvider.getItemAt(index1);
item2 = grid.dataProvider.getItemAt(index2);
grid.dataProvider.removeItemAt(index2);
grid.dataProvider.addItemAt(index2, item1);
grid.dataProvider.removeItemAt(index1);
grid.dataProvider.addItemAt(index1, item2);
}
The Slush link for the left/right select boxes returns a 404 error but it wasn't hard to duplicate the functionality using the code given here.
New link: http://www.coldfusionjedi.c...
Thanks. Wow, this is an OLD blog post. :)
Ray,
Is it possible to use this tag with cfmodule instead? I am getting an error, I believe because one of the required attributes is called "name" which causes cfmodule to think that you are trying to provide the name of the tag, not an attribute.
Thanks!!
Yep. Modify the code to allow for namevalue as well as name. Then when you use cfmodule, use namevalue="..". The custom tag can just say (pseudocode):
if arguments.namevalue exists, copy it to arguments.name
Thanks for this nice widget, I was able to incorporate it where needed in my application very qucikly, has worked flawlessly for me.