Solved

Adjusting how a cell handles text in CFGrid

Posted on 2010-11-29
3
764 Views
Last Modified: 2012-05-10
I attached my CFGrid below.  What I want to know is.  Can you change a column to wrap text.

Right now my text in a colum looks like:
here is the examp.....

I would like it to look like:
here is the
example
<cfform name="CouponForm">
              <cfgrid format="html" name="parkGrid" pagesize="5" width="585" selectmode="row" bind="cfc:listCoups.getParks({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
                <cfgridcolumn name="Cid" header="id" display="no">
                <cfgridcolumn name="businessName" width="155" header="Business Name" href="detailcoupon.cfm" hrefkey="id"/>
                <cfgridcolumn name="cDescription" width="230" header="Coupon" />
                <cfgridcolumn name="city" width="80" header="City" />
                <cfgridcolumn name="NEWexpDate" width="120" header="Exp Date" />
              </cfgrid>
            </cfform>

Open in new window

0
Comment
Question by:sonicimpulse
  • 2
3 Comments
 

Accepted Solution

by:
sonicimpulse earned 0 total points
ID: 34235191
I found a solution for this so I figured I would share it with everybody.  In your .css file add the following.

.x-grid3-cell-inner, .x-grid3-hd-inner{
overflow:hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
padding:3px 3px 3px 5px;
white-space: normal;
}

Then do the following above your CFGrid
<div class="x-grid3-cell-inner">

Don't forget to Close the </div>

I attached my example below.


<div class="x-grid3-cell-inner">
			<cfform name="CouponForm">
              <cfgrid format="html" name="parkGrid" pagesize="5" width="585" selectmode="row" bind="cfc:listCoups.getParks({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
                <cfgridcolumn name="Cid" header="id" display="no">
                <cfgridcolumn name="businessName" width="155" header="Business Name" href="detailcoupon.cfm" hrefkey="id"/>
                <cfgridcolumn name="cDescription" width="230" header="Coupon" />
                <cfgridcolumn name="city" width="80" header="City" />
                <cfgridcolumn name="NEWexpDate" width="120" header="Exp Date" />
              </cfgrid>
            </cfform>
            </div>

Open in new window

0
 

Author Closing Comment

by:sonicimpulse
ID: 34235197
I searched everywhere for this.  I seen a lot of people asking on here with no help at all.  Here is the answer.
0
 
LVL 1

Expert Comment

by:medsoos
ID: 34235214
You can do it with CSS as shown here:

http://www.webtrenches.com/post.cfm/quick-and-easy-column-alignment-for-cfgrid

Put the style above your grid. Just add white-space: normal to the CSS to wrap.


<style type="text/css">
    .x-grid-col {text-align:right;}
    .x-grid-col-0 {text-align:right; white-space:normal;}
    .x-grid-col-1 {text-align:left; white-space:normal;}
    .x-grid-col-2 {text-align:left;}      
</style>
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
looping over JSON Object and insert into query 3 72
Can I have multiple sites sharing the same codebase? 10 71
Problem with data displaying 2 29
Fixing Old Legacy Code 1 45
Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
Sometimes databases have MILLIONS of records and we need a way to quickly query that table to return the results me need. Sure you could use CFQUERY but it takes too long when there are millions of records. That is why SOLR was invented. Please …
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

749 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