CF8 Ajax Grid: Renderers and Events
So, I was doing a real quick, down and dirty form and results app for something internal. Way temporary, with little scale-out, I wrote a form and processor, then used the CF8 DataGrid for the results display. Problem was, two of the fields were textareas that could contain a lot of info, so I needed a quick way to show and expanded details set. Now, had I been using ExpanderRow plugin, but this was just quick implementation prototyping type stuff.
What I needed was a column of icons that I could then link to a CFWindow with the total display. Now, I have to use a Cell Renderer to place the image in the empty column, but first I need the column.
After that, I create a basic Cell Renderer:
cm.setRenderer(col,function(value,p,r,ind){
var retVal = "<img src='/resources/images/icons/book_link.gif' width='16' height='16' alt='Details' />";
return retVal;}
});
grid.reconfigure(grid.getDataSource(),cm);
}
This didn't entirely work out, as it placed the image in every row, even if there wasn't a record. So, time to improvise. I adjust to see if there's value for a cell in this row's 'record', to determine whether I need the image.
cm.setRenderer(col,function(value,p,r,ind){
var ds = grid.getDataSource();
var theRecord = ds.getAt(ind);
if(theRecord.get('TS') != null){
var retVal = "<img src='/resources/images/icons/book_link.gif' width='16' height='16' alt='Details' />";
return retVal;
}
});
grid.reconfigure(grid.getDataSource(),cm);
}
function showRecWin(){
ColdFusion.Window.show('winDetails');
}
Alright, to call the renderer into play I have an init method that is fired by the CF ajaxOnLoad() method.
var repGrid = ColdFusion.Grid.getGridObject('reportsGrid');
var repCM = repGrid.getColumnModel();
setDetailButtonRenderer(repGrid,repCM,8);
}
Now we're halfway there. Next I need to get a 'click' on the image cell. You do this by accessing the underlying Ext functions of the Grid object itself, for which you already have a reference (repGrid).
var repGrid = ColdFusion.Grid.getGridObject('reportsGrid');
var repCM = repGrid.getColumnModel();
setDetailButtonRenderer(repGrid,repCM,8);
repGrid.on('cellclick',function(grid,rowIndex,columnIndex,e){
if(columnIndex==8){
}
});
}
We are configuring an on cellclick function here, which is really a listener on the row itself. We further narrow it to only perform action if the column that the cursor was in 'on click' was our Details column, which is the 9th column of our grid, including hidden columns (remember that this uses a JavaScript array, which starts with zero, so the column you reference is always column count minus one).
Next thing we need is a quick modal pop-up for our 'Details.' CFWindow makes a great candidate for this.
It's invisible when initialized, because we only want to show it 'on click'. We need a quick method for 'showing' the window.
ColdFusion.Window.show('winDetails');
}
We can now reference this in our 'on click' function.
if(columnIndex==8){
showRecWin();
}
});
OK, we get our window, but now we need some data. Now, I could do an ajax call for the data, but it's already in my cell. It's just too long to easily display in the grid. Rather than do another server call, I'll just query the grid's Data.Store for the information.
if(columnIndex==8){
showRecWin();
// This empties out any previously displayed content document.getElementById("winDetails_body").innerHTML = "";
var ds = grid.getDataSource();
var theRecord = ds.getAt(rowIndex);
var valPurpose = theRecord.get('FEATUREPURPOSE');
var valFunction = theRecord.get('FEATUREFUNCTION');
document.getElementById("winDetails_body").innerHTML = "<b>Purpose:</b><br />" + valPurpose + "<br /><br /><b>Function:</b><br />" + valFunction;
}
});
Really simple, as long as you remember that ColdFusion's creation of the grid's ColumnModel will uppercase all of your cfgridcolumn's name attributes.
That's it. Really doesn't take a whole lot. A little digging in the documentation for the 1.1.1 version of the ExtJS library will give you a ton of information.
Thanks for the post!
SELECT
'<a href="javascript:showOrderDetail(' +CAST(ROWID AS varchar(5))+ ');"><img src="http://mysite.com/images/button_Open.gif"; width="40" height="15" border="0"></a>' AS CLICK_IMG
FROM
ORDERS
I could have wrapped an 'onclick' anchor around the image in the renderer just as easily, but we lose out on two separate concepts here. The first is the purpose of the post, to show how to do custom renderers and how to add event listeners. The second one gets a little more grey area, to maintain unobtrusive JavaScript. Sure, the grid is rendered by JavaScript to begin with, and the renderer is done by javascript (and all the js is directly in the page anyway, since this implementation is through the CF 8 tags).
But, that is part of the point. It's rendered, whether it was written inline or not. And best practice dictates that JavaScript code should remain unobtrusive, so we assign the event listener, within an external JS file. I know it doesn't make any sense, especially when dealing with Ajax components, but you try to walk the lines of standards as much as possible, vearing when necessary. The usage of 'javascript:method()' within an anchor tag (or any tag), would be considered obtrusive, and should be avoided. Getting out of old, bad habits now will help all of us in the long run.
Thanks!
Mischa.
In answer to your question:
http://blog.cutterscrossing.com/index.cfm/2008/1/9...