Fork me on GitHub

Widgets

Grids, Grid Columns, Views, Helpers

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.

#First nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
<?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

#First nameLast nameLanguageHours workedEdit
 
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
$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.

Name Description
WhSumOperation Will display the sum of an specific column
WhCountOfTypeOperation Displays the number of times a type of value appears in the specified column cell (ie. total of zeros, total of ones).
WhPercentOfTypeOperation Displays the percent number of times a type of value appears in the specified column cell (ie. percent of zeros, percent of ones)
WhPercentOfTypeEasyPieOperation Displays the percent number of times a type of value appears in the specified column cell on pie charts. The handling of its display is taken care by the nice jquery plugin easy-pie-chart.
WhPercentOfTypeGooglePieOperation Well, you guessed right. It is the same operation as TbPercentOfTypeEasyPieOperation but with the difference that this pie is more powerful as it can render a single pie to display the summary results.
Important! when using charts you may need to check browser compatibility. As you know, most of these plugins do use canvas for their rendering.

Examples

Sum Operation WhSumOperation

#First nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
$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

#First nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
$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

#First nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
$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

#First nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
$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

#First nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
$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! the style and data-config attributes of the container will be overrided, as they are required for the correct functionality of the chart.

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

Example

#First nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
$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

Merge in one column
#First nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyMan15
$this->widget('yiiwheels.widgets.grid.WhGroupGridView', array(
    'type' => 'striped bordered',
    'dataProvider' => Person::getGridDataProvider(),
    'template' => "{items}",
    'columns' => Person::getGridColumns(),
    'mergeColumns' => array('language')
));
Merge in two columns
#First nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyMan
$this->widget('yiiwheels.widgets.grid.WhGroupGridView', array(
    'type' => 'striped bordered',
    'dataProvider' => Person::getGridDataProvider(),
    'template' => "{items}",
    'columns' => Person::getGridColumns(),
    'mergeColumns' => array('language', 'hours')
));
Extra Row
#First nameLast nameLanguageHours workedEdit
M
1MarkOttoCSS10 M
J
2JacobThorntonJavaScript20 J
S
3StuDentHTML15 S
4SunnyManHTML15 S
<?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
)); ?>
Extra Row + Merge
#First nameLast nameLanguageHours workedEdit
M
1MarkOttoCSS10 M
J
2JacobThorntonJavaScript20 J
S
3StuDentHTML15 S
4SunnyManHTML S
<?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')
)); ?>

First nameMark
Last nameOtto
LanguageCSS
<?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 nameLast nameLanguageHours workedEdit
1MarkOttoCSS10
2JacobThorntonJavaScript20
3StuDentHTML15
4SunnyManHTML15
$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.

subGrid#First nameLast nameLanguageHours workedEdit
test-subgrid1MarkOttoCSS10
test-subgrid2JacobThorntonJavaScript20
test-subgrid3StuDentHTML15
test-subgrid4SunnyManHTML15
<?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.

First NameLast NameToggle
MarkOtto
JacobThornton
StuDent
SunnyMan
// 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'
        ),
    )
));
        
comments powered by Disqus