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 | |||||||||||||||||||||||||||||||||||||||||||||||
1 | Book Details The Great GatsbyPublished: 2016-04-01
|
Edit Name
| blue | F. Scott Fitzgerald |
Edit Buy Amount
| 300.00 | 509.00 | 58.94 | Active | |||||||||||||||||||||||||||||||||||||||
2 | Book Details The Grapes of WrathPublished: 1995-07-18
|
Edit Name
| red | John Steinbeck |
Edit Buy Amount
| 155.50 | 259.50 | 59.92 | Active | |||||||||||||||||||||||||||||||||||||||
3 | Book Details Nineteen Eighty-FourPublished: 1984-02-27
|
Edit Name
| orange | George Orwell |
Edit Buy Amount
| 98.50 | 177.50 | 55.49 | Active | |||||||||||||||||||||||||||||||||||||||
4 | Book Details UlyssesPublished: 1974-12-10
| Ulysses | green | James Joyce | 69.00 | 98.50 | 167.50 | 58.81 | Inactive | |||||||||||||||||||||||||||||||||||||||
5 | Book Details LolitaPublished: 2004-05-09
|
Edit Name
| pink | Vladimir Nabokov |
Edit Buy Amount
| 85.50 | 143.50 | 59.58 | Active | |||||||||||||||||||||||||||||||||||||||
6 | Book Details Catch-22Published: 2011-08-21
|
Edit Name
| cyan | Joseph Heller |
Edit Buy Amount
| 105.50 | 190.50 | 55.38 | Active | |||||||||||||||||||||||||||||||||||||||
7 | Book Details The Catcher in the RyePublished: 2006-10-17
|
Edit Name
| red | J. D. Salinger |
Edit Buy Amount
| 125.50 | 230.50 | 54.45 | Active | |||||||||||||||||||||||||||||||||||||||
8 | Book Details BelovedPublished: 2000-10-01
| Beloved | green | Toni Morrison | 130.00 | 154.99 | 284.99 | 54.38 | Inactive | |||||||||||||||||||||||||||||||||||||||
9 | Book Details The Sound and the FuryPublished: 2005-07-18
|
Edit Name
| brown | William Faulkner |
Edit Buy Amount
| 125.50 | 231.50 | 54.21 | Active | |||||||||||||||||||||||||||||||||||||||
10 | Book Details To Kill a MockingbirdPublished: 2013-06-19
| To Kill a Mockingbird | orange | Harper Lee | 79.00 | 98.50 | 177.50 | 55.49 | Inactive | |||||||||||||||||||||||||||||||||||||||
Total | 1,024.00 | 1,347.99 | 2,371.99 | 56.67 | (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.