Group Grid Demo #2

An example extending example # 1 with grouping by multiple columns (second and third columns) that are sorted. The third column has been setup as a sub group of second column (thereby rendering a nested grouping). Note that subGroupOf property is necessary within the child column for this to be meaningful and effective.

Tip

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)

Showing 1-20 of 77 items.

Grid Grouping Example 2

#	Supplier	Category	Product Name	Unit Price	Units In Stock	Amount In Stock
#						Amount In Stock
1	Exotic Liquids	Beverages	Chang	19.00	17	323.00
2	Exotic Liquids	Beverages	Chai	18.00	39	702.00
3	Exotic Liquids	Condiments	Aniseed Syrup	10.00	13	130.00
4	New Orleans Cajun Delights	Condiments	Chef Anton's Cajun Seasoning	22.00	53	1,166.00
5	New Orleans Cajun Delights	Condiments	Chef Anton's Gumbo Mix	21.35	0	0.00
6	New Orleans Cajun Delights	Condiments	Louisiana Fiery Hot Pepper Sauce	21.05	76	1,599.80
7	New Orleans Cajun Delights	Condiments	Louisiana Hot Spiced Okra	17.00	4	68.00
8	Grandma Kelly's Homestead	Condiments	Grandma's Boysenberry Spread	25.00	120	3,000.00
9	Grandma Kelly's Homestead	Condiments	Northwoods Cranberry Sauce	40.00	6	240.00
10	Grandma Kelly's Homestead	Produce	Uncle Bob's Organic Dried Pears	30.00	15	450.00
11	Tokyo Traders	Meat/Poultry	Mishi Kobe Niku	97.00	29	2,813.00
12	Tokyo Traders	Produce	Longlife Tofu	10.00	4	40.00
13	Tokyo Traders	Seafood	Ikura	31.00	31	961.00
14	Cooperativa de Quesos 'Las Cabras'	Dairy Products	Queso Cabrales	21.00	22	462.00
15	Cooperativa de Quesos 'Las Cabras'	Dairy Products	Queso Manchego La Pastora	38.00	86	3,268.00
16	Mayumi's	Condiments	Genen Shouyu	15.50	39	604.50
17	Mayumi's	Produce	Tofu	23.25	35	813.75
18	Mayumi's	Seafood	Konbu	6.00	24	144.00
19	Pavlova, Ltd.	Beverages	Outback Lager	15.00	15	225.00
20	Pavlova, Ltd.	Condiments	Vegie-spread	43.90	24	1,053.60
			Page Summary	26.20	652	18,063.65

Click to revealhide code

echo GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'showPageSummary' => true,
    'pjax' => true,
    'striped' => true,
    '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
        ],
        [
            '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
        ],
        [
            '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
        ],
    ],
]);

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.

Group Grid Demo #2

Tip

Grid Grouping Example 2

Example 2 Code

Comments & Discussion

Note