28
October 2005
Editable CFGrids
After inserting a new row, forcing that row to go into edit mode.
Had the hardest time making an editable CFGrid go into edit mode after a DataGrid.insertRow() was done. It appears that the insertRow() does not fire the onChange event even though it selects the new row for you. Also if you try to focus on the column in your button's onClick event, something ends up overriding it after the function is done and just the new row ends up being selected.
After quite a bit of time
I came up with the following: (I know VERY little about flash)
Not sure if this is the cleanest way but it seems to work.
Couple other things:
After quite a bit of time
I came up with the following: (I know VERY little about flash)<cfform action="someaction.cfm" method="post" format="flash" skin="haloblue" name="myform" onload="onFormLoad()" height="500" width="500" >
<cfformitem type="script">
function onFormLoad(){
var btnlistener:Object = {};
//put the controls in scope to avoid calling _root
var nameList:mx.controls.DataGrid = namelist;
var insertbtn:mx.controls.Button = Insertbtn;
btnlistener.click = function(evt):Void {
var myInterval:Number;
function doselect() {
clearInterval(myInterval);
nameList.focusedCell = {columnIndex:2, itemIndex:nameList.selectedIndex};
}
GridData.insertRow(nameList);
myInterval = setInterval(doselect, 500);
};
insertbtn.addEventListener('click',btnlistener);
}
</cfformitem>
<cfgrid rowheaders="true" name="namelist" colheaders="yes" selectmode="edit" height="280" width="300">
<cfgridcolumn name="id" display="no"/>
<cfgridcolumn name="firstname" display="yes" select="yes" header="First Name" width="75" />
<cfgridcolumn name="lastname" display="yes" select="yes" header="Last Name" width="75" />
<cfgridrow data="1,First Name,Last Name" />
</cfgrid>
<cfinput type="button" value="Insert" name="Insertbtn" />
</cfform>
<cfformitem type="script">
function onFormLoad(){
var btnlistener:Object = {};
//put the controls in scope to avoid calling _root
var nameList:mx.controls.DataGrid = namelist;
var insertbtn:mx.controls.Button = Insertbtn;
btnlistener.click = function(evt):Void {
var myInterval:Number;
function doselect() {
clearInterval(myInterval);
nameList.focusedCell = {columnIndex:2, itemIndex:nameList.selectedIndex};
}
GridData.insertRow(nameList);
myInterval = setInterval(doselect, 500);
};
insertbtn.addEventListener('click',btnlistener);
}
</cfformitem>
<cfgrid rowheaders="true" name="namelist" colheaders="yes" selectmode="edit" height="280" width="300">
<cfgridcolumn name="id" display="no"/>
<cfgridcolumn name="firstname" display="yes" select="yes" header="First Name" width="75" />
<cfgridcolumn name="lastname" display="yes" select="yes" header="Last Name" width="75" />
<cfgridrow data="1,First Name,Last Name" />
</cfgrid>
<cfinput type="button" value="Insert" name="Insertbtn" />
</cfform>
Not sure if this is the cleanest way but it seems to work.
Couple other things:
- even if you dispatchEvent("change") in your onClick for your button, the event fires and you can set focus but... it only sets focus for a second until something else selects the newly inserted row.
- Also learned that the doLater() function seems to be ignored in flash forms.
Posted by fwscott at 6:38 PM | Comments (0)