Skip to main content
AlHolden
Inspiring
November 8, 2012
Question

cfgrid (type=flash) - how to capture in-cell keystroke event?

  • November 8, 2012
  • 1 reply
  • 2785 views

Yep, I'm maintaining a Flash type cfform that was authored a few years ago. The application is on CF9 now.

How can my application sense when a user has keypressed within a CFGRID cell?

I've introduced a change event listener to the cfgrid via the onchange tag attribute. The event fires when the mouse clicks within any cell.

But keyboard navigation or individual cell keystrokes to not trigger a change, even when traversing to another cell via Tab or Enter.

I've also tried using the keyDown event, but that is only triggered when navigating the overall grid. It does not fire when a cell has focus - the user is typing within it.

keyUp doesn't work either, nor does keypress, keydown, keyup or any of my other exhaustive deriviation attempts. I've tried to locate a complete list of AS 2.0 event names, but have had no luck, even within Adobe's own pdf docs. If anyone has an example from their own personal museam, I'd love to see it.

Did I mention that this is a Flash cfform? Thought so...

This topic has been closed for replies.

1 reply

BKBK
Community Expert
Community Expert
November 12, 2012

<cfset cities = "Rome,Athens,Canberra,Brasilia,Paris">

<cfset countries = "Italy,Greece,Australia,Brazil,France">

<cfset dateObj = arrayNew(1)>

<cfset dateObj[1] = createdate(2009,11,21)>

<cfset dateObj[2] = createdate(2010,2,3)>

<cfset dateObj[3] = createdate(2009,4,14)>

<cfset dateObj[4] = createdate(2010,5,23)>

<cfset dateObj[5] = createdate(2011,11,11)>

<cfform name="cities" format="flash">

   

<cfformitem type="script">

function showItinerary(){

    alert('City:' + geoGrid.selectedItem.city + ', Travel date:' + geoGrid.selectedItem.travelDate);

}

</cfformitem>

<cfgrid name="geoGrid" onChange="showItinerary();">

<cfgridcolumn name="city" header="City">

<cfgridcolumn name="country" header="Country">

<cfgridcolumn name="travelDate" header="Travel Date">

<cfloop index="i" from="1" to="#ListLen(cities)#">

<cfgridrow data ="#ListGetAt(cities, i)#, #ListGetAt(countries, i)#, #dateFormat(dateObj,'dd mmm yyyy')#">

</cfloop>

</cfgrid>

</cfform>

AlHolden
AlHoldenAuthor
Inspiring
November 12, 2012

Thanks for the response, BKBK!

However, your example will fire an event when one clicks on a cell - but does not provide insight into the event of typing inside a cell. This grid is not even editable.

I've extended your example below to demonstrate the issue. The desire is for the text input below the grid to update with a new "last pressed" key code with every stroke made inside a grid cell. But when executed, it only fires when one clicks between cells using the mouse.

Thanks again.

<cfset cities = "Rome,Athens,Canberra,Brasilia,Paris">

<cfset countries = "Italy,Greece,Australia,Brazil,France">

<cfset dateObj = arrayNew(1)>

<cfset dateObj[1] = createdate(2009,11,21)>

<cfset dateObj[2] = createdate(2010,2,3)>

<cfset dateObj[3] = createdate(2009,4,14)>

<cfset dateObj[4] = createdate(2010,5,23)>

<cfset dateObj[5] = createdate(2011,11,11)>

<cfform name="cities" format="flash">

   

    <cfformitem type="script">

    function showItinerary(){

        changeResult.text = 'last key code is:' + Key.getCode();

    }

    </cfformitem>

   

    <cfgrid name="geoGrid" onChange="showItinerary();" selectmode="edit">

        <cfgridcolumn name="city" header="City">

        <cfgridcolumn name="country" header="Country">

        <cfgridcolumn name="travelDate" header="Travel Date">

        <cfloop index="i" from="1" to="#ListLen(cities)#">

            <cfgridrow data ="#ListGetAt(cities, i)#, #ListGetAt(countries, i)#, #dateFormat(dateObj,'dd mmm yyyy')#">

        </cfloop>

    </cfgrid>

   

    <cfinput name="changeResult" type="text" size="60" />

</cfform>

BKBK
Community Expert
Community Expert
November 12, 2012

I now understand what you're looking for. I'll have another go.