hi
how can show an image and a text both inside of a gridview column, not in separate columns?
thanks
hi
how can show an image and a text both inside of a gridview column, not in separate columns?
thanks
Build it as raw (or HTML) output:
'columns'=>array(
array(
'type'=>'raw',
'header'=>'Some Header',
'value'=>function($data){
return CHtml::image(/* ... */)
. ' some text';
},
)
),
I created my own custom column and its used like this:
I knocked this up quickly yesterday so have not looked and other variations once I had set it to work the way I wanted it to.
It creates a one row, 2 cell table in your gridview cell. The column will reset the padding in the cell to zero so you can apply the padding you need.
array(
'class'=>'PicAndTextColumn',
'header'=>'Team Name',
'name'=>'teamname',
'height'=>'25px', // height of the pic, resizes in correct dimensions
'picIcon'=>'$data["icon"]', // image to display in the cell
'picSource'=>'$data["pic"]', // if the image related to the icon is a different file, specify here
'picPadding'=>'1px 10px 1px 0px',
'picSide'=>'left' // show the column with pic on left or right side of text
'picClass'=>'teampic', // assign your own class so you can use jquery to detect clicks on the image
'textType'=>'link', // text in the neighboring cell can be text or a link
'textUrl'=>$teamurl, // url if the textType is 'link'
'textClass'=>'al', // any classes to assign to the text part of the column
'htmlOptions'=>array('class'=>'al w250'),
'headerHtmlOptions'=>array('class'=>'al w250'),
)
Here is the class, save into a file called PicAndTextColumn and place in a folder that autoloads
Enjoy!
<?php
/**
* DataColumn class file.
* Extends {@link CDataColumn}
*/
class PicAndTextColumn extends CDataColumn
{
/**
* @var boolean whether the htmlOptions values should be evaluated.
*/
public $evaluateHtmlOptions = false;
public $height = '30px';
public $picSide = 'left';
public $picPadding;
public $picIcon = null;
public $picSource = '';
public $picClass = '';
public $textType = 'text';
public $textUrl;
public $textClass;
/**
* Renders a data cell.
* @param integer $row the row number (zero-based)
* Overrides the method 'renderDataCell()' of the abstract class CGridColumn
*/
public function renderDataCell($row)
{
$data=$this->grid->dataProvider->data[$row];
$options = [];
if($this->evaluateHtmlOptions) {
foreach($this->htmlOptions as $key=>$value) {
$options[$key] = $this->evaluateExpression($value,array('row'=>$row,'data'=>$data));
}
}
else {
$options=$this->htmlOptions;
}
$textName = $data[$this->name];
$picIcon = $this->evaluateExpression((is_null($this->picIcon) ? $this->picSource : $this->picIcon), array('row'=>$row,'data'=>$data));
$picSrc = $this->evaluateExpression($this->picSource, array('row'=>$row,'data'=>$data));
$textlink = $this->evaluateExpression($this->textUrl, array('row'=>$row,'data'=>$data));
$picCell = CHtml::openTag('td', array('style'=>'width:2%;padding:'.$this->picPadding.' !important', 'text-align'=>'center', 'class'=>'patc-picname')).
CHtml::image($picIcon, $data[$this->name], array('height'=>$this->height, 'class'=>$this->picClass, 'data-image'=>$picSrc)).'</td>';
$textCell = CHtml::openTag('td', array('class'=>'patc-textname')).($this->textType == 'text' ?
$textName :
CHtml::link($textName, $textlink, array('class'=>$this->textClass)).'</td>');
echo CHtml::openTag('td', array('style'=>'margin:0;padding:0;', 'class'=>'picandtext', 'data-textname'=>$data[$this->name],'data-col'=>$this->header));
echo CHtml::openTag('table', array('style'=>'margin:0;padding:0;'));
echo CHtml::openTag('tr');
if($this->picSide == 'left') {
echo $picCell.$textCell;
}
else {
echo $textCell.$picCell;
}
echo '</tr>';
echo '</table>';
echo '</td>';
}
}