detailUrl
property). You can check the grid configuration code below the demo as well as click the
$colorPluginOptions = [ 'showPalette' => true, 'showPaletteOnly' => true, 'showSelectionPalette' => true, 'showAlpha' => false, 'allowEmpty' => false, 'preferredFormat' => 'name', 'palette' => [ [ "white", "black", "grey", "silver", "gold", "brown", ], [ "red", "orange", "yellow", "indigo", "maroon", "pink" ], [ "blue", "green", "violet", "cyan", "magenta", "purple", ], ] ]; $gridColumns = [ [ 'class'=>'kartik\grid\SerialColumn', 'contentOptions'=>['class'=>'kartik-sheet-style'], 'width'=>'36px', 'pageSummary'=>'Total', 'pageSummaryOptions' => ['colspan' => 6], 'header'=>'', 'headerOptions'=>['class'=>'kartik-sheet-style'] ], [ 'class' => 'kartik\grid\RadioColumn', 'width' => '36px', 'headerOptions' => ['class' => 'kartik-sheet-style'], ], [ 'class' => 'kartik\grid\ExpandRowColumn', 'width' => '50px', 'value' => function ($model, $key, $index, $column) { return GridView::ROW_COLLAPSED; }, // show row expanded for even numbered keys 'detailUrl' => Url::to(['/site/book-details']), 'value' => function ($model, $key, $index) { if ($key % 2 === 0) { return GridView::ROW_EXPANDED; } return GridView::ROW_COLLAPSED; }, 'headerOptions' => ['class' => 'kartik-sheet-style'] 'expandOneOnly' => true ], [ 'class' => 'kartik\grid\EditableColumn', 'attribute' => 'name', 'pageSummary' => 'Total', 'vAlign' => 'middle', 'width' => '210px', 'readonly' => function($model, $key, $index, $widget) { return (!$model->status); // do not allow editing of inactive records }, 'editableOptions' => function ($model, $key, $index) use ($colorPluginOptions) { return [ 'header' => 'Name', 'size' => 'md', 'afterInput' => function ($form, $widget) use ($model, $index, $colorPluginOptions) { return $form->field($model, "color")->widget(\kartik\color\ColorInput::classname(), [ 'showDefaultPalette' => false, 'options' => ['id' => "color-{$index}"], 'pluginOptions' => $colorPluginOptions, ]); } ]; } ], [ 'attribute' => 'color', 'value' => function ($model, $key, $index, $widget) { return "<span class='badge' style='background-color: {$model->color}'> </span> <code>" . $model->color . '</code>'; }, 'width' => '8%', 'filterType' => GridView::FILTER_COLOR, 'filterWidgetOptions' => [ 'showDefaultPalette' => false, 'pluginOptions' => $colorPluginOptions, ], 'vAlign' => 'middle', 'format' => 'raw', 'noWrap' => $this->noWrapColor ], [ 'attribute' => 'author_id', 'vAlign' => 'middle', 'width' => '180px', 'value' => function ($model, $key, $index, $widget) { return Html::a($model->author->name, '#', ['title' => 'View author detail', 'onclick' => 'alert("This will open the author page.\n\nDisabled for this demo!")']); }, 'filterType' => GridView::FILTER_SELECT2, 'filter' => ArrayHelper::map(Author::find()->orderBy('name')->asArray()->all(), 'id', 'name'), 'filterWidgetOptions' => [ 'pluginOptions' => ['allowClear' => true], ], 'filterInputOptions' => ['placeholder' => 'Any author', 'multiple' => true], // allows multiple authors to be chosen 'format' => 'raw' ], [ 'class' => 'kartik\grid\EditableColumn', 'attribute' => 'publish_date', 'hAlign' => 'center', 'vAlign' => 'middle', 'width' => '9%', 'format' => 'date', 'xlFormat' => "mmm\\-dd\\, \\-yyyy", 'headerOptions' => ['class' => 'kv-sticky-column'], 'contentOptions' => ['class' => 'kv-sticky-column'], 'readonly' => function($model, $key, $index, $widget) { return (!$model->status); // do not allow editing of inactive records }, 'editableOptions' => [ 'header' => 'Publish Date', 'size' => 'md', 'inputType' => \kartik\editable\Editable::INPUT_WIDGET, 'widgetClass' => 'kartik\datecontrol\DateControl', 'options' => [ 'type' => \kartik\datecontrol\DateControl::FORMAT_DATE, 'displayFormat' => 'dd.MM.yyyy', 'saveFormat' => 'php:Y-m-d', 'options' => [ 'pluginOptions' => [ 'autoclose' => true ] ] ] ], ], [ 'class' => 'kartik\grid\EditableColumn', 'attribute' => 'buy_amount', 'readonly' => function($model, $key, $index, $widget) { return (!$model->status); // do not allow editing of inactive records }, 'editableOptions' => [ 'header' => 'Buy Amount', 'inputType' => \kartik\editable\Editable::INPUT_SPIN, 'options' => [ 'pluginOptions' => ['min' => 0, 'max' => 5000] ] ], 'hAlign' => 'right', 'vAlign' => 'middle', 'width' => '7%', 'format' => ['decimal', 2], 'pageSummary' => true ], [ 'attribute' => 'sell_amount', 'vAlign' => 'middle', 'hAlign' => 'right', 'width' => '7%', 'format' => ['decimal', 2], 'pageSummary' => true ], [ 'class' => 'kartik\grid\FormulaColumn', 'header' => 'Buy + Sell<br>(BS)', 'vAlign' => 'middle', 'value' => function ($model, $key, $index, $widget) { $p = compact('model', 'key', 'index'); return $widget->col(7, $p) + $widget->col(8, $p); }, 'headerOptions' => ['class' => 'kartik-sheet-style'], 'hAlign' => 'right', 'width' => '7%', 'format' => ['decimal', 2], 'mergeHeader' => true, 'pageSummary' => true, 'footer' => true ], [ 'class' => 'kartik\grid\FormulaColumn', 'header' => 'Buy %<br>(100 * B/BS)', 'vAlign' => 'middle', 'hAlign' => 'right', 'width' => '7%', 'value' => function ($model, $key, $index, $widget) { $p = compact('model', 'key', 'index'); return $widget->col(9, $p) != 0 ? $widget->col(7, $p) * 100 / $widget->col(9, $p) : 0; }, 'format' => ['decimal', 2], 'headerOptions' => ['class' => 'kartik-sheet-style'], 'mergeHeader' => true, 'pageSummary' => true, 'pageSummaryFunc' => GridView::F_AVG, 'footer' => true ], [ 'class' => 'kartik\grid\BooleanColumn', 'attribute' => 'status', 'vAlign' => 'middle' ], [ 'class' => 'kartik\grid\ActionColumn', 'dropdown' => $this->dropdown, 'dropdownOptions' => ['class' => 'float-right'], 'urlCreator' => function($action, $model, $key, $index) { return '#'; }, 'viewOptions' => ['title' => 'This will launch the book details page. Disabled for this demo!', 'data-toggle' => 'tooltip'], 'updateOptions' => ['title' => 'This will launch the book update page. Disabled for this demo!', 'data-toggle' => 'tooltip'], 'deleteOptions' => ['title' => 'This will launch the book delete action. Disabled for this demo!', 'data-toggle' => 'tooltip'], 'headerOptions' => ['class' => 'kartik-sheet-style'], ], [ 'class' => 'kartik\grid\CheckboxColumn', 'headerOptions' => ['class' => 'kartik-sheet-style'], 'pageSummary' => '<small>(amounts in $)</small>', 'pageSummaryOptions' => ['colspan' => 3, 'data-colspan-dir' => 'rtl'] ], ];
$gridColumns
configuration code. You can configure the appearance and behavior of the widget. View this complete web tip on how to setup your model, controller, and view with GridView Editable columns to manipulate records.
For grid grouping demos click here — For advanced ExpandRowColumn usage demo click here
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)
Name | Color | Author | Buy Amount ($) | Sell Amount ($) | Buy + Sell (BS) | Buy % (100 * B/BS) | Status | Actions | ||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
| Select allUnselect all | |||||||||||
11 | |
Edit Name
| purple | J. R. R. Tolkien |
Edit Buy Amount
| 158.50 | 267.50 | 59.25 | Active | |||
12 | |
Edit Name
| yellow | Gabriel García Márquez |
Edit Buy Amount
| 195.50 | 360.50 | 54.23 | Active | |||
13 | |
Edit Name
| blue | Aldous Huxley |
Edit Buy Amount
| 175.50 | 290.50 | 60.41 | Active | |||
14 | |
Edit Name
| pink | Virginia Woolf |
Edit Buy Amount
| 145.50 | 250.50 | 58.08 | Active | |||
15 | |
Edit Name
| cyan | Ralph Ellison |
Edit Buy Amount
| 165.50 | 270.50 | 61.18 | Active | |||
16 | |
Edit Name
| brown | Margaret Mitchell |
Edit Buy Amount
| 185.50 | 308.50 | 60.13 | Active | |||
17 | |
Edit Name
| black | Charlotte Brontë |
Edit Buy Amount
| 195.50 | 335.50 | 58.27 | Active | |||
18 | | On the Road | orange | Jack Kerouac | 150.00 | 184.99 | 334.99 | 55.22 | Inactive | |||
19 | |
Edit Name
| green | Jane Austen |
Edit Buy Amount
| 195.50 | 321.50 | 60.81 | Active | |||
20 | |
Edit Name
| red | William Golding |
Edit Buy Amount
| 188.50 | 357.50 | 52.73 | Active | |||
Total | 1,307.00 | 1,790.49 | 3,097.49 | 58.03 | (amounts in $) |
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.