Solved

Adjusting how a cell handles text in CFGrid

Posted on 2010-11-29
3
733 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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
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 …
This video discusses moving either the default database or any database to a new volume.
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

744 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

8 Experts available now in Live!

Get 1:1 Help Now