Yii 1.1: detailview4col

A Variation of CDetailView, displaying data in 4 columns.
14 followers

This widget is a variation of the CDetailView widget of Yii. It has basically the same code with a few additions/variations to it.

DetailView4Col displays the details of a model in a 4-column table, two model attribues per row by default.
Model attributes that are explicitly specified as 'one-row' attributes will be displayed in one single row where the label spans one, and the value spans 3 columns.
It is also possible to specify one or more 'header' rows, which span 4 columns and may contain a header/description for the immediate rows underneath.

Requirements

This widget was tested with Yii 1.1.9 but should also work with older versions.


Usage


The Look

A sample DetailView4Col table may look like this:
Sample DetailView4Col Table


The Code

After you download and unzip the extension file into the protected/extensions/widgets/ folder of your application, the following code in your view file would generate the table in the image above (note that in this example the model has a relation named 'parent'):

$this->widget('ext.widgets.DetailView4Col', array(
    'data'=>$model,
    'attributes'=>array(
        array(
            'header'=>'Personal Data',
        ),
        'id', 'gender',
        'first_name', 'insurance_number',
        'last_name', 'birth_date',
        'phone_number', 'birth_place',
        array(
            'name'=>'address',
            'oneRow'=>true,
            'type'=>'raw',
            'value'=>$model->address.', '.$model->postal_code.' '.$model->city,
        ),
        array(
            'header'=>'Emergency Information',
        ),
        'emergency_contact', 'medication',
        'emergency_phone',
        array(
            'name'=>'emergency_note',
            'oneRow'=>true,
        ),
        array(
            'header'=>'Parents Data',
        ),
        'parent.name', 'parent.phone_num',
        'parent.relation', 'parent.email',
    )
));

If an attribute is specified as a string without further options (e.g. 'first_name'), it will be displayed in two colums total and will take up half of the table.

As in CDetailView, you can specify an attribute in terms of an array using the elements available for CDetailView, keeping the following changes in mind:

  • oneRow: (new) whether the attribute should span all four columns of the table. It is false by default. If set to true, the label of the attribute will be rendered in a cell that spans one column, and the value of the attribute will be rendered in a cell that spans across the remaining three columns.
  • cssClass: the specified class will be used for the 'tr' tag of the attributes template. If the attribute is rendered on the right side of the table, its template will have no 'tr' tag since it's on the row that was 'opened' by the previous attribute, thus this element will have no effect.

NOTE: The property 'itemTemplate' is not avaliable in this widget. The attributes are always rendered as table rows. Internally, the widget uses four templates: itemTemplateLeft, itemTemplateRight, itemTemplateOneRow and itemTemplateHeader. Feel free to tweak the code to your needs.

NOTE: If you have an odd number of default attributes, (e.g. 'emergency_contact', 'medication' and 'emergency_phone' in the above example), followed by a 'oneRow' attribute (e.g. 'emergency_note'), the widget automatically generates two empty cells to 'close the last open row', before rendering the oneRow attribute.


The Style

To make your table look similar to the one in the image, you could use the following css-code:

table.detail-view { border:1px solid #fff !important; }
table.detail-view tbody tr:nth-child(even) { background:#E5F1F4; border-color:#fff; }
table.detail-view tbody tr:nth-child(odd) { background:#F8F8F8;  border-color:#fff; }
table.detail-view tbody td { border-color:#fff; min-width:25%; }
table.detail-view tbody tr.header { background:#95C8D5; }
table.detail-view tbody tr.header th { text-align:left; min-width:20%; }

Changes

  • Aug 29, 2012 (v1.1)
    • Fixed Bug: The property'itemCssClass', which defaults to array('odd', 'even'), was not working properly. Fixed it so that the arrays elements are now assigned to the rows sequentially and repeatedly in a correct way.
    • Fixed Bug: Now you can use the element 'cssClass' the same way as in CDetailView for every single attribute. See also the related note above.

That's it. Hope you find it useful. If you find bugs or have suggestions for improvements, please let me know.

Total 4 comments

#13063 report it
c@cba at 2013/05/01 03:20am
Re: Ternary Condition

I'm not sure I understand your question correctly, but maybe this is the answer: The following line prints "--" into the cell if attribute "address" is empty, and the address itself otherwise.

'value' => empty($model->address) ? '--' : $model->address
#13019 report it
Ravi P Thanki at 2013/04/29 01:55am
Ternary Condition in detailview4col

How can i used ternary condition on particular attribute in detailview4col.

#9612 report it
Peter JK at 2012/08/28 09:37pm
same as xdetailview extension except header

wow nice extension.. look like same as xdetailview extension except it has header and no need to combine 2 or more widgets when it have different section..

its a good extension anyway, thank you for hardwork...

maybe you could add another option to make 6 columns or more a s xdetailview have it...

#9605 report it
lightglitch at 2012/08/28 12:40pm
NIce

Looks nice but you could improve it by adding the number of columns as a parameter.

Leave a comment

Please to leave your comment.

Create extension