hefterr
asked on
ColdFusion v8 to v10 Display Issues - HHEEEEELLLP
Hi Experts,
We have migrated from CF8.01 to CF10 and I knew this CFGRID would not go quietly!!
Please see the attached WORD doc for display example and differences.
I had overridden a bit in the CF8 version as it was quirky back then. Here were some overrides that now being ignored in V10.
This worked perfectly in CF8 but the css/javascript overrides seem to be completely ignored in CF10?
Any help word be GREATLY appreciated!!!
Thanks in advance,
hefterr
We have migrated from CF8.01 to CF10 and I knew this CFGRID would not go quietly!!
Please see the attached WORD doc for display example and differences.
I had overridden a bit in the CF8 version as it was quirky back then. Here were some overrides that now being ignored in V10.
This worked perfectly in CF8 but the css/javascript overrides seem to be completely ignored in CF10?
Any help word be GREATLY appreciated!!!
Thanks in advance,
hefterr
//Prevents the grid from being resized
<script type="text/javascript">
fixgrid = function() {
mygrid = ColdFusion.Grid.getGridObject('orderGrid')
cm = mygrid.getColumnModel();
for(var i=0; i<cm.getColumnCount();i++) {
col = cm.getColumnById(i)
col.resizable=false
}
mygrid.reconfigure(mygrid.getDataSource(),cm);
}
</script>
<script type="text/javascript">
//function to add listener that will cancel all row selections to turn off the highlighting of the selected row in the cfgrid
function disableGridHighlight(){
var myGrid = ColdFusion.Grid.getGridObject("orderGrid");
selModel=myGrid.getSelectionModel();
selModel.on('beforerowselect',function(selModel,rowIndex,keepExisting){return false});
}
</script>
.x-grid-cell-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
.x-grid-hd-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
text-align: center;
}
.x-grid-col-3 {
text-align: right;
}
.x-grid-col-2 {
text-align: center;
}
.x-grid-col-1 {
text-align: left;
}
.x-grid-col-0 {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.x-grid-col-0 a {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0778CB;
text-decoration: none;
}
.x-grid-col-0 a:hover {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FAA635;
text-decoration: none;
}
The actual CFGRID call
<tr>
<td class="acLegend">
<cfgrid name="orderGrid"
format="html"
autowidth="no"
pagesize="10"
striperows="yes"
fontsize="12px"
textcolor="##666666"
selectmode="browse"
colheadertextcolor="##666666"
colheaderfontsize="12px"
colheaderbold="yes"
colheaderalign="center"
selectonload="false"
bind="cfc:cpMethods.OrderHist({cfgridpage},
{cfgridpagesize},
{cfgridsortcolumn},
{cfgridsortdirection},
'#cfcFromDate#', '#cfcToDate#' )">
<cfgridcolumn name="OrderId"
header="Order Number"
width="200">
<cfgridcolumn name="SOrderDate"
header="Order Date"
width="200">
<cfgridcolumn name="ItemsOrdered"
header="Items Ordered"
width="200">
<cfgridcolumn name="TotalDue"
header="Order Total"
width="170">
</cfgrid>
</td>
</tr>
The actual CFC:
<!--- Browse Order History for CFGRID --->
<cffunction name="OrderHist"
access="remote"
returntype="struct"
hint="Browse method for Ajax grid">
<cfargument name="page"
type="numeric"
required="yes">
<cfargument name="pageSize"
type="numeric"
required="yes">
<cfargument name="gridsortcolumn"
type="string"
required="no"
default="">
<cfargument name="gridsortdir"
type="string"
required="no"
default="">
<cfargument name="fromDate"
type="string"
required="yes">
<cfargument name="toDate"
type="string"
required="yes">
<!--- Local variables --->
<cfset var getOrderHist = "">
<cfset var format = "">
<cfset var formatTotal = "">
<cfquery name="getOrderHist" datasource="#application.dsn#">
Select convert(varchar, OrderDate, 106) as FormOrderDate, convert(varchar, OrderDate, 111) as SOrderDate, OrderId, ItemsOrdered, TotalDue from Orders
where Custno = #session.custNo#
and Status = 2
and OrderDate between '#arguments.fromDate#' and Dateadd(day, +1, '#arguments.toDate#')
<cfif ARGUMENTS.gridsortcolumn NEQ ""
and ARGUMENTS.gridsortdir NEQ "">
ORDER BY #ARGUMENTS.gridsortcolumn# #ARGUMENTS.gridsortdir#
<cfelse>
ORDER BY OrderId
</cfif>
</cfquery>
<!---============> --->
<!---Reformat and add links to the original query result:--->
<!--- Need to formt HTML link, formated SQL date, and Dollar amound for display--->
<cfset format = querynew('OrderId,SOrderDate,ItemsOrdered,TotalDue')>
<cfloop query="getOrderHist">
<cfset queryaddrow(format)>
<cfset querysetcell(format,'OrderId','<a href="AMorderDetail.cfm?type=hist&CFGRIDKEY=#getOrderHist.OrderId#">#getOrderHist.OrderId#</a>')>
<cfset querysetcell(format,'SOrderDate',getOrderHist.FormOrderDate)>
<cfset formatTotal = dollarformat(getOrderHist.TotalDue)>
<cfset querysetcell(format,'ItemsOrdered',getOrderHist.ItemsOrdered)>
<cfset querysetcell(format,'TotalDue',formatTotal)>
</cfloop>
<!---==================> --->
<!--- And return it as a grid structure --->
<cfreturn QueryConvertForGrid(format,
ARGUMENTS.page,
ARGUMENTS.pageSize)>
</cffunction>
<!---************************ end of Function ORDERHIST ******************************--->
Coldfusion-V10-Grid.doc
i had worked with cfgrid a lot with version 3 and cf8+, can you please show me you cfgrid code what issues you are facing so i can help you in whatever i can offer here
ASKER
@myselfrandhawa,
I do have the code in he post. Plus a screen shot of v8 versus v10 (attached Word doc).
The problems I am having is :
1) The script to prevent grid resizing is not working (see code)
2) The script to suppress row highlighting when you mouse over a row is not working (see code).
3) The css overrides ( see code above)
.x-grid-hd-text (not centered)
.x-grid-col-0 (link is underlined and maybe a smaller font)
.x-grid-col-2 (not centered)
.x-grid-col-3 (not right justified)
Thanks,
hefterr
I do have the code in he post. Plus a screen shot of v8 versus v10 (attached Word doc).
The problems I am having is :
1) The script to prevent grid resizing is not working (see code)
2) The script to suppress row highlighting when you mouse over a row is not working (see code).
3) The css overrides ( see code above)
.x-grid-hd-text (not centered)
.x-grid-col-0 (link is underlined and maybe a smaller font)
.x-grid-col-2 (not centered)
.x-grid-col-3 (not right justified)
Thanks,
hefterr
ASKER
@_agx_,
I am not sure what to ask the javascript/jQuery experts as it is ColdFusion code integrated?
If you could take a quick look I'd appreciate it. Any hint would help.
Thanks,
hefterr
I am not sure what to ask the javascript/jQuery experts as it is ColdFusion code integrated?
If you could take a quick look I'd appreciate it. Any hint would help.
Thanks,
hefterr
> I am not sure what to ask the javascript/jQuery experts as it is ColdFusion code integrated?
Well they're wouldn't understand CF code obviously, but with most stuff they wouldn't need to. All CF really does is generates the client side code automatically: <style> and <script> includes and a few custom javascript functions. After that's it is purely client side code. Just css and javascript.
With 3rd party components like this, I usually try and separate out the parts I know they'll understand (ie the client side code - css, javascript, view source) and ask in their language. Ask how functionality xyz is normally done in ExtJS. It could be that something's changed in v3.x.x. I'd also break it into single questions. Ask about each issue separately, since it's a lot to cover and there's already a language barrier in play ..
For example:
"I've got a grid. Most of the code is automatically generated by my application server. (I'm not looking for help with that part.) We recently upgraded the server and some of the code used to style the grid no longer works. The old server used ExtJS 1.x. The new version uses ExtJS 3.x. So I'm trying to determine if the problem is caused by changes to ExtJS. Under ExtJS 1.x, I used the following code {...client side css...} to prevent links from being underlined on mouseover. It no longer works in ExtJS 3.x. Is this the correct way to do it in v3.x?
Anyway, it could be a combination of changes in ExtJS -and- CF. I'm not sure. I'll try and take a look as soon as I get chance.
Well they're wouldn't understand CF code obviously, but with most stuff they wouldn't need to. All CF really does is generates the client side code automatically: <style> and <script> includes and a few custom javascript functions. After that's it is purely client side code. Just css and javascript.
With 3rd party components like this, I usually try and separate out the parts I know they'll understand (ie the client side code - css, javascript, view source) and ask in their language. Ask how functionality xyz is normally done in ExtJS. It could be that something's changed in v3.x.x. I'd also break it into single questions. Ask about each issue separately, since it's a lot to cover and there's already a language barrier in play ..
For example:
"I've got a grid. Most of the code is automatically generated by my application server. (I'm not looking for help with that part.) We recently upgraded the server and some of the code used to style the grid no longer works. The old server used ExtJS 1.x. The new version uses ExtJS 3.x. So I'm trying to determine if the problem is caused by changes to ExtJS. Under ExtJS 1.x, I used the following code {...client side css...} to prevent links from being underlined on mouseover. It no longer works in ExtJS 3.x. Is this the correct way to do it in v3.x?
Anyway, it could be a combination of changes in ExtJS -and- CF. I'm not sure. I'll try and take a look as soon as I get chance.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi _agx_
Thanks so much for your help!! You are awesome!
The code that disables row highlighting is fine, as long as you call it on load:
I had this code in the program already. Sorry, I didn't originally include it :
<body id="AM_orderhist">
<cfset ajaxOnLoad("fixgrid")>
<cfset ajaxOnLoad("disableGridHig hlight")>
<CFFORM name="OrderHistory" id="Ohist" action="AMorderHist.cfm" method="post">
Isn't that the same?
Thanks much!
Thanks so much for your help!! You are awesome!
The code that disables row highlighting is fine, as long as you call it on load:
I had this code in the program already. Sorry, I didn't originally include it :
<body id="AM_orderhist">
<cfset ajaxOnLoad("fixgrid")>
<cfset ajaxOnLoad("disableGridHig
<CFFORM name="OrderHistory" id="Ohist" action="AMorderHist.cfm" method="post">
Isn't that the same?
Thanks much!
> Grid short of table with (CFGRIDCOULMN dimension issue?)
Weirdly it's an extra column. If you debug the column model it has 5 columns - not 4. You should be able to hide it with:
mygrid.getColumnModel().se
.. inside "fixgrid", but it doesn't quite work. I think the "hide" is being overridden by some other grid event. The question is which one ... :/
That's about all I can figure out for now.
Isn't that the same?
(Edit) It should be :) But you said it wasn't working and I didn't see the "onload" code ... I know it works when called inside "fixgrid". So if they both work, use whichever option you prefer.
ASKER
I know it works when called inside "fixgrid"
I'm not sure what you meant by this. Should I move the statements? They don't work where they are in V10?
I'm not sure what you meant by this. Should I move the statements? They don't work where they are in V10?
ASKER
I see you combined "fixgrid" and "disableGridHighlight" into the same <script></script>. you then have 1 single
<cfset ajaxOnLoad("fixgrid")>
But you don't also load "disableGridHighlight"?
I am a bit confused as you say you got them both working? Just trying to see what you did differently and I didn't understand your comment.
<cfset ajaxOnLoad("fixgrid")>
But you don't also load "disableGridHighlight"?
I am a bit confused as you say you got them both working? Just trying to see what you did differently and I didn't understand your comment.
Your document suggested
a) disable column resizing
AND
b) disable row highlighting
weren't working in CF10. All I meant was if your code isn't working - here's an example that does ;-)
a) disable column resizing
AND
b) disable row highlighting
weren't working in CF10. All I meant was if your code isn't working - here's an example that does ;-)
ASKER
Thanks again, for all your help. I'll get the rest working one way or another! I've seen gap that you found out was the fifth column before. I've fixed it by playing with the column widths to eliminate it.
For the heading, there has to be some CSS involved. I'll find it.
hefterr
For the heading, there has to be some CSS involved. I'll find it.
hefterr
ASKER
Thanks again!
> I've fixed it by playing with the column widths to eliminate it.
Good idea. I was thinking of doing the same last night, but was too tired ;-) Glad you found a way around it!
Good idea. I was thinking of doing the same last night, but was too tired ;-) Glad you found a way around it!
> For the heading, there has to be some CSS involved. I'll find it.
For that one you might ask the ExtJS guys. I'd just ask something like "how do you change grid header font/color/..etc. in v3.x? With v1.x, I used "x-grid-hd-text" ...etc... but that class doesn't seem to work anymore."
For that one you might ask the ExtJS guys. I'd just ask something like "how do you change grid header font/color/..etc. in v3.x? With v1.x, I used "x-grid-hd-text" ...etc... but that class doesn't seem to work anymore."
ASKER
Funny thing is that I've coded the colheaderxxx parameters and they never have worked for me. Perhaps it's because of the other JS and CSS I also threw in? I don't get why so many of the CFGRID parameter haven't work since v8?
Thanks also for helping me work the questions to the ExtJS guys.
hefterr
Thanks also for helping me work the questions to the ExtJS guys.
hefterr
(Edit) Which parameters? You mean: x-grid-hd-text or the <cfgrid colheaderxxxx> attributes?
> I don't get why so many of the CFGRID parameter haven't work since v8?
Based on the digging I did last night it seems a LOT of things have changed. I don't know whose decision it was to change things so radically. Maybe they had to because ExtJS changed? Not a great idea IMO... because it breaks so much existing code ... what a pain.
> I don't get why so many of the CFGRID parameter haven't work since v8?
Based on the digging I did last night it seems a LOT of things have changed. I don't know whose decision it was to change things so radically. Maybe they had to because ExtJS changed? Not a great idea IMO... because it breaks so much existing code ... what a pain.
ASKER
Hi _agx_,
I didn't test it yet but I think the css for the headers is .x-grid3-hd-column_name.
I did a view source and searched for "grid3-hd" (from your examples) and they popped up.
I have my "work" computer packed for a tricp to Cape Cod. I'll put it all together up there and hope for the best.
I think it's a nice "client side/Ajax" out of the box feature - but it sure is a buggy function that's been around at least since V8.
I'll have to complain to Ray Camden :)
hefterr
I didn't test it yet but I think the css for the headers is .x-grid3-hd-column_name.
I did a view source and searched for "grid3-hd" (from your examples) and they popped up.
I have my "work" computer packed for a tricp to Cape Cod. I'll put it all together up there and hope for the best.
I think it's a nice "client side/Ajax" out of the box feature - but it sure is a buggy function that's been around at least since V8.
I'll have to complain to Ray Camden :)
hefterr
> I think the css for the headers is .x-grid3-hd-column_name.
Good spot! I totally missed that last night. I tested it and it works :)
> I'll have to complain to Ray Camden :)
Well Adobe's more likely to listen to him than us ;)
> I think it's a nice "client side/Ajax" out of the box feature - but it sure is a buggy function
Very true. It's great that they try and provide a simplified wrapper. But .. it's a complex library. Honestly I doubt they put as much testing into it as the ExtJS authors have. In some ways you're almost better off using the libraries directly. There's a steeper learning curve, but you'd have much greater control ...
Enjoy Cape Code! (I'm very jealous :)
Good spot! I totally missed that last night. I tested it and it works :)
> I'll have to complain to Ray Camden :)
Well Adobe's more likely to listen to him than us ;)
> I think it's a nice "client side/Ajax" out of the box feature - but it sure is a buggy function
Very true. It's great that they try and provide a simplified wrapper. But .. it's a complex library. Honestly I doubt they put as much testing into it as the ExtJS authors have. In some ways you're almost better off using the libraries directly. There's a steeper learning curve, but you'd have much greater control ...
Enjoy Cape Code! (I'm very jealous :)
ASKER
Enjoy Cape Code! (I'm very jealous :)
Don't be too jealous. We're staying at my mother-in-laws!!
Don't be too jealous. We're staying at my mother-in-laws!!
> We're staying at my mother-in-laws!!
Ouch! I take it all back ;-)
Ouch! I take it all back ;-)
ASKER
Hi agx,
Sorry for the late hit. But I can't get the suppression of the highlight on mouse over to work. It's not the dark blue but the row get's a slightly different color on mouse over?
Did you get this to work?
Thanks,
hefterr
Sorry for the late hit. But I can't get the suppression of the highlight on mouse over to work. It's not the dark blue but the row get's a slightly different color on mouse over?
Did you get this to work?
Thanks,
hefterr
I'd have to double check it. I think I was just looking for absence of the bright blue color.
Hm... did it ever work in CF8? this guys says the original "beforerowselect" hack just disables row selections, not row highlighting.
http://www.coldfusionguy.com/ColdFusion/blog/index.cfm/2008/3/11/CFGrid-Disabling-the-Selected-Row-HighLighting
"I am not sure yet how else to disable the highlighting because it appears to be something that has to be set when the Grid is first initialized..."
http://www.coldfusionguy.com/ColdFusion/blog/index.cfm/2008/3/11/CFGrid-Disabling-the-Selected-Row-HighLighting
"I am not sure yet how else to disable the highlighting because it appears to be something that has to be set when the Grid is first initialized..."
ASKER
Hi agx,
Yeah - it worked fine in CF8. Another think to research. Also I can't yet get rid of that extra column on the right. Arrrgggghhhhh.
Yeah - it worked fine in CF8. Another think to research. Also I can't yet get rid of that extra column on the right. Arrrgggghhhhh.
It might've been a coincidence, because it doesn't sound like "beforerowselect" is supposed to control mouseovers. Or maybe it's something else that's changed in ExtJS. I don't have access to CF8 right now. 'll have a look later. See what I can figure out.
ASKER
Hi agx,
Thanks so much. To be honest, the thing that looks the worst is the extra column.
I saw a similar post : http://stackoverflow.com/questions/9488516/why-is-my-cfgrid-showing-extra-space-to-the-right
But no real answer. If you like, I'll re-post the question as you deserve additional points.
hefterr
Thanks so much. To be honest, the thing that looks the worst is the extra column.
I saw a similar post : http://stackoverflow.com/questions/9488516/why-is-my-cfgrid-showing-extra-space-to-the-right
But no real answer. If you like, I'll re-post the question as you deserve additional points.
hefterr
Yeah, we're definitely pushing my ExtJS knowledge on that one. The funny thing is if you add an alert just after the column is hidden in "fixgrid", you can see it works. The column is gone. But then it reappears. So there must be some event triggering an override .. but I don't know what that event is ...
I'd open a new question and try get feedback from the ExtJS guys too. I'd specifically ask, "What's the correct way to hide a column? ie setHidden(...)" and maybe "what events might override setHidden(...)?"
fixgrid = function() {
mygrid = ColdFusion.Grid.getGridObject('orderGrid')
cm = mygrid.getColumnModel();
for(var i=0; i<cm.getColumnCount();i++) {
colID = cm.getColumnId(i);
col = cm.getColumnById(colID);
col.resizable=false;
// hide extra "system"(?) column at end
if (colID == "CFGRIDROWINDEX") {
cm.setHidden(i, true);
alert("hide me!!");
}
}
.....
}
I'd open a new question and try get feedback from the ExtJS guys too. I'd specifically ask, "What's the correct way to hide a column? ie setHidden(...)" and maybe "what events might override setHidden(...)?"
ASKER
FYI. Autowidth="yes" had some degree of success. Looked good in Safari. Didn't work in Firefox and worked but truncated the right justified totals column a bit?
Funny thing is with autowidth=yes, the columnModel.setHidden(...) worked in IE, but not FF. Ugh ...
Overriding the widths via CSS "sort-of" works. But it's not consistent across browsers. A few pixels difference so it doesn't look smooth.
.x-grid3-td-ORDERID { width: 198px !important; }
.x-grid3-td-SORDERDATE { width: 198px !important; }
.x-grid3-td-ITEMSORDERED { width: 198px !important; }
.x-grid3-td-TOTALDUE { width: 168px !important; } */
.x-grid3-td-CFGRIDROWINDEX { display: none !important; width: 0px !important; }
Overriding the widths via CSS "sort-of" works. But it's not consistent across browsers. A few pixels difference so it doesn't look smooth.
.x-grid3-td-ORDERID { width: 198px !important; }
.x-grid3-td-SORDERDATE { width: 198px !important; }
.x-grid3-td-ITEMSORDERED { width: 198px !important; }
.x-grid3-td-TOTALDUE { width: 168px !important; } */
.x-grid3-td-CFGRIDROWINDEX
ASKER
To all,
I got in touch with Ray Camden, and he was able to eliminate the "extra column" on the right hand side. He said it was a phantom Scrolling column.
He modified one of my JS overrides by adding a single line of code:
Thought I'd pass this on.
hefterr
I got in touch with Ray Camden, and he was able to eliminate the "extra column" on the right hand side. He said it was a phantom Scrolling column.
He modified one of my JS overrides by adding a single line of code:
<script type="text/javascript">
fixgrid = function() {
//Prevents the grid from being resized
mygrid = ColdFusion.Grid.getGridObject('orderGrid')
mygrid.getView().scrollOffset=1; //added by Ray Camden
cm = mygrid.getColumnModel();
for(var i=0; i<cm.getColumnCount();i++) {
colID = cm.getColumnId(i);
col = cm.getColumnById(colID);
col.resizable=false
}
}
Thought I'd pass this on.
hefterr
(I'm stuck on a project today, but I'll try and take a look tomorrow if you don't get an answer by then.)