[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Adjusting how a cell handles text in CFGrid

Posted on 2010-11-29
3
Medium Priority
?
804 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

This article  is about submitting  form through  ColdFusion.Ajax.submitForm to the action page and send a response back in JSON format which later can be decoded using ColdFusion.JSON.decode. By this way you can avoid the usual page refresh for subm…
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…
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…
Are you ready to place your question in front of subject-matter experts for more timely responses? With the release of Priority Question, Premium Members, Team Accounts and Qualified Experts can now identify the emergent level of their issue, signal…
Suggested Courses

873 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