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; }, // uncomment below and comment detail if you need to render via ajax // 'detailUrl' => Url::to(['/site/book-details']), 'detail' => function ($model, $key, $index, $column) { return Yii::$app->controller->renderPartial('_expand-row-details', ['model' => $model]); }, '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 | Book Details The Lord of the RingsPublished: 2007-09-08
|
Edit Name
| purple | J. R. R. Tolkien |
Edit Buy Amount
| 158.50 | 267.50 | 59.25 | Active | |||||||||||||||||||||||||||||||||||||||
12 | Book Details One Hundred Years of SolitudePublished: 2004-05-09
|
Edit Name
| yellow | Gabriel García Márquez |
Edit Buy Amount
| 195.50 | 360.50 | 54.23 | Active | |||||||||||||||||||||||||||||||||||||||
13 | Book Details Brave New WorldPublished: 2011-08-21
|
Edit Name
| blue | Aldous Huxley |
Edit Buy Amount
| 175.50 | 290.50 | 60.41 | Active | |||||||||||||||||||||||||||||||||||||||
14 | Book Details To the LighthousePublished: 2004-05-09
|
Edit Name
| pink | Virginia Woolf |
Edit Buy Amount
| 145.50 | 250.50 | 58.08 | Active | |||||||||||||||||||||||||||||||||||||||
15 | Book Details Invisible ManPublished: 2011-08-21
|
Edit Name
| cyan | Ralph Ellison |
Edit Buy Amount
| 165.50 | 270.50 | 61.18 | Active | |||||||||||||||||||||||||||||||||||||||
16 | Book Details Gone with the WindPublished: 2011-08-21
|
Edit Name
| brown | Margaret Mitchell |
Edit Buy Amount
| 185.50 | 308.50 | 60.13 | Active | |||||||||||||||||||||||||||||||||||||||
17 | Book Details Jane EyrePublished: 2006-10-17
|
Edit Name
| black | Charlotte Brontë |
Edit Buy Amount
| 195.50 | 335.50 | 58.27 | Active | |||||||||||||||||||||||||||||||||||||||
18 | Book Details On the RoadPublished: 2000-10-01
| On the Road | orange | Jack Kerouac | 150.00 | 184.99 | 334.99 | 55.22 | Inactive | |||||||||||||||||||||||||||||||||||||||
19 | Book Details Pride and PrejudicePublished: 2005-07-18
|
Edit Name
| green | Jane Austen |
Edit Buy Amount
| 195.50 | 321.50 | 60.81 | Active | |||||||||||||||||||||||||||||||||||||||
20 | Book Details Lord of the FliesPublished: 2005-07-18
|
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.