AdobeStock_455007340

Scorpio's Ajax Data Grid

has been around for a long time. It started life as a Java applet, then in CFMX7 we added a Flash grid and XML generation, and in Scorpio we plan on adding an Ajax powered DHTML grid.
You’ll be able to pass a query to the grid as you did previously, like this:

SELECT * FROM myTable

...

But where things get really interesting are when data is retrieved asynchronously (in much the same way as in the auto-suggest example I mentioned earlier this week). Look at this example:

The bind attribute specifies the CFC and method to be invoked, and the current page, page size, and sort information get passed to the CFC method which then returns the appropriate query data. And yes, this does mean that paging is supported, the grid contains paging controls and when you move through pages (or resort columns) the CFC method is asynchronously invoked and the grid is updated accordingly.
And of course there is more, for example:





Of course, this is all subject to change. 🙂

13 responses to “Scorpio's Ajax Data Grid”

  1. Dan Avatar
    Dan

    Looks really appealing! I would be learning/using this tag today if I had the chance.
    I *hope* that there will be support for a stripeRowClass attribute to support CSS classes rather than hard coding the color into the CF code with stripeRowColor.

  2. Michael White Avatar
    Michael White

    my only gripe with grids in coldfusion (compared with microsoft Access) is that you can’t include a combo-box in your grid… is this limitation going to be addresses in Scorpio?

  3. Adam Reynolds Avatar
    Adam Reynolds

    Sorry but in all my 7 years of using CF I don’t think I’ve ever found a use for cfgrid.
    Maybe I’ve missed a trick with this.
    *shrug*

  4. tony of the weeg clan Avatar
    tony of the weeg clan

    excellent!
    what a great way to have a reason to start using this TAG.
    @adam, i think you might have not seen the light before because
    it was always a weird, cumbersome THING.
    now, it will be dhtml (ie. table, like normal html stuff :))
    and like what you are used to seeing.
    *i think*
    anyway, it sounds DELICIOUS
    good stuff.

  5. Ken Dunnington Avatar
    Ken Dunnington

    Looks good! I just finished my first Flex app this weekend, and it’s nice to see that Flex, CF and Spry all seem to be converging to become the uber-platform for web (and of course desktop when you throw Apollo into the mix) development.

  6. Rachel Avatar
    Rachel

    Looks awesome. I’m excited for it. Agreed, now cfgrid will finally have a (real) use!

  7. Alan Avatar
    Alan

    It doesn’t work …. see error.
    Attribute validation error for tag CFGRID.
    The tag does not allow the attribute(s) PAGESIZE,BIND. The valid attribute(s) are ALIGN,APPENDKEY,AUTOWIDTH,BGCOLOR,BOLD,COLHEADERALIGN,COLHEADERBOLD,COLHEADERFONT,COLHEADERFONTSIZE,COLHEADERITALIC,COLHEADERS,COLHEADERTEXTCOLOR,DELETE,DELETEBUTTON,ENABLED,FONT,FONTSIZE,FORMAT,GRIDDATAALIGN,GRIDLINES,HEIGHT,HIGHLIGHTHREF,HREF,HREFKEY,HSPACE,INSERT,INSERTBUTTON,ITALIC,LABEL,MAXROWS,NAME,NOTSUPPORTED,ONBLUR,ONCHANGE,ONERROR,ONFOCUS,ONVALIDATE,PICTUREBAR,QUERY,ROWHEADERALIGN,ROWHEADERBOLD,ROWHEADERFONT,ROWHEADERFONTSIZE,ROWHEADERITALIC,ROWHEADERS,ROWHEADERTEXTCOLOR,ROWHEADERWIDTH,ROWHEIGHT,SELECTCOLOR,SELECTMODE,SORT,SORTASCENDINGBUTTON,SORTDESCENDINGBUTTON,STYLE,TARGET,TEXTCOLOR,TOOLTIP,VISIBLE,VSPACE,WIDTH.
    The error occurred in D:aphamBusinessContinentsNewsWebRootmyNews.cfm: line 141
    139 : </cfformgroup>
    140 : <cfformgroup type="page" label="Last Week">
    141 : <cfgrid name="lastWeekNews" query="getTodayNews"
    142 : format="html"
    143 : pageSize="10"

  8. Ben Forta Avatar
    Ben Forta

    Alan, this example required ColdFusion 8 <CFGRID>, it won’t work with earlier versions.
    — Ben

  9. Chris Cantley Avatar
    Chris Cantley

    I am running into an error that has me scratching my head. I have followed a number of examples and keep running into the same issue where debug states "error:http: Error invoking CFC /park.cfc : Not Found"
    The files are in the same directory and I have tried putting the CFC in a different location and it comes back with a completed different error " Could not find the ColdFusion Component or Interface". Anyhow, what follows is the code being used.
    I have also connected to it via CFINVOKE without any problem.
    ————————————–
    —-park.cfm —
    <cfform name="parkForm" action="park.cfm" method="post">
    <cfgrid format="html" name="parkGrid" pagesize="5" selectmode="browse"
    bind="cfc:park.getParks(page={cfgridpage},pageSize={cfgridpagesize},gridsortcolumn= {cfgridsortcolumn},gridsortdirection={cfgridsortdirection})" delete="yes" deletebutton="Remove" insert="yes" insertbutton="Insert" >
    <cfgridcolumn name="site_name" width="300" header="site_name" />
    <cfgridcolumn name="site_desc" width="180" header="site_desc" />
    <cfgridcolumn name="site_url" width="120" header="site_url" />
    <cfgridcolumn name="active" width="60" header="active" />
    </cfgrid>
    <cfinput name="submitBut" type="submit" value="Submit">
    </cfform>
    —————————————-
    park.cfc (same directory)
    <cfcomponent bindingname="park">
    <cffunction name="getParks" access="remote" returntype="struct">
    <cfargument name="page" required="true" />
    <cfargument name="pageSize" required="true" />
    <cfargument name="gridsortcolumn" required="true" />
    <cfargument name="gridsortdirection" required="true" />
    <cfif arguments.gridsortcolumn eq "">
    <cfset arguments.gridsortcolumn = "site_name" />
    <cfset arguments.gridsortdirection = "asc" />
    </cfif>
    <cfquery name="parks" datasource="lythoweb">
    select site_name , site_desc, site_url, active
    from portfolio
    order by #arguments.gridsortcolumn# #arguments.gridsortdirection#
    </cfquery>
    <cfreturn queryconvertforgrid(parks, page, pagesize) />
    </cffunction>
    </cfcomponent>
    ———————————————————–
    Error CfDebug
    error:http: Error invoking CFC /park.cfc : Not Found
    info:widget: Created grid, id: parkGrid
    info:http: HTTP GET /park.cfc?method=getParks&returnFormat=json&argumentCollection=%7B%22PAGE%22%3A1%2C%22PAGESIZE%22%3A5%2C%22GRIDSORTCOLUMN%22%3A%22%22%2C%22GRIDSORTDIRECTION%22%3A%22%22%7D&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=D1E68692B55A6D1428BFA54553F597AE&_cf_rc=0
    info:http: Invoking CFC: /park.cfc , function: getParks , arguments: {"PAGE":1,"PAGESIZE":5,"GRIDSORTCOLUMN":"","GRIDSORTDIRECTION":""}
    info:LogReader: LogReader initialized
    info:global: Logger initialized
    ————————————
    This is pretty basic and is based on an example I found.. Has anyone else run it into this issue?
    Thanks,
    ~Chris

  10. Will Wilson Avatar
    Will Wilson

    I’m having some trouble getting the pagesize attribute to work with cfgrid. I’m not using a binding, just a simple query, but it’s not paging the results.
    Here is the code:
    <cfgrid name="comments"
    width="200%"
    height="360"
    format="html"
    query="comments"
    insert="yes"
    pagesize="10"
    delete="no"
    autowidth="yes"
    selectmode="edit">
    Any clues?? Do you need to use a binding to use pagesize? (I’m reading through your book btw)

  11. Derek Avatar
    Derek

    I know this is a little old, but I am having the same issue. I can’t get pagesize to work with a query result set.

  12. John Avatar
    John

    "I can’t get pagesize to work with a query result set."
    Ditto. Any ideas…?

  13. matt Avatar
    matt

    I can’t seem to get pageSize to work either. Its stuck on 7

Leave a Reply