How to add functionality to the CFGrid

Tags: Coldfusion

In one of my previous posts I showed how to use the new cfgrid, and to also do proper MS SQL 2000 / 2005 pagination with the code.

Even though ColdFusion will only return the required information, it makes sense to get the query to be as quick as possible as well.

Today I am now going to take that example and add a couple of extra functionality to the cfgrid.

For one of my clients, I added a wallet using the grid. This added a couple of things to the grid, one being a total field, and a button to save the wallet back to the server.

So now I have added this to the cfgrid in ColdFusion 8, and give you an example of how easy it is to do.

Now the first thing is the cfgrid itself.

<cfform>
<cfgrid format="html" name="GridTest" pagesize=10 sort=true selectmode="row" bind="cfc:components.artists.getArtists({cfgridpage},{cfgridpagesize}},{cfgridsortcolumn},{cfgridsortdirection})">
<cfgridcolumn name="ARTISTID" display=true header="ARTISTID" />
<cfgridcolumn name="FIRSTNAME" display=true header="FIRSTNAME"/>
<cfgridcolumn name="LASTNAME" display=true header="LASTNAME" />
<cfgridcolumn name="CITY" display=true header="CITY" />
<cfgridcolumn name="STATE" display=true header="STATE" />
</cfgrid>
</cfform>

</body>

For more information on the component that binds this, please refer to my previous post on CFGrid and Pagination.

Now ColdFusion allows us to get the grid, and extend it out further.

So without going into anything more here is the code that now extends the CFGrid out further.

At the top of the page, and yes for some reason unknown to everyone the JS code must appear in the HTML tags, which makes it hard for MVC frameworks. Yet to discover why this is the case though.

<head>
<InvalidTag>
   testgrid = function() {
      var asGrid = ColdFusion.Grid.getGridObject('GridTest');
gridFoot = asGrid.getView().getFooterPanel(true);
paging = new Ext.PagingToolbar(gridFoot, asGrid, {
displayMsg: '',
emptyMsg: ""
});
      paging.addSeparator();
      paging.addButton({
         pressed: false,
         disabled: false,
         enableToggle: false,
         text: "Save Booking",
         handler: testButton
      });
      paging.addSeparator();
      paging.addElement("TotalText");
   }

   function testButton() {
      alert('Button Pressed')
   }
</script>
</head>

And to finish the code off. We need to add this to the bottom of the page inside the body tag.

<cfset ajaxOnLoad("testgrid")>
<div id="TotalText">Booking Total:
<span id="Total">$0.00</span>
</div>

That's about the sum of it, but there is a bug in ColdFusion 8 at the moment that does make the Grid hang for some unknown reason. And it is to do with CF and not the above code, as this is directly from the extJS framework and the code that works on a client site that I did work on a few months ago.


TweetBacks


Comments (Moderated) | Add Comment

There are no comments for this entry.