Yep, we have finally ported the extended grid view from a previous library we collaborated with :). The difference is that it also encapsulates the required libraries in its own assets folder and we removed some of the widgets we thought it was just... not good looking to tell you the truth.

Nevertheless, do not worry too much. With WhGridView you will be able to do most of the stuff other extended gridviews do. By the way, if you wish to extend the grid, we propose you to do it through behaviors. This way, we will keep the class code cleaner and easier to read.

Fixed Headers and Responsive Table

Special thanks to StickyTableHeaders for its great plugin so we can have sticky headers on our grids.

Also, by setting responsiveTable property to true, the grid will be automatically resized to suit mobile size.

<?php $this->widget('yiiwheels.widgets.grid.WhGridView', array(
    'fixedHeader' => true,
    'headerOffset' => 40,
    'type' => 'striped',
    'dataProvider' => Person::getGridDataProvider(),
    'responsiveTable' => true,
    'template' => "{items}",
    'columns' => Person::getGridColumns(),
)); ?>

Fixed header with Filters

$this->widget('yiiwheels.widgets.grid.WhGridView', array(
    'filter'=>$person,
    'fixedHeader' => true,
    'headerOffset' => 40, // 40px is the height of the main navigation at bootstrap
    'type'=>'striped bordered',
    'dataProvider' => $gridDataProvider,
    'template' => "{items}",
    'columns' => $gridColumns,
));

Extended Summaries

We ported all the summaries from the old library. We still think they are great and cool way to display extra grid information.

Examples

Sum Operation WhSumOperation

$this->widget('yiiwheels.widgets.grid.WhGridView', array(
    'filter'=>$person,
    'type'=>'striped bordered',
    'dataProvider' => $gridDataProvider,
    'template' => "{items}\n{extendedSummary}",
    'columns' => $gridColumns,
    'extendedSummary' => array(
    'title' => 'Total Employee Hours',
    'columns' => array(
    'hours' => array(
        'label'=>'Total Hours',
        'class'=>'yiiwheels.widgets.grid.operations.WhSumOperation'
    ),
    'extendedSummaryOptions' => array(
        'class' => 'well pull-right',
        'style' => 'width:300px'
    ),
));

Count of types operation WhCountOfTypeOperation

$this->widget('yiiwheels.widgets.grid.WhGridView', array(
    'filter'=>null,
    'type'=>'striped bordered',
    'dataProvider' => Person::getGridDataProvider(),
    'template' => "{items}\n{extendedSummary}",
    'columns' => Person::getGridColumns(),
    'extendedSummary' => array(
        'title' => 'Expertise',
        'columns' => array(
            'language' => array(
                'label'=>'Total Expertise',
                'types' => array(
                    'CSS'=>array('label'=>'Css'),
                    'JavaScript'=>array('label'=>'Js'),
                    'HTML'=>array('label'=>'html')
                ),
                'class'=>'yiiwheels.widgets.grid.operations.WhCountOfTypeOperation'
            )
        )
    ),
    'extendedSummaryOptions' => array(
        'class' => 'well pull-right',
        'style' => 'width:300px'
    ),
));

Percent of type operation WhPercentOfTypeOperation

$this->widget('yiiwheels.widgets.grid.WhGridView', array(
    'type'=>'striped bordered',
    'dataProvider' => $gridDataProvider,
    'template' => "{items}\n{extendedSummary}",
    'columns' => $gridColumns,
    'extendedSummary' => array(
        'title' => 'Expertise',
        'columns' => array(
            'language' => array(
                'label'=>'Total Expertise',
                'types' => array(
                    'CSS'=>array('label'=>'Css'),
                    'JavaScript'=>array('label'=>'Js'),
                    'HTML'=>array('label'=>'html')
                ),
                'class'=>'yiiwheels.widgets.grid.operations.WhPercentOfTypeOperation'
            )
        )
    ),
    'extendedSummaryOptions' => array(
        'class' => 'well pull-right',
        'style' => 'width:400px'
    ),
));

Percent of type EasyPie operation WhPercentOfTypeEasyPieOperation

$this->widget('yiiwheels.widgets.grid.WhGridView', array(
    'type'=>'striped bordered',
    'dataProvider' => Person::getGridDataProvider(),
    'template' => "{items}\n{extendedSummary}",
    'columns' => Person::getGridColumns(),
    'extendedSummary' => array(
        'title' => 'Expertise',
        'columns' => array(
            'language' => array(
                'label'=>'Total Expertise',
                'types' => array(
                    'CSS'=>array('label'=>'Css'),
                    'JavaScript'=>array('label'=>'Js'),
                    'HTML'=>array('label'=>'html')
                ),
                'class'=>'yiiwheels.widgets.grid.operations.WhPercentOfTypeEasyPieOperation',
                // you can also configure how the chart looks like
                'chartOptions' => array(
                'barColor' => '#333',
                'trackColor' => '#999',
                'lineWidth' => 8 ,
                'lineCap' => 'square'
                )
            )
        )
    ),
    'extendedSummaryOptions' => array(
        'class' => 'well pull-right',
        'style' => 'width:350px'
    ),
))

Percent of type google pie operation WhPercentOfTypeGooglePieOperation

$this->widget('yiiwheels.widgets.grid.WhGridView', array(
    'type'=>'striped bordered',
    'dataProvider' =>  Person::getGridDataProvider(),
    'template' => "{items}\n{extendedSummary}",
    'columns' => Person::getGridColumns(),
    'extendedSummary' => array(
        'title' => 'Expertise',
        'columns' => array(
            'language' => array(
                'label'=>'Total Expertise',
                'types' => array(
                    'CSS'=>array('label'=>'Css'),
                    'JavaScript'=>array('label'=>'Js'),
                    'HTML'=>array('label'=>'html')
                ),
                'class'=>'yiiwheels.widgets.grid.operations.WhPercentOfTypeGooglePieOperation',
            )
        )
    ),
    'extendedSummaryOptions' => array(
        'class' => 'well pull-right',
        'style' => 'width:300px'
    ),
))

The Grid/Chart switcher WhChart Behavior

There will be times, where you wish to see a bit more details on a graphic than just those values on a pie chart. WhGridView aims to provide an easy to configure chart display, where the data is automatically extracted from its dataProvider.

The way it works, is that you set a couple of configuration options of the chartOptions property and thats it. The grid will automatically display a chart by making use of the great Higcharts JS library by using WhHighCharts. We highly recommend you to get familiar with this library if you are going to make use of this feature.

The chartOptions property is a configurable chart array with three elements:

• data, which will contain the series attribute of Highcharts JS
• config, will hold the rest of the chart configuration options
• htmlOptions, the HTML tag attributes of the chart container.

Important: Highcharts JS is not open source for commercial products. Maybe you create a new behavior that makes use of another chart library? :)

Example

$this->widget('yiiwheels.widgets.grid.WhGridView', array(
    'type'=>'striped bordered',
    'dataProvider' => Person::getGridDataProvider(),
    'template' => "{items}\n{extendedSummary}",
    'columns' => Person::getGridColumns(),
    'chartOptions' => array(
        'data' => array(
            'series' => array(
                array(
                    'name' => 'Hours worked',
                    'attribute' => 'hours'
                )
            )
        ),
        'config' => array(
            'chart'=>array(
                'width'=>800
            )
        )
    ),
));

Group Grid View WhGroupGridView.php

We also included Vitaliy Potapov's BootGroupView, BootGroupView grid, to provide our library with a grid that features row and cell merging and/or grouping.

It is not the original but a modified version.

Examples

$this->widget('yiiwheels.widgets.grid.WhGroupGridView', array(
    'type' => 'striped bordered',
    'dataProvider' => Person::getGridDataProvider(),
    'template' => "{items}",
    'columns' => Person::getGridColumns(),
    'mergeColumns' => array('language')
));

$this->widget('yiiwheels.widgets.grid.WhGroupGridView', array(
    'type' => 'striped bordered',
    'dataProvider' => Person::getGridDataProvider(),
    'template' => "{items}",
    'columns' => Person::getGridColumns(),
    'mergeColumns' => array('language', 'hours')
));

<?php
$groupGridColumns = Person::getGridColumns();
$groupGridColumns[] = array(
    'name' => 'firstLetter',
    'value' => 'substr($data->firstName, 0, 1)',
    'headerHtmlOptions' => array('style' => 'display:none'),
    'htmlOptions' => array('style' => 'display:none')
);

$this->widget('yiiwheels.widgets.grid.WhGroupGridView', array(
    'type' => 'striped bordered',
    'dataProvider' => Person::getGridDataProvider(),
    'template' => "{items}",
    'extraRowColumns' => array('firstLetter'),
    'extraRowExpression' =>
        '"<b style="font-size: 3em; color: #333;">".substr($data->firstName, 0, 1)."</b>"',
    'extraRowHtmlOptions' => array('style' => 'padding:10px'),
    'columns' => $groupGridColumns
)); ?>

<?php
$groupGridColumns = Person::getGridColumns();
$groupGridColumns[] = array(
    'name' => 'firstLetter',
    'value' => 'substr($data->firstName, 0, 1)',
    'headerHtmlOptions' => array('style' => 'display:none'),
    'htmlOptions' => array('style' => 'display:none')
);

$this->widget('yiiwheels.widgets.grid.WhGroupGridView', array(
    'type' => 'striped bordered',
    'dataProvider' => Person::getGridDataProvider(),
    'template' => "{items}",
    'extraRowColumns' => array('firstLetter'),
    'extraRowExpression' =>
    '"<b style="font-size: 3em; color: #333;">".substr($data->firstName, 0, 1)."</b>"',
    'extraRowHtmlOptions' => array('style' => 'padding:10px'),
    'columns' => $groupGridColumns,
    'mergeColumns' => array('hours')
)); ?>

<?php
$this->widget(
    'yiiwheels.widgets.detail.WhDetailView',
    array(
        'data' => array(
            'id' => 1,
            'firstName' => 'Mark',
            'lastName' => 'Otto',
            'language' => 'CSS'
        ),
        'attributes' => array(
            array('name' => 'firstName', 'label' => 'First name'),
            array('name' => 'lastName', 'label' => 'Last name'),
            array('name' => 'language', 'label' => 'Language'),
        ),
    ));
?>

Display an image on your grid. In order to display an image related to the data provider of the grid, you set its imagePathExpression. The expression string will have the following variables passed to it: $row (the row number), $data (the data module of the row) and $this (the column object).

	#	First name	Last name	Language	Hours worked	Edit
	1	Mark	Otto	CSS	10
	2	Jacob	Thornton	JavaScript	20
	3	Stu	Dent	HTML	15
	4	Sunny	Man	HTML	15

1234

$this->widget('yiiwheels.widgets.grid.WhGridView', array(
    'type'=>'striped bordered',
    'dataProvider' => Person::getGridDataProvider(),
    'template' => "{items}",
    'columns' => array_merge(
    array(
        array(
        'class' => 'yiiwheels.widgets.grid.WhImageColumn',
        'htmlOptions' => array('class' => 'span1'))
    ), Person::getGridColumns()),
));

Display relational data or extra info from an ajax call into a dynamically created sub-row. This column is thought in order to display sub-grids or a more extended information about a model. The TbPickerColumn has a similar behavior but the amount of information that we can display is a less that with TbRelationalColumn.

Important: Do not use this type of column to display a link. It is recommended to work with css classes instead to change the style of its contents.

<?php
Yii::app()->getComponent('yiiwheels')->registerAssetJs('bootbox.min.js');
$this->widget('yiiwheels.widgets.grid.WhGridView', array(
    'type' => 'striped bordered',
    'dataProvider' => Person::getGridDataProvider(),
    'template' => "{items}",
    'columns' => array_merge(array(
        array(
        'class' => 'yiiwheels.widgets.grid.WhRelationalColumn',
        'name' => 'subGrid',
        'url' => $this->createUrl('site/relational'),
        'value' => '"test-subgrid"',
        'afterAjaxUpdate' => 'js:function(tr,rowid,data){
            bootbox.alert("I have afterAjax events too!<br/>This will only happen once for row with id: "+rowid);
        }'
        )
    ), Person::getGridColumns()),
)); ?>
        

Allows to modify the value of column on the fly. This type of column is good when you wish to modify the value of a displayed model that has two states: yes-no, true-false, 1-0, etc...

The widget works in conjunction with an action that will receive the id and the attribute parameters. YiiWheels comes with an action ready to use for that purpose: WhToggleAction (check on yiiwheels.widgets.grid.actions.WhToggleAction).

Heads up! the following example is not updating the status because we are not using a CActiveRecord (not yet) just shows how nicely it renders.

// On the controller
public function actions()
{
    return array(
        'toggle' => array(
            'class'=>'yiiwheels.widgets.toggle.WhToggleAction',
            'modelName' => 'Person',
        )
    );
}
// -----------
// On the grid:
$this->widget('bootstrap.widgets.TbGridView', array(
    'type' => 'striped bordered',
    'dataProvider' => Person::getGridDataProvider(),
    'template' => "{items}",
    'columns' => array(
        array('name' => 'firstName', 'header' => 'First Name'),
        array('name' => 'lastName', 'header' => 'Last Name'),
        array(
            'class'=>'yiiwheels.widgets.toggle.WhToggleColumn',
            'toggleAction'=>'site/toggle', // contoller/action
            'name' => 'status',
            'header' => 'Toggle'
        ),
    )
));