Cfgrid and Row Clicking and editing using underlying EXT JS

Coast LineCEO
CFGRID Custom Functionality Series -  Part 1

Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achieved what I needed. Here I will demonstrate how this thing can be done in ColdFusion CFGRID and in easy Way. Nothing extra ordinary is required, Just a Basic Knowledge of How JavaScript works is Enough.

Let Me start with the Tutorial now.  I will split this tutorial in the following way.

1. Populate a CFGRID with CFC Binding and Show the DATA in the CFGRID
2. WE will create Custom Toolbar at Bottom for Showing the records
3. We will create the Hyperlink to the Column we need.
4. We will modify the Column to look a bit seperate so it can be noticed that this is a hyperlink
5. We will now open the cfwindow or the Normal window on the click of this link and see how it goes.

So we will start with the Code. I will show how we can populate the grid. The Following method is use to Populate Grid with my Bind Value

                        args = {};
                        args.bind = "cfc:CFC.myCFC.getDataForGrid({cfgridpage},{cfgridpagesize},
                        args.delete = TRUE;
                        args.format = "html";
                        args.insert = false;
               = "SchedulesGrid";
                        args.pagesize = "5";
                        args.selectmode = "browse";
                        args.striperows = TRUE;
                        args.autowidth = true;
                        args.height = "205";
                              <cfform name="SchedulesForm">
                                <cfgrid attributecollection="#args#" colHeaderBold="yes" collapsible="true" title="View Created Profile: <b>#Myquery.ProfileName#</b>">
                                 <cfgridcolumn name="ScheduleDetailID" header=" ID" display="no" headerbold="yes" />
                                  <cfgridcolumn name="ScheduleProfileID" header=" Schedule Profile ID" display="no" headerbold="yes" />
                                  <cfgridcolumn name="type" header="Type of " width="108" headerbold="yes" />
                                  <cfgridcolumn name="intervals" header="Intervals" width="108"  headerbold="yes"/>
                                  <cfgridcolumn name="IntervalUnit" header="Unit" width="108"  headerbold="yes"/>
                                  <cfgridcolumn name="duration" header="Duration" width="108"  headerbold="yes"/>
                                  <cfgridcolumn name="to_whom" header="Followed" width="108" headerbold="yes" />
                                  <cfgridcolumn name="reasonDetail" header="Reason" width="108" headerbold="yes"/>
                                  <cfgridcolumn name="frequencyName" header="Frequency" width="108" headerbold="yes" />
                                  <cfgridcolumn name="Template" header="Template(s) attached" width="137" headerbold="yes">

Open in new window

Above Code, Pretty Simple, I am just binding one CFC to the cfgrid and populating its values in the cfgrid columns, if you copy the above code and run it as it is, it will show you the query results. I assume here that you know how we return values from the query, we basically use QueryConvertForGrid to get back our results, So I am not going to explain that thing here

Now our Next Scenario, we all have seen now that we can get the results from the cfgrid. Now I have a situation where I need to create a link to the column. The cfgrid columns start from 0

In my Case, you can see that I have two fields in the grid which are set to display as "NO", I will create a link on the "TYPE" column of the cfgrid. Now here we go with our Javascript:

<script type="text/javascript">
                      function showWindow(thisID) {
             'details.cfm?DetailID=' + thisID,'Details','height=250,width=500,location=0,status=0,toolbar=0,resizable=0');
                      function init(){
                      	grid = ColdFusion.Grid.getGridObject("SchedulesGrid");
                      	cm = grid.getColumnModel();
                      	cm.setRenderer(cm.getIndexById('TYPE'), hrefLinkCreator);	
                      	var tbar=Ext.DomHelper.insertFirst(grid.el,{tag:'div',},true);
                      	var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',},true);
                      	gbbar = new Ext.PagingToolbar({
                      		pageSize: 5,
                      		displayInfo: true,
                      		displayMsg: '<b>Showing {0} - {1} out of {2}</b>',
                      		emptyMsg: "<b>No Record</b>"
                      	var ds = grid.getStore();
                      	gridEl = grid.getGridEl();
                      		grid.loadMask = true;
                      		grid.getGridEl().mask("Please wait - loading data ...");
                      		//	We only want action on the 'Details' column
                      			//	Show the window
                      			var thisID = ColdFusion.getElementValue("SchedulesGrid","SchedulesForm","ScheduleDetailID");
                      function hrefLinkCreator(value) {
                        return '<b style="color:#000;text-decoration:underline;">' + value + '</b>';

Open in new window

Now check this Code:

I am creating one Init function and doing all my processing here

let take it line by line

1. First I am getting the Grid Object name and storing it in the variable grid.
2. Next, Create another variable and using the "getColumnModel()" of EXT js, I am storing the Column Details
3. I am using the setRenderer to detect the gridColumn by its Name, Check the Name i referred with getIndexbyId should be in Capital letters, and then I apply one function to it. Which is used at the end of the script to create a link to that renderer.

4. I am creating a toolbar for bottom and top panels and adding the code to detect the records available. the information of this will be shown in the bottom right side of the cfgrid.
5. "var ds = grid.getStore();
      gridEl = grid.getGridEl();
            grid.loadMask = true;
            grid.getGridEl().mask("Please wait - loading data ...");
" -  This code is something which users need it in many cases. This is Just displaying the Loading icon, in the case if you have records which are are many and the query is taking a lot of time to show these records on the page, it will display a nice loading icon inside the cfgrid.

6. This is the one line where I render the cell grid.on('cellclick',function(grid,rowIndex,columnIndex,e){ and detect the columnindex which is 2 in my case and create a link on it. I just added the

                  //      Show the window
                  var thisID = ColdFusion.getElementValue("TouchSchedulesGrid","TouchSchedulesForm","TouchScheduleDetailID");

to detect the value of the gridcolumn and attach that value to the showWindow function. At the top of the script, if you see I have added the showWindow() function which will open a popup to the user passing the id and based upon that, you can detect the value and do anything you want to to on the details section of the opened window .

Last is the Function hrefLinkCreator() which is used in the setRenderer to create a link and color code it so it looks different and easily noticeable that this is a hyperlink.

That's all the cfgrid is ready with your custom Amendments.

Ok, at last I forgot, I told that if user needs to open the cfwindow then what should be done. That is simple enough

Just replace the showWindow  code with this one as:
showWindow = function() {
                                      var day = new Date();  
                              	PID  = 'Details' + day.getTime();    
                              	var windowOptions = new Object();  
                                        windowOptions.width = 700;  
                                        windowOptions.height = 300;  
                                        windowOptions.x = 400;  
                                        windowOptions.y = 400; 
                                        windowOptions.modal = true;  
                                        windowOptions.refreshOnShow = true; 
                                        windowOptions.destroyOnClose = true;
                                        windowOptions.resizeable = true;  
                                        windowOptions.initshow = true;  
                                        windowOptions.draggable = true;  
                                        windowOptions.closable = true; 
                           		ColdFusion.Window.create(PID,'Details','details.cfm?DetailID=' + thisID + '&random=' + Math.random(Math.random() * 10000000000), windowOptions); 

Open in new window

At the bottom End You just need to add the following :

<cfset AjaxOnLoad("init")>

else it will not work

Cheers. Comment/Suggest if you need more Details to more features. I will update the article.

This is a series. I will increasing the series with more and more features and playing cfgrid

Please vote it if you find it useful

Coast LineCEO

Comments (3)

Any hints for updating this to Coldfusion 11?  It seems some of the extjs framework has changed so you can no longer handle the columnModel and the toolbars in the manner above.


Hi @bnwww- I will check with Coldfusion11 as it is been quite old article and will update accordingly, I cannot put the time frame here but will try to do as soon as possible


Thanks.  For those searching the best hint I found was a bug report on adobe's site

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.