Sometimes text inside a gridview column is just too long. That's why I figured out a way to make the column smaller while still providing the information.

How about the example just below. Hover over the text to see what happens:

Create test acco...

Right: the full text appears when you hover over the text.

That's great for the backoffice grid views where you often show tons of information. If you want fancier effects, you can achieve them using bootstrap tooltips for instance in a similar way. The purpose of this article is to present a method to do this (which in itself already works!).

The method consists of: 1) Creating a new formatter method. 2) Refer to the formatter method in the CGridView column specification.

1) a) Create the formatter method:

class YFormatter extends CFormatter {
    /* @var int The text length limit for the ShortText formatter. */
    public $shortTextLimit= 20;
    /**
     *
     * Text formatter shortening long texts and displaying the full text
     * as the span title.
     *
     * To be used in GridViews for instance.
     * @param string $value
     * @return string  Encoded and possibly html formatted string ('span' if the text is long).
     */
    public function formatShortText($value) {
        if(strlen($value)>$this->shortTextLimit) {
            $retval=CHtml::tag('span',array('title'=>$value),CHtml::encode(mb_substr($value,0,$this->shortTextLimit-3,Yii::app()->charset).'...'));
        } else {
            $retval=CHtml::encode($value);
        }
        return $retval;
    }
}

1) b) Make sure that your formatter class is used by adjusting the project configuration: Specify the new formatter as class for the 'format' component in config.php:

'components'=>array(
        'format'=>array(
            'class'=>'YFormatter',
        ),
    ),

2) In the gridview, specify 'shortText' as the formatter (because we called our formatter method 'formatShortText'):

'columns'=>array(
	array('name'=>'description',
		  'type'=>'shortText'),
),

That's it. As you can imagine it is pretty easy to add other similar formatters.

Well, too bad that we can not set some parameters for the format from within the gridview setup, isn't it? Ok, I have a solution for it.

First we add an extra method to our implementation of the formatter which overrides the default one, we also update our shortText formatter, and we change our gridview setup.

class YFormatter extends CFormatter {
    [...]
    /**
     * Override the default format function to allow paramters to the formatter.
     *
     * (non-PHPdoc)
     * @see CFormatter::format()
     */
    public function format($value,$type)
    {
        $params=null;
        if(is_array($type)) {
            $params=$type;
            $type=$type['type'];
        }
        $method='format'.$type;
        if(method_exists($this,$method)) {
            if($params===null) {
                return $this->$method($value);
            } else {
                return $this->$method($value,$params);
            }
        } else {
            throw new CException(Yii::t('yii','Unknown type "{type}".',array('{type}'=>$type)));
        }
    }

    /** Added '$params' */
    public function formatShortText($value,$params=array()) {
        if(isset($params['length'])) {
            $len=$params['length'];
        } else {
            $len=$this->shortTextLimit;
        }
        if(strlen($value)>$len) {
            $retval=CHtml::tag('span',array('title'=>$value),CHtml::encode(mb_substr($value,0,$len-3,Yii::app()->charset).'...'));
        } else {
            $retval=CHtml::encode($value);
        }
        return $retval;
    }

And a slightly modified way to define this type in our column:

'columns'=>array(
	array('name'=>'description',
	      'type'=>array('type'=>'shortText','length'=>30,),
        ),

So now we can set the length of our field. You can do use the same method for setting paramters for a datetime formatter, ... .