Custom grid renderers with CFGRID
I've been playing a bit with CFGRID lately (as have others) and I found that by taking a look at Ext's documentation, there are some very powerful features hiding within the CFGRID tag. ColdFusion provides a function, ColdFusion.Grid.getGridObject, that when used gives you a handler to the underling Ext Grid object. By looking at the documentation, you can see which methods are available with the grid. One in particular I thought was pretty neat was the ability to add custom column renderers. What is that?
Well imagine you have data being fed into the grid that you do not have control over. For example - perhaps you have price information that isn't formatted nicely. Turns out Ext has a set of built in formatters that you can apply to grid columns, one of them being a money formatter. What if you have some other logic? Maybe you want to flag a price that is lower than 10 dollars? Again, using the Ext API, you can write your own formatter just for this purpose.
I've only just begun to scratch the surface of Ext, but here is a quick and dirty example to give you an idea of what is possible.
First lets create a simple grid:
2<cfloop from=1 to=10 index="x">
3 <cfset total = randRange(20,100) & "." & randRange(1,99)>
4 <cfset product = "Product #X#">
5 <cfset queryAddRow(data)>
6 <cfset querySetCell(data, "price", total+0, x)>
7 <cfset querySetCell(data, "product", product, x)>
8</cfloop>
9
10<cfform name="test">
11<cfgrid autowidth="true" name="data" format="html" query="data" width="600">
12 <cfgridcolumn name="price" header="Price">
13 <cfgridcolumn name="product" header="Product">
14</cfgrid>
15</cfform>
I'm using a hard coded query with products and prices. This is then fed directly into the grid. Note that I'm not using Ajax here.
Now let's look at how we can add a custom column renderer. The first thing we need to do is to set up the page to call a function when the grid is done loading. We do this with ajaxOnLoad:
Because I'm not "properly" using Ajax on my page, I also added an import:
I've mentioned this hack before, and credit goes to Todd Sharp for discovering. Now let's look at the JavaScript:
2 if(data == "Product 4") return "<b>" + data + "</b>";
3 else return data;
4}
5testgrid = function() {
6 mygrid = ColdFusion.Grid.getGridObject('data');
7 cm = mygrid.getColumnModel();
8 cm.setRenderer(0, Ext.util.Format.usMoney);
9 cm.setRenderer(1,myf);
10 mygrid.reconfigure(mygrid.getDataSource(),cm);
11}
Skip the first function and focus in on testgrid. Testgrid is a horrible name but I was just playing around with the code so forgive me. I grab the grid using the ColdFusion.Grid.getGridObject API mentioned before. Everything after this is based on my reading of the Ext docs. I grab the columns using the getColumnModel function. I apply a renderer to columns 0 and 1 (you will never convince me that 0 based indexes make sense). The first renderer is a built one named usMoney. The second one is a custom function named "myf". usMoney will do what you imagine - format money. The second was hard coded to look for Product 4, and when found, bold it. I then use reconfigure to apply the column model back to my grid.
You can see an example of this here. Full source code is below.
2<html>
3
4<head>
5<script>
6
7myf = function(data,cellmd,record,row,col,store) {
8 if(data == "Product 4") return "<b>" + data + "</b>";
9 else return data;
10}
11testgrid = function() {
12 mygrid = ColdFusion.Grid.getGridObject('data');
13 cm = mygrid.getColumnModel();
14 cm.setRenderer(0, Ext.util.Format.usMoney);
15 cm.setRenderer(1,myf);
16 mygrid.reconfigure(mygrid.getDataSource(),cm);
17}
18</script>
19</head>
20
21<body>
22
23<cfset data = queryNew("price,product")>
24<cfloop from=1 to=10 index="x">
25 <cfset total = randRange(20,100) & "." & randRange(1,99)>
26 <cfset product = "Product #X#">
27 <cfset queryAddRow(data)>
28 <cfset querySetCell(data, "price", total+0, x)>
29 <cfset querySetCell(data, "product", product, x)>
30</cfloop>
31
32<cfform name="test">
33<cfgrid autowidth="true" name="data" format="html" query="data" width="600">
34 <cfgridcolumn name="price" header="Price">
35 <cfgridcolumn name="product" header="Product">
36</cfgrid>
37</cfform>
38
39<cfset ajaxOnLoad("testgrid")>
40</body>
41</html>
http://extjs.com/deploy/ext-1.0.1/docs/output/Ext....
We have been working w/ the EXT package for about 5 months now and - in my very humble opinion - its the best UI package available. It is so well put together and so flexible that I can't imagine us ever using any other package. While the whole world seemed to be moving towards the heavier flex-based clients, we took a long hard look at the lighter JS ui packages, which, when combined w/ an AJAX package, seemed to give us almost the same functionality as Flex w/out the heavy load times.
The grid component in Flex is only one of the outstanding widgets, though that one is a superstar in its own right (the fact that it has the paging capabilities, the fact that it integrates so seamlessly w/ its dataset....I get all giddy just thinking about it :>), but the tabs, the dialog/windowing, the drag/drop capabilities, the tree.... all fairly lightweight, and all beautiful as hell.
Again, we've been using it fairly heavily for the last 5 or six months. If your not overly experienced w/ JS, the learning curve can be steep (a price I had to pay my own self), but it is WELL worth the time required to bring yourself up to speed. And if you need any help, I can testify from personal experience that the forums on the site are highly active and extremely helpful/useful.
I don't mean to sound like a PR agent for Jack Slocum, but we looked for quite a while for a package that would allow us to build an attractive, interactive UI (like Flex) but without a heavy load time. Ext was *EXACTLY* what we were looking for.
Believe me, I understand EXACTLY what you mean when you say its confusing - I had the hardest damn time understanding what was going on (and I *thought* I was fairly good w/ JS; I was wrong). But I cannot stress enough how worth it the investment is. If you have anything else on your list of stuff to take a HARD look at, bump this package to the top. Yes there are a lot of methods and properties and whatnot. Yes the documentation is............ummmmm....incomplete in places :) but the code itself is EXTREMELY well documented and fairly easy to understand, so if you have any questions just roll up your sleeves and check it out.
Also, like I said, the forums are very, very active, and while there seems to be this one guy named animal up there that doesn't like people who don't have his experience level and understanding of how the package works, other than him I can personally attest that most of the time people bend over backwards to see that you get pointed in the right direction. And obviously, after all the polite little shoves in the right direction YOU have given ME, if you ever needed a hand, let me know, and I will do what I can to get you on the right track :)
"http: Error processing JavaScript in markup for element testgrid_body: "
I tried cfajaximport for cfform and cfwindow etc but still get it. Am I missing something dumb here from my lack of gfgrid experience?
Stuff inside cfwindow that uses JS should use foo = function format, not function foo().
CF's Flash stuff uses function foo() format for it's JS.
http://www.asfusion.com/blog/entry/using-labelfunc...
I'm curious though, and I know its getting a bit specific, but if its something like formatting for price wouldn't you rather just do it in your query to begin with and save yourself some code?
http://cfsilence.com/blog/client/index.cfm/2007/8/...
Thanks for posting this. I have been playing around with getting a custom grid renderer using the ext object for a while but then got side-tracked.
When I asked adobe about it the official word is that the cfgrid didnt support custom cell renderers.
This Ajax stuff kinda opens the door a bit on what is supported/not supported.
Your previous example where you built the html in the record set isn't needed anymore you can simply return the image path and build the img tag on the client side in the cell renderer.
500KB in JS is a lot of page weight for simple datasets, and these controls don't downgrade gracefully. In real world implementations you'd potentially have thousands of rows of data and client side sorting will lose any usefulness.
Column reordering resizing are just candy, and not worth their weight.
If I were to invest the time in making these actually useful I'd be better off investing in building a Flex app. There is a tipping point in there if your app really needs this type of GUI.
Just my .02... I just wish Adobe would have spent the time enhancing the CFS (ColdFusion scripting) language instead of implementing a lot of unusable enhancements. *The performance increase in CF8 is awesome though*
Thanks for the reply.
That is pretty much where I'm at now, Drag but no Drop :( .
But I'm getting really close, I've found that I can call any of Ext's functions since cfAjaxImport brings in all of Ext's libraries.
I will get this working, and I'll post some code for others looking once I do :).
- Kind Regards,
Scott
I have two styling questions for an html cfgrid:
How do I get rid of the underline, and how to I stop the first line from being selected.
I have made a style sheet that loads after the grid and changes the default styles that the grid uses, but I cant seem to control those two visible elements.
- Thanks for you help
- Tony
I don't want to apply the cell rendering on form load but rather on the cfgrid "bind" and "onchange" events. I'm still coming up to speed on javascript. I'm not sure where to call the script from?
I also under stand that I need to change the gridname from 'data' to my 'WebChecks' and that i should be referencing column '12' and not 0 for the usmoney format.
my grid:
<cfgrid name="WebChecks"
bind="cfc:webChecksFunctions.getAllWebChecks({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},{clientid@change},{ckacctid@change},{afterDate@change})"
bindonload="no"
colheaderalign="center"
colheaderbold="yes"
colheaders="yes"
delete="yes"
deletebutton="Delete Row"
format="html"
gridlines="yes"
onchange="cfc:webChecksFunctions.updWebCheck({cfgridaction},{cfgridrow},{cfgridchanged})"
pagesize="6"
rowheaders="yes"
selectmode="edit"
sort="yes">
<cfgridcolumn name="id" header="id" width="80" display="no">
<cfgridcolumn name="clientid" header="ClientID" select="no" width="80" display="no">
<cfgridcolumn name="clientnumber" header="Company" select="no" width="80" display="no">
<cfgridcolumn name="payeetype" header="payeetype" select="no" width="100" display="no">
<cfgridcolumn name="ckacctid" header="CkAcctID" select="no" width="80" display="no">
<cfgridcolumn name="ckdate" header="Date" select="yes" width="60" display="yes">
<cfgridcolumn name="cktype" header="d/c" select="yes" width="30" display="yes">
<cfgridcolumn name="cknumber" header="Nbr" select="yes" width="50" display="yes">
<cfgridcolumn name="payeeid" header="payeeid" select="no" width="80" display="no">
<cfgridcolumn name="payeename" header="Payee/Source" select="yes" width="120" display="yes">
<cfgridcolumn name="payeeaddress" header="Address" select="yes" width="60" display="no">
<cfgridcolumn name="ckmemo" header="Purpose/Store" select="yes" width="200" display="yes">
<cfgridcolumn name="ckamount" header="Amount" select="yes" width="60" display="yes">
<cfgridcolumn name="ckprinted" header="printed?" select="no" width="30" display="no">
<cfgridcolumn name="postedflag" header="posted?" select="no" width="30" display="no">
<cfgridcolumn name="tenninetynine" header="1099?" select="yes" width="55" display="yes">
</cfgrid>
My CFC:
<cfcomponent>
<!--- getAllWebChecks --->
<cffunction name="getAllWebChecks" access="remote" output="no">
<cfargument name="page">
<cfargument name="pagesize">
<cfargument name="gridsortcolumn">
<cfargument name="gridsortdirection">
<cfargument name="clientid">
<cfargument name="ckacctid">
<cfargument name="afterDate">
<cfif (gridsortcolumn eq "")>
<cfset gridsortcolumn = "cknumber">
</cfif>
<cfif (gridsortdirection neq "ASC")>
<cfset gridsortdirection = "DESC">
</cfif>
<cfset sqlline = "select id, clientid, clientnumber, payeetype ckacctid,cknumber,CONVERT(CHAR(8),CKDATE,10)AS ckdate, ckamount, ckamount, cktype, payeeid, payeename, payeeaddress, ckmemo,ckprinted, postedflag, tenninetynine from webchecks where clientid = '#clientid#' and ckacctid = '#ckacctid#' and ckdate >= '#afterdate#' order by #gridsortcolumn# #gridsortdirection#">
<cfquery name="webChecks" datasource="#application.dsgl#" username="#application.user#" password="#application.pswd#">#PreserveSingleQuotes(sqlline)#</cfquery>
<cfreturn QueryConvertForGrid(webChecks,page,pagesize)>
</cffunction>
<!--- updWebCheck --->
<cffunction name="updWebCheck" access="remote" output="no">
<cfargument name="gridaction">
<cfargument name="gridrow">
<cfargument name="gridchanged">
<cfif isStruct(gridrow) and isStruct(gridchanged)>
<cfif gridaction eq "U">
<cfset colname=structkeylist(gridchanged)>
<cfset value=structfind(gridchanged,#colname#)>
<cfset sqlline = "update WebChecks set #colname# = '#value#' where id = '#gridrow.id#'">
<cfquery name="updWebCheck" datasource="#application.dsgl#" username="#application.user#" password="#application.pswd#">#PreserveSingleQuotes(sqlline)#</cfquery>
<cfelse>
<cfset sqlline = "delete from WebChecks where id = '#gridrow.id#'">
<cfquery name="delWebCheck" datasource="#application.dsgl#" username="#application.user#" password="#application.pswd#">#PreserveSingleQuotes(sqlline)#</cfquery>
</cfif>
</cfif>
</cffunction>
</component>
thanks for looking.
Craig
i.e. change the color of the row, if a flag in the query is 1
Give this a look:
http://extjs.com/forum/archive/index.php/t-702.htm...
but this is also related to column. I am try to find something based on the row.
For example, if I had a list of tasks, I'd like to change the background color of the row if the task is urgent... Urgent is a field in the query object returned by CFC
in my case, the urgent column is not displaying the the grid. so changing the color in the column will not have any effect.
<cfgridcolumn name="urgent" display="false">
HTH
2002-03-01 00:00:00.0
And I need it to look like this:
3/1/2002
Without modifying the query.
According to the Ext docs, I should be able to change your example code to this:
cm.setRenderer(1, Ext.util.Format.date);
but when I do so, it does not render the column at ALL, and I get this error (twice) in the Javascript console:
Error: v.dateFormat is not a function
Source File: http://rwstage.advantex-internal.net/CFIDE/scripts...
Line: 15
Finally, it would seem that the column numbers ARE in fact a 1-based index, because in my experiment, my date column was the second column, and I had to use *2* (not 1) in order to get your example code to work in that situation.
Any advice?
I figured out how to get a date renderer to work. I posted it here:
http://www.coldfusionguy.com/ColdFusion/blog/index...
Thanks,
I would like to use a CFC method to return the query for the grid. But I am not clear on where the CFC should be stored. Can I place it in a folder and have the path defined in the Custom Tag Paths in CF administrator? If so, how do I bind the cfc's method to the grid?
Thank you.
It works great for me.
formatsymbol = function(value) {
return String.leftPad(value,5,'0');
}
formatprice = function(value) {
return value.toFixed(3);
}
formatallordersgrid = function() {
mygrid = ColdFusion.Grid.getGridObject('all_orders_grid');
cm = mygrid.getColumnModel();
cm.setRenderer(1,formatsymbol);
cm.setRenderer(3,formatprice);
cm.setRenderer(6,formatprice);
cm.getColumnById(cm.getColumnId(3)).align = 'right';
cm.getColumnById(cm.getColumnId(4)).align = 'right';
cm.getColumnById(cm.getColumnId(5)).align = 'right';
cm.getColumnById(cm.getColumnId(6)).align = 'right';
cm.getColumnById(cm.getColumnId(7)).align = 'right';
mygrid.reconfigure(mygrid.getDataSource(),cm);
}
Can do formatting, plus aligning etc etc
1. Select a styles column into your query in your cfc. We'll querysetcell that column later when we know what it should be. I tried using row_number() in the select statement query to match to the cell numbers, but it wasn't working out.
<cfquery name="thisquery" datasource="#dsn#">
SELECT *, '' as styles FROM table
</cfquery>
2. You have to set the background color for cells individually, can't do whole specific rows, unfortunately, given the identifiers we have to work with. Since my grids never have more than 10 columns, I set the background colors for 10 cells for each row needing a bg color (to keep it standard across my grids.
For example, to change the first cell in the first row, set the class .x-grid-cell-0-1 to your bg color. For row 9, cell 4, the class is .x-grid-cell-8-4. Keep in mind that the row number is not simply currentrow-1 of the query. It is the row number of the current page of the grid (0 to #pagesize#, NOT 0 to #recordcount# unless you don't use paging). So, after I have my query, I then run this little blurb to set the styles, for the cells of each row. You can tailor it to be specific to rows that need color, of course:
<cfset this_row = 0>
<cfset this_limit = pagesize - 1>
<cfoutput query="thisquery">
<cfset this_color = "dddddd">
<cfif somequerycolumn IS "somevalue"><cfset this_color = "ffcc00"></cfif>
<cfset temp = #QuerySetCell(thisquery, "styles", "<STYLE TYPE=""text/css"">.x-grid-cell-#this_row#-1,.x-grid-cell-#this_row#-2,.x-grid-cell-#this_row#-3,.x-grid-cell-#this_row#-4,.x-grid-cell-#this_row#-5,.x-grid-cell-#this_row#-6,.x-grid-cell-#this_row#-7,.x-grid-cell-#this_row#-8,.x-grid-cell-#this_row#-9,.x-grid-cell-#this_row#-10 {background:###this_color#;}</STYLE>", currentrow)#>
<cfif this_row LT this_limit><cfset this_row = this_row + 1><cfelse><cfset this_row = 0></cfif>
</cfoutput>
3. In the cfgrid, I have a column for styles that is display="no". The styles are written but not displayed, and it seems to work fine after a lot of trial and error.
Hope this helps,
Tom
if(data == "Product 4") return "<b>" + data + "</b>";
else return data;
}
from the script with little success. Tried many other variations as well.Yes, I know I need to stick my head in a javascript book. Any thoughts?
thanks
thanks,
Bud
I believe your looking for this...
Replace:
if(data == "Product 4") return "<b>" + data + "</b>";
else return data;
}
... with ...
return "<b>" + data + "</b>";
... and your function won't filter out records that are not "Product 4".
Have fun,
Scott
I have a grid that shows display text and values for select box options.
If the text or value is Yes or No the grid renders it as True or False. I need to preserve the Yes and No text. I would write a custom renderer to force it but sometimes it is supposed to be True or False.
I was having this issue with cfajaxproxy calls, but all I had to do is call the setReturnFormat function and set it to "plain". I don't see any simular feature for the Grid, and I'm guessing that it won't be since the grid needs it to be JSON.
Any ideas on how to keep Yes and No from becoming True and False?
Thanks,
Scott
Thanks,
Scott
The grid holds the Options for the Select boxes value and display text. Sometimes the user wants the select box to be Yes/No, sometimes they want it to be True/False, sometimes it is something completely different.
Thanks for the super fast responses :). I can usually figure this stuff out, but this one's got me.
Shoot though, it won't work though as the grid will expect a certain response. What you want to do then is bind to a JavaScript function, do your Ajax call, and then manipulate the date. I've got another blog entry on here on binding a grid to a JS function.
You can also cheat. If CF's JSON is turning yes/no to true/false (or vice versa), you can change the data serverside to STOPMUCKING_#X# where X is the real value. CF will see it as a string and won't change it. In your custom renender, your logic now will be to simply remove STOPMUCKING_ from the value.
Kind Regards,
Scott
This is because sorting is done at the query level, buy the time your renderer sees it, the data is already sorted. The only way I know to get around this would be to format the data in the query itself, then it should sort correctly for you.
In my case, I'm not binding my grid to a component/query, but rather I loop over query results in the display page, so there is no callback to the server when a sort is performed.
Tony
ex: "cm.setRenderer(1,myf);" will pass what is in the product column (column 1) to be checked in the myf function, and if the data in a certain row is "Product 4", it'll return the data with bold tags around it.
How can I apply that to the price column (column 0) if the product column (column 1) data is "Product 4"?
myf = function(data,cellmd,record,row,col,store) {
if(data == "Product 4") return "<b>" + data + "</b>";
else return data;
}
See all those arguments? row+col are both in there.
Let's make it simpler.
You want column X to be bold if column Y is some value, right?
As I said, you _apply_ the custom function to column X (see code above). In that function, you have access to the entire row, so you can look at the stuff in column Y.
Does that make sense?
myf = function(data,cellmd,record,row,col,store) {
if(record.data.PRODUCT == "Product 4") return "<b>" + data + "</b>";
else return data;
}
testgrid = function() {
mygrid = ColdFusion.Grid.getGridObject('data');
cm = mygrid.getColumnModel();
cm.setRenderer(0,myf);
mygrid.reconfigure(mygrid.getDataSource(),cm);
}
Then, in the renderer, check record.get("column_name_to_check)
if the value equals whatever, then set the cell to bold.
Does this make any sense?
u=d+bomb(.com)
Thanks Ray...
http://www.extjs.com/deploy/dev/docs/
Literally invaluable. If you can't find an answer in there, the EXT forums are EXTREMELY active:
http://www.extjs.com/forum/
good luck!
More than a few people helped me extensively on the EXT forums when I was getting started (and often help me now when I run into a problem).
I am more than happy to pass along the same curteousy whenever I can. Good luck w/ the EXT package - in my opinion, the absolute best JS UI package available.
Is JS short for JavaScript and if so, wills any of this work if the users disable JavaScript in the browser?
Thanks
Yes, JS is short for JavaScript, and this will not work if they disable it.
what are the work arounds if the user disable JavaScript?
should I invest in purchasing Ext JS and upgrading to 8?
how will I get it to work in my version?
Chaz
Has anyone figured out how to get rid of all the extra $0.00s besides building your own custom grid renderer? I would like to use the built-in usMoney one but it can't seem to distinguish between blank rows and rows with data.
Thank you for any help!
<!--- Special rendering for company name colors --->
<script type="text/javascript">
// custom renderer for NAME column
renderName = function(data,cellmd,record,row,col,store) {
// retrieve the color code column
colorcode = record.data.structure_color_code;
// render the NAME column text in the corresponding color from the color column
return '<b style="color:red;">' + data + '</b>';
}
// function to invoke custom renderers and return re-configured grid (called from ajaxonload() at the bottom of page
testgrid = function() {
mygrid = ColdFusion.Grid.getGridObject('grid_Companies');
cm = mygrid.getColumnModel();
cm.setRenderer(2,renderName); // assign custom renderer for Name column in the grid
mygrid.reconfigure(mygrid.getDataSource(),cm); // reconfigure grid
}
</script>
my grid is binded through a query as i display below:
<cfgrid format="html" name="GvSpec" width="800" pagesize="10" selectonload="true" autowidth="yes" query="ProductSpec" selectmode="row" >
<cfgridcolumn name="stdTitle" width="70" header="Doc" >
<cfgridcolumn name="PartNumber" width="50" header="P No." select="no">
<cfgridcolumn name="detailURL" width="200" header="Spec Url" >
</cfgrid>
how can i refresh this grid? As much as I know, ColdFusion.grid.refresh("GvSpec") does not work when we use query in CFGRId. I tried this javascript on button click
var mygrid = ColdFusion.Grid.getGridObject('GvSpec1');
mygrid.render();
but this not showing new records in database.
Please help me...
I have it returning red text for me. You need to put \ marks infront of the " in your javascipt.
Here is mine:
myf = function(data,cellmd,record,row,col,store) {
if(data == "Foo") return "<span style=\"background-color:#FF0000\">" + data + "</span>";
else return data;
}
testgrid = function() {
mygrid = ColdFusion.Grid.getGridObject('resultsGrid');
cm = mygrid.getColumnModel();
cm.setRenderer(1,myf);
mygrid.reconfigure(mygrid.getDataSource(),cm);
}
Your code worked great. The only problem is that it stops changing the colors about 38 rows down. So if the query is longer than that it doesn't do the whole thing. I am not using paging to i have:
<cfset this_limit = #thisquery.recordcount#>
Any help would be great.
Drew
myf = function(data,cellmd,record,row,col,store){
if(data == "-") return "<span style=\"background-color:#FF0000\">" + data + "</span>";
else return data;
}
testgrid = function()
{
mygrid = ColdFusion.Grid.getGridObject('priceGrid');
cm = mygrid.getColumnModel();
cm.setRenderer(1, myf);
mygrid.reconfigure(mygrid.getDataSource(), cm);
}
Any thoughts?
I went through and checked all my cases and they match. Now it says I am getting a syntax error on line 40 but when I got to debug it says "testgrid" is undefined again and points me to line 108.
I am really new to javascript/coldfusion so please excuse me if this is worded badly.
testgrid = function()
but you asked to run testGrid.
Try renaming the function to testGrid.
mygrid = ColdFusion.Grid.getGridObject('priceGrid');
is where you input the variable name of your actual grid. However I did change the function to testGrid and still get the syntax error and then the "testGrid is not defined" error. My code again is:
myf = function(data,cellmd,record,row,col,store){
if(data == "-")) return "<span style=\"background-color:#FF0000\">" + data + "</span>";
else return data;
}
testGrid = function()
{
mygrid = ColdFusion.Grid.getGridObject('priceGrid');
cm = mygrid.getColumnModel();
cm.setRenderer(1, myf);
mygrid.reconfigure(mygrid.getDataSource(), cm);
}
and at the bottom of the page:
<cfset ajaxOnLoad("testGrid")>
My thought for the syntax error is the "data == "-"" part. Is that the right way to compare it to a string not an numeric value?
for(var x = 0; x < cm.getColumnCount(); x++)
{
cm.setRenderer(x, myf);
}
I know it is not really the place to ask this, but I did not find a better one -)
I try to filter data on a cfgrid with a extjs select placed on the grid toolbar without success. I saw on the net a lot of example, but this always filter 'on the page'.
Filter on cfselect is no problem. Just give the name of the component in the params of the cfc call and it is fine. But giving the name of the extjs select does not filter anything.
So does somebody know how I can pass the extjs select value to the cfc method ?
Thank you in advance and greetings from Belgium,
Michel.
My version of your myf() renderer function looks like this:
myf = function(data,cellmd,record,row,col,store)
{
if (data == 'G')
cellmd.css = 'Green';
else if (data == 'R')
cellmd.css = 'Red'
else if (data == 'Y')
cellmd.css = 'Yellow'
return(data);
}
My CSS contains:
.Red {
background:red!important;
color:white!important;
}
.Green {
background:green!important;
color:white!important;
}
.Yellow {
background:yellow!important;
color:black!important;
}
And a second question, my select in my CFC is of datatype "bit" (0/1) but I type cast so the select returns "No/Yes". But the CFGrid is showing it as false/true. Per your comment # 52 above, you mention passing returnFormat=plain in the URL. I'm not binding my grid to a URL but a CFC. How/where in the code do I set returnFormat=plain?
Thank you very much from a CFGrid, ExtJS newbie.
As to your second question, the returnFormat attribute goes in the url portion.
As for the second question, I'm NOT using a URL. I'm using a CFC/component to do the binding. So I'm assuming the returnFormat=plain goes somewhere in the testgrid() JavaScript function. Would you mind giving me the syntax on how to do that?
Thanks very much :)
cfc:foo.goo()
you want to switch to url mode
url:foo.cfc?method=goo&returnformat=plain
It's the same thing - just a different way to hit it.
.css - A CSS class name to add to the cell's TD element.
.attr - An HTML attribute definition string to apply to the data container.
myf = function(data,cellmd,record,row,col,store)
{
if (data == 'G')
{cellmd.css = 'Green';
cellmd.attr = 'style="color:White;"';}
else if (data == 'R')
{cellmd.css = 'Red';
cellmd.attr = 'style="color:White;"';}
else if (data == 'Y')
cellmd.css = 'Yellow'
return(data);
}
Regarding my second question about showing Yes/No instead of true/false, I found that returnformat is an argument to my CFC function and it is NOT valid for CF8 (only in CF9). In searching the ExtJS site, I found the BooleanColumn class.
In my version of your testgrid() function I added the 2 lines below but keep getting this JavaScript error: Object doesn't support this property or method. I updated my ext-all.js file to make sure it's up to date but keep getting the error. I believe it's only my syntax that wrong. Can you help me with that? Thanks :)
mygrid.getBooleanColumn().falseText('No');
mygrid.getBooleanColumn().falseText('No');
myGrid.getBooleanColumn().trueText('Yes');
1) returnFormat is valid in CF8. It is a special argument that 'flavors' the response to either plain, json, or wddx.
2) Sorry - no idea on your error - you are beyond my knowledge. :) I can say it is probably dangerous to update ColdFusion's EXT files. A future update (like 8.0.2 perhaps, if it is created) may blow away your changes. What I recommend to folks who want REAL fine grained control is - download Ext separately and use it separately. Yes it is more work, but, you get more control.
How would one mask/render the value of a select list from a query? My grid displays the actual value (number) instead of what that number represents (Name). When I clicked into the cell to edit, the dropdown displays correctly the names but the gridcolumn displays the number. Any ideas?
Thanks for any help here. I've looked for a solution during these past few days, but no luck.
1) How do I allow the user to manually resize a column width by clicking and dragging the header cell border?
2) How do I lock a column the way a user freezes columns/panes in Excel?
(
imports for tag cfform are missing. use cfajaximport them on your main page.[Enable debugging by adding 'cfdebug' to your url parameters to see more information]
)
this error
function gridSetup()
{
var myGrid = ColdFusion.Grid.getGridObject('results');
cm = myGrid.getColumnModel();
cm.getColumnById(cm.getColumnID(1)).resizable = true;
}
I've been setting up some grids here at work and have found that the reconfigure method slows down the page dramatically. On a whim I commented it out and the custom formatting stayed and loaded much, much faster.
Am I missing something? Is it necessary to reconfigure the store?
Select docType (col1), title (col2)
ulimately I need <img src="images/"+docType+">"+title;
but everything I can find, I could ONLY output col1 the docType OR col2 the title, not both seperate. I apologize if I am speaking jibberish ;o)
In other words, when you want to display the title, as you said, you want to check docttype. You can - its in the row data.
myf = function(data,cellmd,record,row,col,store) {
if(data == "Product 4") return "<b>" + data + "</b>";
else return data;
}
data seems to only give you info on the column specified. I need like a data1 data2 scenario.
cfgrid is Ext.grid so this seems like it should work with using cfgrid.. anyone?
I spent a long time trying to figure out how to style row colors, with this thread being the key to getting it to work. If you need to set row colors based on some logic from SQL, here is a great method to do so in CFGRID. Hope this saves someone else some headaches -
First - create a column in SQL called 'styles' and setup some rules that will pass in some css classes that define your rows. So, you are passing in class names like 'RedBg', 'BlueBg', whatever. I like using case statements in SQL (to avoid looping the query), but you could also just loop the query and use cf to fill in your column.
Second - Make a cfgridcolumn for 'styles' and set it to hidden
Third - Follow Ray's example above, but modify it like this:
myf = function(data,cellmd,record,row,col,store) {
cellmd.css = record.data.STYLES;
return data;
}
row_colors = function() {
mygrid = ColdFusion.Grid.getGridObject('gridname');
cm = mygrid.getColumnModel();
var i=0;
for (i=0; i<=20; i++){
cm.setRenderer(i,myf);
};
mygrid.reconfigure(mygrid.getDataSource(),cm);
}
This one will style 20 columns, which is probably more than you have. You can always up the number to make sure it gets all of them.
Hope this helps someone!
my code is very simple
<cfquery name = "GetCourses" dataSource = "calisma">
SELECT id, name, surname,email
FROM egemen_deneme
</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>
I have an issue with grid display, when I click on drop-down list available on header, options are cutting right. When I mouse hover it, options will display properly. I hope this require some changes to ext file or any other CSS files related to grid but not sure file name, can u help me to get this done.
am using CF 9.
Thanks in adv