Have you ever wanted to use tooltips in cfgrid
Tags: Coldfusion
As the title suggests one of the thinks that is lacking in ColdFusion is the ability to add tooltips to a lot of components, mainly the cfgrid. In this article I am going to show you it isn't as hard as it sounds.
The first thing we are going to do is grab the example on using the cfgrid from the tag documentation. Which should look like this.
<cfquery name = "GetCourses" dataSource = "cfdocexamples">
select Course_ID, Dept_ID, CorNumber, CorName, CorLevel
from CourseList
order by Dept_ID ASC, CorNumber ASC
</cfquery>
<h3>cfgrid Example</h3>
<i>Currently available courses</i>
<!--- cfgrid must be inside a cfform tag. --->
<cfform>
<cfgrid name = "FirstGrid" format="html"
height="320" width="580"
font="Tahoma" fontsize="12"
query = "GetCourses">
</cfgrid>
</cfform>
The next thing we are going to do is write a little bit of JavaScript, which I will go into more detail below.
<script src="/CFIDE/scripts/ajax/ext/package/qtips/qtips.js" type="text/javascript"></script>
</cfsavecontent>
<cfhtmlhead text="#tooltips#">
The above code is fairly simple and straight forward and it sets it up to be loaded into the HTML head of the page, so lets add our first function.
dataGridTest = function() {
Ext.QuickTips.init();
grid = ColdFusion.Grid.getGridObject('FirstGrid');
grid.on('mouseover', mouseOver);
}
</script>
This function above can be just inserted into the cfsavecontent and is main job is to initialise the quick tips from the underlying extJS engine. You'll notice that we are initialising the QuickTips and as it is a singleton by design, it is best to call it here. We are then getting a handle to the grid, and then adding an on event for the mouseover to call another JS function called mouseOver.
var overCell = grid.getView().findCellIndex(t);
var overRow = grid.getView().findRowIndex(t);
if(overCell !== false && overRow !== false) {
Ext.QuickTips.register({target:tar,title:'CFGrid tooltip example : '+overCell, text:'I am a tool tip on cfgrids.'});
}
}
When we add the above to the existing code, we now have a fully working example. So what is it doing. Well the first thing that is happening is that we are getting 2 variables overCell and overRow, both of these are going to tell us which row and which cell we are over.
We then have to check to see if we are actually over any of the cells, and by default the mouseover event is thrown each and every time you move within the grid. So we check to see if the row and cell return false, if they do then we must not be over any of the cells in the grid.
The last line of interest is the Ext.QuickTips.register() is were we are going to register the QuickTips to the cell, and the target is a HTML element that is passed into as with the variable tar in the function arguments.
Now there are many other things you can do, like have the tooltip follow the mouse. These things can be found as part of the properties of the extJS 1.1 documentation. The one thing to keep in mind is that some of these need to be set before it is initialised.
And there you have it, tool tips within a grid.
Oh one more thing, this will not work on the ColdFusion 9 (beta) or final release. And that is due to the fact that the QuickTips has changed within extJS 2+, and anyone would like to know or have it work under ColdFusion 9 I will blog about that soon. But feel free to email me if you need it sooner.
-
Hi Andrew,
I'm just wondering how I could modify this to show a specific columns data in the current row.
Thanks,
Paul# Posted By Paul | 5/26/11 1:20 PM -
It will depend on whether the data is in the record store, if it is in the record store. Which is defined by your columns, then you could use the mouseOver to read that out of the record store. If you are using ColdFusion to generate the grid, then I will assume that this is not the case.
If the data is not in the record store then in the mouse over you could do an ExtJS Ajax call to retrieve the data that you need and then display the information.# Posted By Andrew Scott | 5/26/11 6:26 PM -
This post has done 90% of my job. I modified your code to fetch the value inside the cell. but i get the DOM object for the cell but no way i canget the value displayed..Please help. The modified code is:
function mouseOver(e, tar){
var t = e.getTarget();
var overCell = grid_plancode.getView().findCellIndex(t);
var overRow = grid_plancode.getView().findRowIndex(t);
var selectedText=grid_plancode.getView().getCell(overRow, overCell).get("propertyName");
if(overCell !== false && overRow !== false) {
Ext.QuickTips.register({target:tar,title:'CFGrid cell value : '+selectedText, text:'I am a tool tip on cfgrids.'});
}
}# Posted By Yoosaf | 12/19/11 8:26 PM -
What version of ColdFusion?
The other thing to remember is that the Grid is associated with a store, this means that once you get the row, you can get the record as well. Once you have the record, then you just get the data out of the record.
If this doesn't make sense then let me know.# Posted By Andrew Scott | 12/19/11 8:35 PM -
Thanks a lot Andrew for the prompt response . I have solved the confusion.
Following code does the magic
function mouseOver(e, tar){
var t = e.getTarget();
var overCell = grid_plancode.getView().findCellIndex(t);
var overRow = grid_plancode.getView().findRowIndex(t);
var selectedText=grid_plancode.getView().getCell(overRow, overCell);
if(overCell !== false && overRow !== false) {
Ext.QuickTips.register({target:tar,title:'Value', text:selectedText. innerText });# Posted By Yoosaf | 12/19/11 11:31 PM -
This is not the best way of doing this, I have decided to write this up as another blog post for further information go on over to http://www.andyscott.id.au/2011/12/20/update-to-us...
# Posted By Andrew Scott | 12/20/11 9:09 PM
TweetBacks