An example combining example # 3 (grouped row header) with example # 4 (group footer). Note that you must carefully set mergeColumns setting in groupFooter or groupHeader for such a scenario (or skip this setting if not needed). In this case when you set groupedRow to true, a complete grid column will be removed and displayed as a group row. Hence the column indices in the group columns MUST NOT start with the removed column. If you are not clear, you may skip setting mergeColumns to ensure the markup is not broken, and work out from there which columns can be merged.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
echo GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'showPageSummary' => true,
'pjax' => true,
'striped' => false,
'hover' => true,
'panel' => ['type' => 'primary', 'heading' => 'Grid Grouping Example'],
'toggleDataContainer' => ['class' => 'btn-group mr-2 me-2'],
'columns' => [
['class' => 'kartik\grid\SerialColumn'],
[
'attribute' => 'supplier_id',
'width' => '310px',
'value' => function ($model, $key, $index, $widget) {
return $model->supplier->company_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Suppliers::find()->orderBy('company_name')->asArray()->all(), 'id', 'company_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any supplier'],
'group' => true, // enable grouping,
'groupedRow' => true, // move grouped column to a single grouped row
'groupOddCssClass' => 'kv-grouped-row', // configure odd group cell css class
'groupEvenCssClass' => 'kv-grouped-row', // configure even group cell css class
'groupFooter' => function ($model, $key, $index, $widget) { // Closure method
return [
'mergeColumns' => [[0,2]], // columns to merge in summary
'content' => [ // content to show in each summary cell
0 => 'Summary (' . $model->supplier->company_name . ')',
4 => GridView::F_AVG,
5 => GridView::F_SUM,
6 => GridView::F_SUM,
],
'contentFormats' => [ // content reformatting for each summary cell
4 => ['format' => 'number', 'decimals' => 2],
5 => ['format' => 'number', 'decimals' => 0],
6 => ['format' => 'number', 'decimals' => 2],
],
'contentOptions' => [ // content html attributes for each summary cell
0 => ['style' => 'font-variant:small-caps'],
4 => ['style' => 'text-align:right'],
5 => ['style' => 'text-align:right'],
6 => ['style' => 'text-align:right'],
],
// html attributes for group summary row
'options' => ['class' => 'info table-info','style' => 'font-weight:bold;']
];
}
],
[
'attribute' => 'category_id',
'width' => '250px',
'value' => function ($model, $key, $index, $widget) {
return $model->category->category_name;
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => ArrayHelper::map(Categories::find()->orderBy('category_name')->asArray()->all(), 'id', 'category_name'),
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Any category'],
'group' => true, // enable grouping
'subGroupOf' => 1 // supplier column index is the parent group,
'groupFooter' => function ($model, $key, $index, $widget) { // Closure method
return [
'mergeColumns' => [[2, 3]], // columns to merge in summary
'content' => [ // content to show in each summary cell
2 => 'Summary (' . $model->category->category_name . ')',
4 => GridView::F_AVG,
5 => GridView::F_SUM,
6 => GridView::F_SUM,
],
'contentFormats' => [ // content reformatting for each summary cell
4 => ['format' => 'number', 'decimals' => 2],
5 => ['format' => 'number', 'decimals' => 0],
6 => ['format' => 'number', 'decimals' => 2],
],
'contentOptions' => [ // content html attributes for each summary cell
4 => ['style' => 'text-align:right'],
5 => ['style' => 'text-align:right'],
6 => ['style' => 'text-align:right'],
],
// html attributes for group summary row
'options' => ['class' => 'success table-success','style' => 'font-weight:bold;']
];
},
],
[
'attribute' => 'product_name',
'pageSummary' => 'Page Summary',
'pageSummaryOptions' => ['class' => 'text-right text-end'],
],
[
'attribute' => 'unit_price',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true,
'pageSummaryFunc' => GridView::F_AVG
],
[
'attribute' => 'units_in_stock',
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 0],
'pageSummary' => true
],
[
'class' => 'kartik\grid\FormulaColumn',
'header' => 'Amount In Stock',
'value' => function ($model, $key, $index, $widget) {
$p = compact('model', 'key', 'index');
return $widget->col(4, $p) * $widget->col(5, $p);
},
'mergeHeader' => true,
'width' => '150px',
'hAlign' => 'right',
'format' => ['decimal', 2],
'pageSummary' => true
],
],
]);
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.