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


//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&amp;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   ******************************--->


	

Open in new window

Coldfusion-V10-Grid.doc
LVL 1
hefterrAsked:
Who is Participating?
 
_agx_Connect With a Mentor Commented:
Adobe's change to using column name instead of index is what broke the resizable=false code as well.  (Oh joy!)  

To fix it you need to find the column id first. Then call "getColumnById()":

The code that disables row highlighting is fine, as long as you call it on load:

<script type="text/javascript">
    fixgrid = function() {
          //Prevents the grid from being resized
           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
           }
       
          disableGridHighlight();
          // getDatasource Changed as of CF9
          // http://www.webtrenches.com/post.cfm/coldfusion-9-cfgrid-and-getdatasource
          mygrid.reconfigure(mygrid.getStore(),cm);
    }
    
    //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>

.....

<cfset ajaxOnLoad("fixgrid")>

Open in new window

0
 
_agx_Commented:
Despite the fact that you are using CF to generate the grid, my guess is that the issues are caused by changes to the underlying grid library: ExtJS. CF8 used ExtJS v1.1.1. CF10 jumped to using ExtJS v3.1.0. I'm not great w/grids ... so I'd ask the mods to change the topics to attract javascript experts familiar with ExtJS.  They'd probably know better than I would what CSS/javascript changes you need.

(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.)
0
 
Gurpreet Singh RandhawaWeb DeveloperCommented:
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
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
hefterrAuthor Commented:
@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
0
 
hefterrAuthor Commented:
@_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
0
 
_agx_Commented:
> 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.
0
 
_agx_Connect With a Mentor Commented:
There's a bunch of issues, but I figured out one the problem :) It is a combination of changes in ExtJS and CF.  Apparently the CSS classes in ExtJS 3.x have changed

from:   .x-grid-col-xxx
to:        .x-grid3-col-xxx         <=== now called "grid3" instead of just "grid"

An ExtJS person probably would've figured that out sooner than I did ;-) But .. to further muck things up Adobe switched from using column index:

            .x-grid-col-0
            .x-grid-col-1
            .x-grid-col-2
            ...

... to column name (upper case). Grrrr.....

      .x-grid3-col-ORDERID
      .x-grid3-col-SORDERDATE
      .x-grid3-col-ITEMSORDERED

This will fix most of the CSS issues:

.x-grid3-col-TOTALDUE {
    text-align: right;
}

.x-grid3-col-ITEMSORDERED {
    text-align: center;
}

.x-grid-col-SORDERDATE {
    text-align: left;
}

.x-grid3-col-ORDERID {
    text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.x-grid3-col-ORDERID a {
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
    color: #0778CB;
	text-decoration: none;
}

.x-grid3-col-ORDERID a:hover {
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FAA635;
	text-decoration: none;
}

Open in new window


Still not sure about these two:

             .x-grid-cell-text
             .x-grid-hd-text

I tried changing them to "grid3" but it didn't seem to work :/
0
 
hefterrAuthor Commented:
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("disableGridHighlight")>

<CFFORM name="OrderHistory" id="Ohist" action="AMorderHist.cfm" method="post">


Isn't that the same?

Thanks much!
0
 
_agx_Commented:
> 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().setHidden( colIndex, true);

.. 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.
0
 
_agx_Commented:
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.
0
 
hefterrAuthor Commented:
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?
0
 
hefterrAuthor Commented:
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.
0
 
_agx_Commented:
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  ;-)
0
 
hefterrAuthor Commented:
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
0
 
hefterrAuthor Commented:
Thanks again!
0
 
_agx_Commented:
> 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!
0
 
_agx_Commented:
> 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."
0
 
hefterrAuthor Commented:
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
0
 
_agx_Commented:
(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.
0
 
hefterrAuthor Commented:
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
0
 
_agx_Commented:
>  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 :)
0
 
hefterrAuthor Commented:
Enjoy Cape Code! (I'm very jealous :)

Don't be too jealous.  We're staying at my mother-in-laws!!
0
 
_agx_Commented:
> We're staying at my mother-in-laws!!

Ouch!  I take it all back ;-)
0
 
hefterrAuthor Commented:
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
0
 
_agx_Commented:
I'd have to double check it. I think I was just looking for absence of the bright blue color.
0
 
_agx_Commented:
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..."
0
 
hefterrAuthor Commented:
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.
0
 
_agx_Commented:
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.
0
 
hefterrAuthor Commented:
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
0
 
_agx_Commented:
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 ...

	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!!");
                    }
	   	}
	   
		.....
	}

Open in new window


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(...)?"
0
 
hefterrAuthor Commented:
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?
0
 
_agx_Commented:
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; }
0
 
hefterrAuthor Commented:
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:

<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
           }
}

Open in new window


Thought I'd pass this on.

hefterr
0
All Courses

From novice to tech pro — start learning today.