Solved

ColdFusion v8 to v10 Display Issues - HHEEEEELLLP

Posted on 2013-06-28
34
801 Views
Last Modified: 2013-08-05
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
0
Comment
Question by:hefterr
  • 17
  • 15
  • 2
34 Comments
 
LVL 52

Expert Comment

by:_agx_
ID: 39285340
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
 
LVL 15

Expert Comment

by:myselfrandhawa
ID: 39285467
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
 
LVL 1

Author Comment

by:hefterr
ID: 39285544
@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
 
LVL 1

Author Comment

by:hefterr
ID: 39285552
@_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
 
LVL 15

Expert Comment

by:myselfrandhawa
ID: 39285562
0
 
LVL 52

Expert Comment

by:_agx_
ID: 39285803
> 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
 
LVL 52

Assisted Solution

by:_agx_
_agx_ earned 500 total points
ID: 39286029
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
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
ID: 39286044
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
 
LVL 1

Author Comment

by:hefterr
ID: 39286092
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
 
LVL 52

Expert Comment

by:_agx_
ID: 39286096
> 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
 
LVL 52

Expert Comment

by:_agx_
ID: 39286098
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
 
LVL 1

Author Comment

by:hefterr
ID: 39286613
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
 
LVL 1

Author Comment

by:hefterr
ID: 39286848
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
 
LVL 52

Expert Comment

by:_agx_
ID: 39287041
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
 
LVL 1

Author Comment

by:hefterr
ID: 39287097
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
 
LVL 1

Author Closing Comment

by:hefterr
ID: 39287100
Thanks again!
0
 
LVL 52

Expert Comment

by:_agx_
ID: 39287134
> 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 52

Expert Comment

by:_agx_
ID: 39287150
> 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
 
LVL 1

Author Comment

by:hefterr
ID: 39287155
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
 
LVL 52

Expert Comment

by:_agx_
ID: 39287162
(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
 
LVL 1

Author Comment

by:hefterr
ID: 39287283
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
 
LVL 52

Expert Comment

by:_agx_
ID: 39287644
>  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
 
LVL 1

Author Comment

by:hefterr
ID: 39288098
Enjoy Cape Code! (I'm very jealous :)

Don't be too jealous.  We're staying at my mother-in-laws!!
0
 
LVL 52

Expert Comment

by:_agx_
ID: 39288397
> We're staying at my mother-in-laws!!

Ouch!  I take it all back ;-)
0
 
LVL 1

Author Comment

by:hefterr
ID: 39290696
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
 
LVL 52

Expert Comment

by:_agx_
ID: 39290756
I'd have to double check it. I think I was just looking for absence of the bright blue color.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 39290851
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
 
LVL 1

Author Comment

by:hefterr
ID: 39291254
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
 
LVL 52

Expert Comment

by:_agx_
ID: 39291527
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
 
LVL 1

Author Comment

by:hefterr
ID: 39291621
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
 
LVL 52

Expert Comment

by:_agx_
ID: 39292136
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
 
LVL 1

Author Comment

by:hefterr
ID: 39297426
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
 
LVL 52

Expert Comment

by:_agx_
ID: 39297615
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
 
LVL 1

Author Comment

by:hefterr
ID: 39383056
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

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

PROBLEM:  How to open a cfwindow or run a function on double click of a cfgrid row. One of my clients wanted to be able to double click on a row item to get more detailed information about a transaction and to be able to modify the line items i…
This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now