1. Requirements
2. Usage
3. Changes

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:

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: ~~~ [css] 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.