Programmatically select a row in CFGRID

Ernie asked me if it was possible to select a row in CFGRID via JavaScript. I coulda sworn I had covered this before, but my search-fu failed to turn it up. Anyway, here is a super quick example of how to do it. It’s works with ColdFusion 9 only - not ColdFusion 8. (Not as far as I know since the Ext API changed.)

<cfform name="test"> <cfgrid autowidth="true" name="entries" format="html" width="600" bind="url:getentries.cfm?page={cfgridpage}&pagesize={cfgridpagesize}&sort={cfgridsortcolumn}&dir={cfgridsortdirection}" height="150"> <cfgridcolumn name="id" display="false"> <cfgridcolumn name="body" display="false"> <cfgridcolumn name="title" header="Title"> <cfgridcolumn name="posted" header="Posted"> </cfgrid> </cfform>

This is a code sample from an old presentation I did on CF Ajax features. It uses a BlogCFC database on the back end and a file that serves up blog entry data to the grid. Since the data isn't relevant to the discussion I'm going to skip posting that. I began by adding a button and whipped up some code to select a row:

<html> <head> <script> function pickrow() { console.log("ran"); g = ColdFusion.Grid.getGridObject("entries"); console.dir(g); var sm = g.getSelectionModel(); console.dir(sm); sm.selectRow(2); console.log("done"); } </script> </head> <body> <cfform name="test"> <cfgrid autowidth="true" name="entries" format="html" width="600" bind="url:getentries.cfm?page={cfgridpage}&pagesize={cfgridpagesize}&sort={cfgridsortcolumn}&dir={cfgridsortdirection}" height="150"> <cfgridcolumn name="id" display="false"> <cfgridcolumn name="body" display="false"> <cfgridcolumn name="title" header="Title"> <cfgridcolumn name="posted" header="Posted"> </cfgrid> </cfform> <input type="button" onclick="pickrow()" value="pickrow"> </body> </html>

The button is at the bottom and runs pickrow up top. pickrow simply grabs the Grid object, grabs the "SelectionModel" (think of it as an API to get/modify selections in the grid), and then just runs selectRow. I've hard coded it to 2 which will be the 3rd row. As a reminder - don't forget you can always check the Ext docs for deeper integration into ColdFusion's UI objects. Just be sure to check the version # of the API versus what ColdFusion is using natively.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA https://www.raymondcamden.com

Comments