Yii2 GridView on steroids. A module with various modifications and enhancements to one of the most used widgets by Yii developers. The widget contains new additional Grid Columns with enhanced settings for Yii Framework 2.0. The widget also incorporates various Bootstrap 3.x styling options. Refer detailed documentation and/or a complete demo. You can also view the grid grouping demo here.
You can see detailed documentation, demonstration and API code documentation on usage of the extension. You can also view the grid grouping demo here.
Note: If you face an issue of bootstrap popovers loading on page load for editable columns - you can disable it by hiding the bootstrap popovers in your yii2 view layout after document ready. For example in your yii2 view layout:
<script>
$(document).on("ready", function() {
$('.popover-x:visible').popoverX('hide'); // or use the right CSS selector as per your need
});
</script>
The preferred way to install this extension is through composer.
Read this web tip /wiki on setting the minimum-stability
settings for your application's composer.json.
Install the necessary pre-requisite (Krajee Dropdown Extension) based on your bootstrap version:
kartik-v/yii2-bootstrap5-dropdown
kartik-v/yii2-bootstrap4-dropdown
kartik-v/yii2-dropdown-x
For example if you are using the Bootstrap v5.x add the following to the require
section of your composer.json
file:
"kartik-v/yii2-bootstrap5-dropdown": "@dev"
Either run:
$ php composer.phar require kartik-v/yii2-grid "@dev"
or add
"kartik-v/yii2-grid": "@dev"
to the require
section of your composer.json
file.
use kartik\grid\GridView;
$gridColumns = [
['class' => 'kartik\grid\SerialColumn'],
[
'class' => 'kartik\grid\EditableColumn',
'attribute' => 'name',
'pageSummary' => 'Page Total',
'vAlign'=>'middle',
'headerOptions'=>['class'=>'kv-sticky-column'],
'contentOptions'=>['class'=>'kv-sticky-column'],
'editableOptions'=>['header'=>'Name', 'size'=>'md']
],
[
'attribute'=>'color',
'value'=>function ($model, $key, $index, $widget) {
return "<span class='badge' style='background-color: {$model->color}'> </span> <code>" .
$model->color . '</code>';
},
'filterType'=>GridView::FILTER_COLOR,
'vAlign'=>'middle',
'format'=>'raw',
'width'=>'150px',
'noWrap'=>true
],
[
'class'=>'kartik\grid\BooleanColumn',
'attribute'=>'status',
'vAlign'=>'middle',
],
[
'class' => 'kartik\grid\ActionColumn',
'dropdown' => true,
'vAlign'=>'middle',
'urlCreator' => function($action, $model, $key, $index) { return '#'; },
'viewOptions'=>['title'=>$viewMsg, 'data-toggle'=>'tooltip'],
'updateOptions'=>['title'=>$updateMsg, 'data-toggle'=>'tooltip'],
'deleteOptions'=>['title'=>$deleteMsg, 'data-toggle'=>'tooltip'],
],
['class' => 'kartik\grid\CheckboxColumn']
];
echo GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => $gridColumns,
'containerOptions' => ['style'=>'overflow: auto'], // only set when $responsive = false
'beforeHeader'=>[
[
'columns'=>[
['content'=>'Header Before 1', 'options'=>['colspan'=>4, 'class'=>'text-center warning']],
['content'=>'Header Before 2', 'options'=>['colspan'=>4, 'class'=>'text-center warning']],
['content'=>'Header Before 3', 'options'=>['colspan'=>3, 'class'=>'text-center warning']],
],
'options'=>['class'=>'skip-export'] // remove this row from export
]
],
'toolbar' => [
['content'=>
Html::button('<i class="glyphicon glyphicon-plus"></i>', ['type'=>'button', 'title'=>Yii::t('kvgrid', 'Add Book'), 'class'=>'btn btn-success', 'onclick'=>'alert("This will launch the book creation form.\n\nDisabled for this demo!");']) . ' '.
Html::a('<i class="glyphicon glyphicon-repeat"></i>', ['grid-demo'], ['data-pjax'=>0, 'class' => 'btn btn-default', 'title'=>Yii::t('kvgrid', 'Reset Grid')])
],
'{export}',
'{toggleData}'
],
'pjax' => true,
'bordered' => true,
'striped' => false,
'condensed' => false,
'responsive' => true,
'hover' => true,
'floatHeader' => true,
'floatHeaderOptions' => ['top' => $scrollingTop],
'showPageSummary' => true,
'panel' => [
'type' => GridView::TYPE_PRIMARY
],
]);
This project exists thanks to all the people who contribute. [Contribute]
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
yii2-grid is released under the BSD-3-Clause License. See the bundled LICENSE.md
for details.
yii2-grid
Date: 25-Jul-2023
GridView::replacePart
.Date: 25-Jul-2023
replaceTags
optimized to render content only if necessary using callbacks.Date: 23-Jul-2023
visibilityWaitTimeout
setting.kv-export-form
class to export form.filterAttribute
usage in renderFilterCellContent
.isFilterEqual
method to validate filters correctly.layout
property in GridView
.headerOptions['data-resizable-column-id']
propertyDate: 25-Feb-2022
toggleData
set to false
.floatHeaderOptions
and floatOverflowContainer
are deprecated and not used anymoreyii2-bootstrap4-dropdown
& yii2-bootstrap5-dropdown
and move it to suggests.Date: 02-Sep-2021
kv-grid-group.js
version.filterOptions
column seq setting in ColumnTrait.Date: 27-Mar-2020
ExpandRowColumn::msgDetailLoading
.kartik-v/yii2-bootstrap4-dropdown
.slugColHeads
usage in JSON export script.Date: 26-Aug-2019
rowOptions
init.data-key
generation.Date: 23-Aug-2019
floatHeaderOptions['top']
.export['skipExportElements']
.aria-hidden
as true for screen reader.GridView
.Date: 18-Jun-2019
pageSummaryFormat
.ltr
or rtl
)
pageSummaryOptions['data-colspan-dir']
propertyDate: 17-May-2019
pageSummaryOptions['colspan']
set at column level).BooleanColumn
data rendering for grid export.CheckboxColumn::checkboxOptions
to be set as Closure.jQuery.load
with jQuery.ajax
.Date: 12-Mar-2019
pageSummaryPosition
(GridView::POS_TOP
or GridView::POS_BOTTOM
). itemsLabelAccusative
and message token items-acc
.GridView::hashExportConfig
.Date: 07-Dec-2018
columnKey
property in grid columns.ExpandRowColumn
behavior to support multiple expand row columns per grid.Date: 09-Nov-2018
Date: 03-Nov-2018
EnumColumn
.from_pdf
and to_pdf
will be used instead of from
and to
. If
only to_pdf
is set then from
and to_pdf
will be used.Date: 09-Oct-2018
ExportController
HTTP headers.GridView
in yiisoft/yii2
.Date: 27-Sep-2018
Date: 22-Sep-2018
ActionColumn::dropdownButton
to be setup as a callback.Date: 22-Sep-2018
kartik\base\BootstrapInterface
.Date: 20-Sep-2018
Date: 12-Sep-2018
Date: 10-Sep-2018
xlFormat
.Date: 07-Sep-2018
Date: 18-Jul-2018
src
directory as per yii2 standards.floatTHead
plugin to latest version.getDataCellValue
method in ColumnTrait
.resizeableColumns
plugin init with floatThead
.customCallback
.ActionColumnAsset
.asPopover = false
.getQueryParam
instead of $_GET
.toolbarContainer
.hiddenFromExport
and hidden
properties.$grid
.jQuery
usage.Date: 23-Nov-2017
ActionColumn
delete confirmation message.
Now data-confirm
can be passed instead of message
to set the delete confirmation message
within ActionColumn::deleteOptions
.GridView
translation enhancements.
itemLabelFew
&itemLabelMany
Date: 22-Oct-2017
ActionColumn
delete action.pjaxDelete
flag.kv-merged-header
CSS in kv-grid.css
.itemLabelSingle
and itemLabelPlural
to be allowed for use in grid summary and action column.floatThead
plugin version.ActionColumn
button rendering.exportEncryptSalt
Demo
class to manage grid demo message translationsperfectScrollbar
and floatOverflowContainer
.editableOptions
.Date: 09-Jun-2017
Date: 08-Jun-2017
kvexprow:
instead of kvexprow.
.GridView::ROW_EXPANDED
.Module::exportEncryptSalt
available to generate a stateless hashed signature.exportEncryptSalt
is not set, it will be randomly generated and stored in a session variable.yii\base\Security::hashData
and yii\base\Security::validateData
. Date: 22-Oct-2016
thousandSep
config for grid group summary.GridView::pageSummaryContainer
.EditableColumnAction
to support model scenario as a parameter.ExpandRowColumn
to better support nested grid views and nested tree expansion.detailUrl
pjax form.ActionColumn::deleteOptions
.Date: 17-Aug-2016
EditableColumnAction
.ExpandRowColumn
.ActionColumn
.renderColumnGroup
for DataColumn
with options and groupedRow.ExportController::getPostData
by native Yii::$app->request->post()
.EditableColumnAction
to find model better.formatNumber
JS method.Date: 10-Apr-2016
array_replace_recursive
instead of ArrayHelper::merge
for overriding defaults.enablePushState
to match yii pjax defaults.floatHeader
.Date: 13-Jan-2016
Date: 10-Jan-2016
attribute
as ajax posted data.EditableColumnAction
class.Date: 05-Dec-2015
mkoryak/floatThead
plugin.cz
to cs
.tag
to be set for rendering beforeHeader
.EditableColumn::refreshGrid
validation.defaultPagination
property to allow setting default to 'page' or 'all'.Date: 13-Sep-2015
enableCache
property in ExpandRowColumn
.Date: 15-Jul-2015
Date: 07-Jul-2015
pjax:complete
init script being called multiple times.data-key
when ExpandRowColumn has a composite key.Date: 24-Jun-2015
Date: 15-Jun-2015
setTimeout
JS function.pluginOptions['width']
.Date: 11-May-2015
expandOneOnly
property behavior even if allowBatchToggle
is set to false
.CheckboxColumn
.true
.ExpandRowColumn::expandOneOnly
to allow only one row to expand at a time.BooleanColumn::falseIcon
default.Date: 14-Mar-2015
detailOptions
to be set as Closure in ExpandRowColumn.extraData
for sending extra data to ExpandRowColumn via ajax load call.refreshGrid
behavior for multiple editable columns on the grid.$filterInputOptions
in DataColumn.toggleData
button to enable toggling pagination via pjax.toggleDataContainer
and exportDataContainer
for controlling button group options.dropdownOptions
for ActionColumn
dropdown.Date: 13-Feb-2015
persistResize
to false to prevent client caching of column widths.resizableColumns
.FormulaColumn
.value
validation in GridView.Date: 26-Dec-2014
Date: 16-Dec-2014
Date: 02-Dec-2014
prepend
and append
settings within pageSummaryOptions
to prepend/append content to page summary.ExpandRowColumn
added - allows to expand grid rows, show details, and load content via ajax.Date: 19-Nov-2014
showFooter
from panel
array configuration. This can be now configured with footer
option within the panel
.layout
from panel
array configuration. This can be now configured with panelTemplate
at the GridView level.beforeTemplate
property to panelBeforeTemplate
.afterTemplate
property to panelAfterTemplate
.beforeContent
tag used in panelBeforeTemplate
to before
.afterContent
tag to panelAfterTemplate
to after
.Model::loadMultiple
method anymore and have the ability to directly use the $model->load
method.panelTemplate
: Template to render the complete grid panel.panelHeadingTemplate
: Template to render the heading block part of the panel.panelBeforeTemplate
: Template to render the before block part of the panel.panelAfterTemplate
: Template to render the after block part of the panel.panelFooterTemplate
: Template to render the footer block part of the panel.heading
, footer
, before
, and after
properties in the panel
typically accepts a string to render in that particular block. All of these can be set to boolean false
to hide them.headingOptions
, footerOptions
, beforeOptions
, and afterOptions
properties in the panel
array configuration.Date: 17-Nov-2014
Date: 14-Nov-2014
Date: 07-Nov-2014
options
in toggleDataOptions
initialization.Date: 04-Nov-2014
toggleGridData
is used in the extension.yii2-export
extension for full grid data export.hiddenFromExport
property for all grid columns.messages
configuration for all export related notifications.yii2-mpdf
extension)Date: 25-Oct-2014
Date: 14-Sep-2014
ColumnTrait
for all custom yii2-grid columns.kv-grid-hide
configured for hidden columns.Date: 21-Aug-2014
beforeInput
and afterInput
.Date: 01-Aug-2014
EditableColumn
column to the grid that uses the enhanced kartik\editable\Editable
widget to make the grid content editable.Date: 14-Jul-2014
containerOptions
to grid layout for allowing configuration of the grid table container. This can be set to
false
to not display the container.Date: 10-Jul-2014
(enh #54): Grid Export Enhancements
Ability to preprocess and convert column data to your desired value before exporting. For example convert the HTML formatted icons for BooleanColumn to user friendly text like Active
or Inactive
after export.
Hide any row or column in the grid by adding one or more of the following CSS classes):
skip-export
): Will skip this element during export for all formats (html
, csv
, txt
, xls
).skip-export-html
): Will skip this element during export only for html
export format.skip-export-csv
): Will skip this element during export only for csv
export format.skip-export-txt
): Will skip this element during export only for txt
export format.skip-export-xls
): Will skip this element during export only for xls
(excel) export format.
These CSS can be set virtually anywhere. For example headerOptions
, contentOptions
, beforeHeader
etc.(enh #52): Upgraded float header plugin
Enhanced panel footer to have a consistent height whether pagination is displayed or not.
BooleanColumn
icons have been setup as ICON_ACTIVE
and ICON_INACTIVE
constants in GridView.
ActionColumn
content by default has been disabled to appear in export output. The skip-export
CSS class has been set as default in headerOptions
and contentOptions
.
Date: 04-Jul-2014
beforeHeader
property to configure additional header rows before the default grid header.afterHeader
property to configure additional header rows after the default grid header.beforeFooter
property to configure additional footer rows before the default grid footer.afterFooter
property to configure additional footer rows after the default grid footer.Date: 29-Apr-2014
rowHighlight
property to set if a row needs to be highlightedrowSelectedClass
property to configure the CSS class for the highlighted row.Date: 18-Apr-2014
{export}
variable to grid layout
property.{toolbar}
variable to grid layout
property.Date: 22-Mar-2014
Date: 15-Mar-2014
Date: 10-Mar-2014
Initial release
Comments