Global Bootstrap Version

Generally, you may also want to set a default version globally for all Krajee Extensions (instead of setting it for each widget or extension separately). In order to do this, you can setup the bsVersion property within Yii 2 application params (i.e. Yii::$app->params['bsVersion']). To set this up, add this section of code to your application params configuration file (e.g. config/params.php):

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

If GridView::bsVersion property is set, in addition to Yii::$app->params['bsVersion'], the extension level setting (GridView::bsVersion property) will override the Yii::$app->params['bsVersion']. If GridView::bsVersion property is not set, and Yii::$app->params['bsVersion'] is also not set, GridView::bsVersion property will default to 3.x (i.e. Bootstrap 3.x version will be assumed as default).

Yii2 Bootstrap Dependency

You need to install one of yiisoft/yii2-bootstrap or yiisoft/yii2-bootstrap4 or yiisoft/yii2-bootstrap5 extensions manually in your application to enable Bootstrap 3.x or 4.x or 5.x functionality respectively. This dependency has not been pre-built into the composer configuration for Krajee extensions, to allow better control to the developers in configuring their bootstrap library version. If bsVersion is set to 5.x and yiisoft/yii2-bootstrap5 is not installed, then an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap5 extension. If bsVersion is set to 4.x and yiisoft/yii2-bootstrap4 is not installed, then an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap4 extension. Similarly, if bsVersion is set to 3.x and yiisoft/yii2-bootstrap is not installed, an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap extension.

To install yiisoft/yii2-bootstrap5, add the repo to the require section of your application's composer.json.

"yiisoft/yii2-bootstrap5": "@dev"

To install yiisoft/yii2-bootstrap4, add the repo to the require section of your application's composer.json.

"yiisoft/yii2-bootstrap4": "@dev"

To install yiisoft/yii2-bootstrap, add the repo to the require section of your application's composer.json.

"yiisoft/yii2-bootstrap": "@dev"

Override Bootstrap CSS/JS

The Krajee extension asset bundle(s) by default depend on one of the following asset bundles to load the Bootstrap CSS and JS:

• yii\bootstrap\BootstrapAsset and/or yii\bootstrap\BootstrapPluginAsset for bootstrap 3.x (bsVersion = 3 setting)

• yii\bootstrap4\BootstrapAsset and/or yii\bootstrap4\BootstrapPluginAsset for bootstrap 4.x ( bsVersion = 4 setting)

• yii\bootstrap5\BootstrapAsset and/or yii\bootstrap5\BootstrapPluginAsset for bootstrap 5.x (bsVersion = 5 setting)

This is controlled by the property bsDependencyEnabled within the asset bundle (which defaults to true). One can override this and prevent the default yii2 bootstrap assets (CSS & JS) from loading by doing one or all of the following:

• Global Override: Set Yii::$app->params['bsDependencyEnabled'] to false in your Yii 2 application config params.php. This setting will be applied for all Krajee Extension Asset Bundles that depend on Bootstrap assets.

  'params' => [
      'bsDependencyEnabled' => false, // this will not load Bootstrap CSS and JS for all Krajee extensions
      // you need to ensure you load the Bootstrap CSS/JS manually in your view layout before Krajee CSS/JS assets
      //
      // other params settings below
      // 'bsVersion' => '5.x',
      // 'adminEmail' => 'admin@example.com'
  ]
  

• Asset Bundle Specific Override: Set bsDependencyEnabled to false for the specific asset bundle within Yii2 Asset Manager component in your Yii 2 application config file.

  // ...
  'components' => [
      'assetManager' => [
          'bundles' => [
              'kartik\form\ActiveFormAsset' => [
                  'bsDependencyEnabled' => false // do not load bootstrap assets for a specific asset bundle
              ],
          ],
      ],
  ],
  

Icons for Bootstrap

Bootstrap 5.x / 4.x does not include glyphicons or any other icons framework bundled with the library. Krajee extensions therefore will use Font Awesome 5.x icons instead of glyphicons when working with Bootstrap 5.x / 4.x. You can download Font Awesome 5.x icons from the icons website. Alternatively, you can load the free version of Font Awesome from their CDN.

For Krajee extensions and demos, the Font Awesome Free version is used and loaded as the Icons Display Package on all the Yii2 demo layouts. To include font awesome assets on your page, include the following markup on the HEAD section of your view layout file, when bsVersion is set to 4.x or 5.x.

• Option 1: Font CSS version of Font Awesome:

  <!-- on your view layout file HEAD section -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  

• Option 2: SVG / JS version of Font Awesome (recommended for cleaner scaling vector icons and features like icon layers):

  <!-- on your view layout file HEAD section -->
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" crossorigin="anonymous"></script>
  

  Alternatively, you can use the FontAwesomeAsset from the kartik-v/yii2-icons package to load the SVG/JS version.

  // on your view layout file
  use kartik\icons\FontAwesomeAsset;
  FontAwesomeAsset::register($this);
  

Composer Package Manager Recommended

Installation via Composer is the recommended and most easy option to install Krajee Yii2 extensions. You can install yii2-grid via composer package manager. Either run:

$ php composer.phar require kartik-v/yii2-grid "dev-master"

or add:

"kartik-v/yii2-grid": "dev-master"

to your application's composer.json file.

Manual Install

You may also manually install the extension to your project (in case your composer install does not work). Just download the source ZIP or TAR ball and extract the extension asset files and folders into your project. You may need to install dependencies manually and also set the namespaces to the extensions in your Yii2 extensions configurations manually.

Customizing Module Identifier

You can set your own module identifier instead of gridview by setting/overriding the GridView::moduleId property. This is useful in case you are wishing to have multiple grid view module configurations on your application. For example:

// in your module configuration you can have 'gridviewKrajee' as another module
'modules' => [
   'gridview' =>  [
        'class' => '\kartik\grid\Module',
        // your other grid module settings
    ],
   'gridviewKrajee' =>  [
        'class' => '\kartik\grid\Module',
        // your other grid module settings
    ]
];

// elsewhere in your view rendering the GridView widget
echo GridView::widget([
    'moduleId' => 'gridviewKrajee', // change the module identifier to use the respective module's settings
    'dataProvider' => $dataProvider,
    'columns' => $columns,
    // other widget settings
]);

• bootstrap: boolean, whether the grid view will have a Bootstrap table styling. Defaults to true. If set to false, will automatically disable/remove all Bootstrap specific markup from the grid table and filters.

• bsVersion: string | int, the bootstrap library version to be used for the extension. Refer the Bootstrap Info section for details and pre-requisites on setting this property.

  • To use with Bootstrap library - you can set this to any string starting with 3 (e.g. 3 or 3.3.7 or 4.x / 3.x)

  • To use with bootstrap 4 - you can set this to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

  • To use with bootstrap 5 - you can set this to any string starting with 4 (e.g. 5 or 5.1.0 or 5.x)

  NOTE If this property is NOT SET, then this property will default to the bsVersion property set at the Module level which will override the Yii::$app->params['bsVersion'] setting.

• bsColCssPrefixes: array, the bootstrap grid column css prefixes mapping, the key is the bootstrap versions, and the value is an array containing the sizes and their corresponding grid column css prefixes. The class using this trait, must implement kartik\base\BootstrapInterface. If not set will default to:.

  [
     3 => [
        self::SIZE_X_SMALL => 'col-xs-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-lg-',
        self::SIZE_XX_LARGE => 'col-lg-',
     ],
     4 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xl-',
     ],
     5 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xxl-',
     ],
  ];
  

• bordered: boolean, whether the grid table will have a bordered style. Applicable only if bootstrap is true. Defaults to true.

• striped: boolean, whether the grid table will have a striped style. Applicable only if bootstrap is true. Defaults to true.

• condensed: boolean, whether the grid table will have a condensed style. Applicable only if bootstrap is true. Defaults to false.

• responsive: boolean, whether the grid table will have a responsive style. Applicable only if bootstrap is true. Defaults to true.

• responsiveWrap: boolean, whether the grid table columns will be responsively wrapped to a single column for small screen devices (less than 480px). Defaults to true.

• hover: boolean, whether the grid table will highlight row on hover. Applicable only if bootstrap is true. Defaults to false.

• containerOptions: array|boolean, the HTML attributes for the grid container. The grid table items will be wrapped in a div container with the configured HTML attributes. The ID for the container will be auto generated. When you set the responsive property to true, a CSS class of table-responsive will be automatically added to the container. Note that when using with sticky floating headers/footers you must set a fixed height to this container or add the CSS class kv-grid-wrapper.

• perfectScrollbar: boolean, whether pretty perfect scrollbars using perfect scrollbar plugin is to be used.Defaults to false. If this is set to true, the floatOverflowContainer property will be auto set to true, if floatHeader is true.

• perfectScrollbarOptions: array, he plugin options for the perfect scrollbar plugin. Refer the perfect scrollbar plugin documentation for details on options that can be set.

The following base GridView parameters can be used with the extended GridView and have certain defaults preset.

• tableOptions: array, HTML attributes for the grid table element. This is auto generated based on the above settings.

• footerRowOptions: array, HTML attributes for the table footer row. Defaults to ['class' => 'kv-table-footer']

• captionOptions: array, HTML attributes for the table caption. Defaults to ['class' => 'kv-table-caption']

• headerRowOptions: array, HTML attributes for the table header row.

• rowOptions: array, HTML attributes for each table row. You can set this to apply specific classes to the row. For example you can set a Bootstrap Contextual class to highlight the row like: 'rowOptions' => ['class' => GridView::TYPE_DANGER]

Usage

use kartik\grid\GridView;

// Generate a bootstrap responsive striped table with row highlighted on hover
echo GridView::widget([
    'dataProvider'=> $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,
    'responsive'=>true,
    'hover'=>true
]);

• pjax: boolean, whether the grid view will be rendered within a pjax container. Defaults to false. If set to true, the entire GridView widget will be parsed via Pjax and rendered inside a yii\widgets\Pjax widget container. If set to false, pjax will be disabled and none of the pjax settings will be applied.

• pjaxSettings: array, the various pjax configuration settings for the widget. This will be considered only when pjax is set to true. The following settings are recognized:

  • neverTimeout: boolean, whether the pjax request should never timeout. Defaults to true. The pjax:timeout event will be configured to disable timing out of pjax requests for the pjax container.

  • options: array, the options for the yii\widgets\Pjax widget. The pjax container identifier is read via pjaxSettings['options']['id'] . You could override and manually set pjaxSettings['options']['id'] if you need your own pjax container identifier. If not set this defaults to:

    $grid->options['id'] . '-pjax'
    

    where $grid->options refer to the widget's options property.

  • loadingCssClass: boolean/string, the CSS class to be applied to the grid when loading via pjax. If set to false - no css class will be applied. If it is empty, null, or set to true, will default to kv-grid-loading.

  • beforeGrid: string, any content to be embedded within pjax container before the Grid widget.

  • afterGrid: string, any content to be embedded within pjax container after the Grid widget.

Usage

use kartik\grid\GridView;

// Control your pjax options
echo GridView::widget([
    'dataProvider'=> $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,
    'pjax'=>true,
    'pjaxSettings'=>[
        'neverTimeout'=>true,
        'beforeGrid'=>'My fancy content before.',
        'afterGrid'=>'My fancy content after.',
    ]
]);

• beforeHeader: array|string, configuration of additional header table rows that will be rendered before the default grid header row. If set as a string, it will be displayed as is, without any HTML encoding. If set as an array, each row in this array corresponds to a HTML table row, where you can configure the columns with these properties:

  • columns: array, the header row columns configuration where you can set the following properties:

    • content: string, the table cell content for the column.

    • tag: string, the tag for rendering the table cell. If not set, defaults to th.

    • options: array, the HTML attributes for the table cell.

  • options: array, the HTML attributes for the table row.

• afterHeader: array|string, configuration of additional header table rows that will be rendered after the default grid header row. If set as a string, it will be displayed as is, without any HTML encoding. If set as an array, each row in this array corresponds to a HTML table row, where you can configure the columns with these properties:

  • columns: array, the header row columns configuration where you can set the following properties:

    • content: string, the table cell content for the column.

    • tag: string, the tag for rendering the table cell. If not set, defaults to th.

    • options: array, the HTML attributes for the table cell.

  • options: array, the HTML attributes for the table row.

• beforeFooter: array|string, configuration of additional footer table rows that will be rendered before the default grid footer row. If set as a string, it will be displayed as is, without any HTML encoding. If set as an array, each row in this array corresponds to a HTML table row, where you can configure the columns with these properties:

  • columns: array, the footer row columns configuration where you can set the following properties:

    • content: string, the table cell content for the column.

    • tag: string, the tag for rendering the table cell. If not set, defaults to th.

    • options: array, the HTML attributes for the table cell.

  • options: array, the HTML attributes for the table row.

• afterFooter: array|string, configuration of additional footer table rows that will be rendered after the default grid footer row. If set as a string, it will be displayed as is, without any HTML encoding. If set as an array, each row in this array corresponds to a HTML table row, where you can configure the columns with these properties:

  • columns: array, the footer row columns configuration where you can set the following properties:

    • content: string, the table cell content for the column.

    • tag: string, the tag for rendering the table cell. If not set, defaults to th.

    • options: array, the HTML attributes for the table cell.

  • options: array, the HTML attributes for the table row.

Displays a floating header or footer as you scroll the grid. Since release v3.5.0 the grid does not use any external plugins for this feature. It uses the browser inherent, CSS sticky feature, which is supported by most modern browsers. In case, you are using an outdated browser, this feature may not work, hence please manage your end user usage accordingly (as the yii2-grid extension does not plan to support older browsers since v3.5.0). The following are the new properties available to manage this functionality:

• floatHeader: boolean, whether the grid table will have a floating table header at the top. Defaults to false. Note that the table header will stick to the top of the page by default if this is set to true. To add an offset from the top - you can configure the CSS style within headerContainer. For example:

  'headerContainer' => ['class' => 'kv-table-header, 'style' => 'top: 50px'] // to set an offset from top
  

• floatFooter: boolean, whether the grid table will have a floating table footer at the bottom. Defaults to false. Note that the table footer will stick to the bottom of the page by default if this is set to true. To add an offset from the bottom - you can configure the CSS style within footerContainer. For example:

  'footerContainer' => ['class' => 'kv-table-footer, 'style' => 'bottom: 50px'] // to set an offset from bottom
  

• floatPageSummary: boolean, whether the grid table will have a floating page summary at the bottom or top depending on pageSummaryPosition. Defaults to false. Note that this property also automatically overrides and disables the floatHeader or floatFooter properties. This is because only one sticky container can exist at the top or bottom.

  • when pageSummaryPosition is set to GridView::POS_BOTTOM, the page summary sticks to the bottom of the page, and overrides the floatFooter setting to false.

  • when pageSummaryPosition is set to GridView::POS_TOP, the page summary sticks to the top of the page, and overrides the floatHeader setting to false.

  Note that, like header or footer, you can control the positioning or offset of the page summary container via pageSummaryContainer.

  'pageSummaryContainer' => ['style' => 'bottom: 50px'] // to set an offset from bottom
  

• headerContainer: array, the HTML options for the table thead container. The CSS class kv-table-header is added by default, and creates the Krajee default header styling for a better float header behavior. In case you are overriding this property at runtime, either use your own CSS class/ style or add the default CSS kv-table-header for maintaining a consistent sticky styling. Note that with floatHeader enabled to true, you may need to add an offset for the floated header from top when scrolling (e.g. in cases where you have a fixed bootstrap navbar on top). For example:

  'headerContainer' => ['class' => 'kv-table-header, 'style' => 'top: 50px'] // to set an offset from top
  

• footerContainer: array, the HTML options for the table tfoot container. The CSS class kv-table-footer is added by default, and creates the Krajee default footer styling for a better float footer behavior. In case you are overriding this property at runtime, either use your own CSS class/ style or add the default CSS kv-table-footer for maintaining a consistent sticky styling. Similar, to headerContainer, you can control other styling, like offsets. For example:

  'footerContainer' => ['class' => 'kv-table-footer, 'style' => 'bottom: 50px'] // to set an offset from bottom
  

• pageSummaryContainer: array, the HTML options for the page summary container. Similar, to headerContainer and footerContainer, you can control other styling, like offsets. Supports the following additional token property.

  • tag: string, the tag used to render the page summary. Defaults to tbody.

  This defaults to the following setting:

  'pageSummaryContainer' => ['class' => 'kv-page-summary-container']
  

• responsive: boolean, whether the grid will have a `responsive` style. Applicable only if bootstrap property is true. Note, that for responsive grids, the header and footer sticky floats will not work unless you configure containerOptions. If you set this property to true and floatHeader or floatFooter or floatPageSummary is also enabled to true, then for effective behavior set a fixed height for the container in containerOptions or add the built in class 'kv-grid-wrapper' to the containerOptions - for example:

  'containerOptions' => ['class' => 'kv-grid-wrapper']
  

  The above will ensure that when you scroll within the container, the sticky header/footer will float, but when you scroll outside the container on the body, the header / footer will not float and be sticky.

The following properties are DEPRECATED since v3.5.0 and will not be available for future releases. These properties were necessary for yii2-grid releases prior to v3.5.0, in order to control the float behavior dependent on the external third party plugin. Since v3.5.0, there is no external plugin dependency and these properties are thus deprecated and will not impact the grid behavior in any way.

• floatHeaderOptions: array DEPRECATED

• floatOverflowContainer: boolean DEPRECATED

Usage

use kartik\grid\GridView;

// Generate a floating header fixed to top and an offset of 50 px 
// from top of the page for the bootstrap navbar
echo GridView::widget([
    'dataProvider'=> $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,
    'floatHeader' => true, // floats header to top
    'floatPageSummary' => true, // floats page summary to bottom
    'headerContainer' => ['class'=> 'kv-table-header', 'style'=>'top:50px'] // offset from top
    'pageSummaryPosition' => GridView::POS_BOTTOM
]);

The enhanced grid from Krajee allows resizing of the columns just like a spreadsheet (since v3.0.0). This uses the JQuery ResizableColumns plugin for resize and store.js for localStorage persistence. The following options help you to control the resizable settings:

• resizableColumns: boolean, whether to allow resizing of columns. Defaults to true.

• persistResize: boolean, whether to store resized column state using local storage persistence (supported by most modern browsers). Defaults to false.

• hideResizeMobile: boolean, whether to hide resizable columns for smaller screen sizes (< 768px). Defaults to true. When this is true, it will make the screen layout responsive for smaller screen devices (< 768px) and not allow content to overflow the page.

• resizableColumnsOptions: array, plugin options for resizable columns. Refer the plugin documentation for details on what options can be set here.

• resizeStorageKey: string, resizable unique storage prefix to append to the grid id. If empty or not set it will default to Yii::$app->user->id.

Usage

use kartik\grid\GridView;

// Generate a floating header fixed to top and an offset of 50 px 
// from top of the page for the bootstrap navbar
echo GridView::widget([
    'dataProvider'=> $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,
    'resizableColumns'=>true,
    'resizeStorageKey'=>Yii::$app->user->id . '-' . date("m")
]);

This is a new feature added to the GridView widget. The page summary is an additional row above the footer - for displaying the summary/totals for the current GridView page. Calculating the page summary will be setup within the DataColumn or FormulaColumn settings, as described in the later sections. The following parameters are applicable to control this behavior.

• showPageSummary: boolean, whether to display the page summary row for the grid view. Defaults to false.

• pageSummaryRowOptions: array, HTML attributes for the page summary row. Defaults to ['class' => 'kv-page-summary warning'].

• pageSummaryPosition: string, position of the page summary. Can be one of the following:

  • GridView::POS_TOP or 'top' to position it at the TOP of the table body.

  • GridView::POS_BOTTOM or 'bottom' to position it at the BOTTOM of the table body.

  Defaults to GridView::POS_BOTTOM.

• floatPageSummary: boolean, whether the grid table will have a floating page summary at the bottom or top depending on pageSummaryPosition. Defaults to false. Note that this property also automatically overrides and disables the floatHeader or floatFooter properties. This is because only one sticky container can exist at the top or bottom.

  • when pageSummaryPosition is set to GridView::POS_BOTTOM, the page summary sticks to the bottom of the page, and overrides the floatFooter setting to false.

  • when pageSummaryPosition is set to GridView::POS_TOP, the page summary sticks to the top of the page, and overrides the floatHeader setting to false.

  Note that, like header or footer, you can control the positioning or offset of the page summary container via pageSummaryContainer.

  'pageSummaryContainer' => ['style' => 'bottom: 50px'] // to set an offset from bottom
  

• pageSummaryContainer: array, the HTML options for the page summary container. Similar, to headerContainer and footerContainer, you can control other styling, like offsets. Supports the following additional token property.

  • tag: string, the tag used to render the page summary. Defaults to tbody.

  This defaults to following setting:

  'pageSummaryContainer' => ['class' => 'kv-page-summary-container']
  

Usage

use kartik\grid\GridView;

// Create a panel layout for your GridView widget
echo GridView::widget([
    'dataProvider'=> $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,
    'showPageSummary' => true
]);

The toolbar is new feature and more enhanced with release v2.1.0 of the GridView widget. The grid offers ability to configure toolbar for adding various actions. The default templates place the toolbar in the before section of the panel. The toolbar is by default styled using Bootstrap button groups. Some of the default actions like the export button can be easily appended to the toolbar by using the special tag `{export}`. With version v2.1.0, if you are using the yii2-dynagrid extension it automatically displays the personalize, sort, and filter buttons in the toolbar. The toolbar can be setup as a string or an array.

• if set as a string, it will be rendered as is.

• if set as an array, each line item will be considered as following

  • if the line item is setup as a string, it will be rendered as is

  • if the line item is an array it will be parsed for the following keys

    • content: string, the content to be rendered as a bootstrap button group. The following special variables are recognized and will be replaced:

      • {export}: string, which will render the $export menu button content.

      • {toggleData}: string, which will render the toggle button as configured in toggleDataOptions. This will allow user to toggle between all data and default paginated data.

    • options: array, the HTML attributes for the button group div container. By default the CSS class `btn-group` will be attached to this container.

Usage

use kartik\grid\GridView;
use yii\helpers\Html;

// Create a panel layout for your GridView widget
echo GridView::widget([
    'dataProvider'=> $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,
    'toolbar' => [
        [
            'content'=>
                Html::button('<i class="fas fa-plus"></i>', [
                    'type'=>'button', 
                    'title'=>Yii::t('kvgrid', 'Add Book'), 
                    'class'=>'btn btn-success'
                ]) . ' '.
                Html::a('<i class="fas fa-redo"></i>', ['grid-demo'], [
                    'class' => 'btn btn-secondary btn-default', 
                    'title' => Yii::t('kvgrid', 'Reset Grid')
                ]),
        ],
        '{export}',
        '{toggleData}'
    ]
]);

NOTE: As seen above, the special tags {export} and {toggleData} just need to be positioned appropriately in the toolbar. The HTML attribute options for export and toggle button group containers can be controlled via exportContainer and toggleDataContainer properties. For example to set the button group sizes to small in the toolbar you can configure the widget like shown below:

echo GridView::widget([
    'dataProvider'=> $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,
    'toolbar' => [
        [
            'content'=>
                Html::button('<i class="fas fa-plus"></i>', [
                    'type'=>'button', 
                    'title'=>Yii::t('kvgrid', 'Add Book'), 
                    'class'=>'btn btn-success'
                ]) . ' '.
                Html::a('<i class="fas fa-redo"></i>', ['grid-demo'], [
                    'class' => 'btn btn-secondary btn-default', 
                    'title' => Yii::t('kvgrid', 'Reset Grid')
                ]),
            'options' => ['class' => 'btn-group-sm']
        ],
        '{export}',
        '{toggleData}'
    ],
    'toggleDataContainer' => ['class' => 'btn-group-sm'],
    'exportContainer' => ['class' => 'btn-group-sm']
]);

This is a new feature added to the GridView widget. The following export file formats are supported:

• HTML: Hyper Text Markup Language

• CSV: Comma Separated Values

• TEXT: Tab Delimited Text

• EXCEL: Microsoft Excel 95+

• PDF: Portable Document Format

• JSON: Javascript Object Notation

• Ability to preprocess and convert column data to your desired value before exporting. There is a new property exportConversions that can be setup in GridView. For example, this currently is set as a default to 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, pdf, json).

  • skip-export-html: Will skip this element during export for html export format.

  • skip-export-csv: Will skip this element during export for csv export format.

  • skip-export-txt: Will skip this element during export for txt export format.

  • skip-export-xls: Will skip this element during export for xls (excel) export format.

  • skip-export-pdf: Will skip this element during export for pdf export format.

  • skip-export-json: Will skip this element during export for json export format.

  These CSS can be set virtually in any of the grid or column properties that control HTML attributes. For example headerOptions, contentOptions, beforeHeader, footerOptions etc.

• export: array|boolean, the grid export menu settings. Displays a Bootstrap button dropdown menu that allows you to export the grid as either html, csv, or excel. If set to false, will not be displayed. The following options can be set:

  • icon: string, the glyphicon suffix to be displayed before the export menu label. If set to an empty string, this will not be displayed. Defaults to 'export'.

  • label: string, the export menu label (this is not HTML encoded). Defaults to empty string.

  • showConfirmAlert: boolean, whether to show a confirmation alert dialog before download. This confirmation dialog will notify user about the type of exported file for download and to disable popup blockers. Defaults to true.

  • target: string, the target for submitting the export form, which will trigger the download of the exported file. Defaults to GridView::TARGET_POPUP. Must be one of the following:

    • GridView::TARGET_POPUP or _popup: whereby a popup window with download progress message is displayed.

    • GridView::TARGET_BLANK or _blank: whereby a new blank window is displayed and closed after download is finished.

    • GridView::TARGET_SELF or _self: no window is popped up in this case, but download is submitted on same page.

  • messages: array, the the configuration of various messages that will be displayed at runtime:

    • allowPopups: string, the message to be shown to disable browser popups for download. Defaults to Disable any popup blockers in your browser to ensure proper download..

    • confirmDownload: string, the message to be shown for confirming to proceed with the download. Defaults to Ok to proceed?.

    • downloadProgress: string, the message to be shown in a popup dialog when download request is triggered. Defaults to Generating file. Please wait....

    • downloadProgress: string, the message to be shown in a popup dialog when download request is completed. Defaults to All done! Click anywhere here to close this window, once you have downloaded the file..

  • header: string, the header for the grid page export dropdown. If set to empty string will not be displayed. Defaults to <li role="presentation" class="dropdown-header">Export Page Data</li>.

  • fontAwesome: boolean, whether to use font awesome file type icons. Defaults to false. If you set it to true, then font awesome icons css class will be applied instead of glyphicons.

    Note:

    You must load the font awesome CSS file in your view or layout for this icons to be properly rendered. The widget does not load FontAwesome assets or CSS by default.

  • itemsBefore: array, any additional items that will be merged / prepended before the export dropdown list. This should be similar to the items property as supported by \yii\bootstrap\ButtonDropdown widget. Note: the page export items will be automatically generated based on settings in the exportConfig property.

  • itemsAfter: array, any additional items that will be merged / appended after the export dropdown list. This should be similar to the items property as supported by \yii\bootstrap\ButtonDropdown widget. Note: the page export items will be automatically generated based on settings in the exportConfig property.

  • options: array, HTML attributes for the export menu button. Defaults to ['class' => 'btn btn-danger'].

  • encoding: string, the export output file encoding. If not set, defaults to utf-8.

  • menuOptions: array, HTML attributes for the export dropdown menu. Defaults to ['class' => 'dropdown-menu dropdown-menu-right']. This is to be set exactly as the options property for \yii\bootstrap\Dropdown widget.

  • skipExportElements: array,the list of jQuery element selectors that will be skipped and removed from export. Defaults to ['.sr-only', '.hide'].

• exportConversions: array, configuration for conversion of defined patterns in the grid cells as a preprocessing before the gridview is formatted for export. Each array row must mandatorily consist of the following two keys:

  • from: string, is the pattern to search for in each grid column's cells for all export formats

  • to: string, is the string to replace the pattern in the grid column cells for all export formats

  In addition, you may optionally set one or more of the following keys to override the export string conversions for a specific export type.

  • from_pdf: string, is the pattern to search for in each grid column's cells for only PDF export format. This will override the from property set earlier specifically for PDF export format.

  • to: string, is the string to replace the pattern in the grid column cells for only PDF export format. This will override the to property set earlier specifically for PDF export format.

  • from_html: string, is the pattern to search for in each grid column's cells for only HTML export format. This will override the from property set earlier specifically for HTML export format.

  • to: string, is the string to replace the pattern in the grid column cells for only HTML export format. This will override the to property set earlier specifically for HTML export format.

  • from_txt: string, is the pattern to search for in each grid column's cells for only TEXT export format. This will override the from property set earlier specifically for TEXT export format.

  • to: string, is the string to replace the pattern in the grid column cells for only TEXT export format. This will override the to property set earlier specifically for TEXT export format.

  • from_csv: string, is the pattern to search for in each grid column's cells for only CSV export format. This will override the from property set earlier specifically for CSV export format.

  • to: string, is the string to replace the pattern in the grid column cells for only CSV export format. This will override the to property set earlier specifically for CSV export format.

  • from_xls: string, is the pattern to search for in each grid column's cells for only Excel export format. This will override the from property set earlier specifically for Excel export format.

  • to: string, is the string to replace the pattern in the grid column cells for only Excel export format. This will override the to property set earlier specifically for Excel export format.

  • from_json: string, is the pattern to search for in each grid column's cells for only JSON export format. This will override the from property set earlier specifically for JSON export format.

  • to: string, is the string to replace the pattern in the grid column cells for only JSON export format. This will override the to property set earlier specifically for JSON export format.

  This defaults to:

  [
      ['from'=>GridView::ICON_ACTIVE, 'to'=>Yii::t('kvgrid', 'Active')],
      ['from'=>GridView::ICON_INACTIVE, 'to'=>Yii::t('kvgrid', 'Inactive')]
  ]
  

• exportConfig: array|boolean, the configuration for each export format above. The array keys must be the one of the constants:

  • GridView::HTML or 'html'

  • GridView::CSV or 'csv'

  • GridView::TEXT or 'txt'

  • GridView::EXCEL or 'xls'

  • GridView::PDF or 'pdf'

  • GridView::JSON or 'json'

  The array values for each of the above is a configuration array containing the following:

  • icon string, the he glyphicon or font-awesome name suffix to be displayed before the export menu item label. The font awesome icons will be used, if you have setup export['fontAwesome'] propery to true. to be displayed before the export menu item label. If set to an empty string, this will not be displayed. For glyphicons, it defaults to one of the 'floppy-' glyphicons available in bootstrap.

    Note:

    You must load the font awesome CSS file in your view or layout for this icons to be properly rendered.

  • iconOptions: array, HTML attributes for export menu icon.

  • label string, the label for the export format menu item displayed.

  • showHeader boolean, whether to show table header in the output. Defaults to true.

  • showPageSummary boolean, whether to show table page summary in the output. Defaults to true.

  • showFooter boolean, whether to show table footer in the output. Defaults to true.

  • showCaption boolean, whether to show table caption in the output. Defaults to true.

  • filename string, the base file name for the generated file. Defaults to 'grid-export'. This will be used to generate a default file name for downloading (extension will be one of csv, html, or xls - based on the format setting).

  • alertMsg string, the message alert prompt to show before saving. If this is empty or null it will not be displayed.

  • mime string, the mime type (for the file format) to be set before downloading.

  • options string, array, HTML attributes for each export menu item.

  • config array, the additional configuration settings that are specific to each file format/type. The following configuration options are read specific to each file type:

    HTML

    • cssFile string, the css file that will be used in the exported HTML file. Defaults to https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css.

    CSV

    • colDelimiter string, string, the the column delimiter string for TEXT and CSV downloads.

    • rowDelimiter string, string, the the row delimiter string for TEXT and CSV downloads.

    EXCEL

    • worksheet string, the active worksheet name for the downloaded excel file.

    PDF

    You could pass all configuration settings in array format, as required by the \kartik\mpdf\Pdf extension component. In addition, the following additional settings are recognized:

    • contentBefore string, any HTML formatted content that will be embedded in the PDF output before the grid.

    • contentAfter string, any HTML formatted content that will be embedded in the PDF output after the grid.

    JSON

    • colHeads: array, the column heading names to be output in the json file. If not set, it will be autogenerated as "col-{i}", where {i} is the column index. If slugColHeads is set to true, the extension will attempt to autogenerate column heads based on table column heading, whereever possible.

    • slugColHeads: boolean, whether to auto-generate column identifiers as slugs based on the table column heading name. If the table column heading contains characters which cannot be slugified, then the extension will autogenerate the column name as "col-{i}".

    • jsonReplacer: array|JsExpression, the JSON replacer property - can be an array or a JS function created using JsExpression. Refer the JSON documentation for details on setting this property. This defaults to the following callback function which trims each data element if it is a string:

      function(k,v){return typeof(v)==='string'?$.trim(v):v}
      

    • indentSpace: int, pretty print json output and indent by number of spaces specified. Defaults to 4.

  Default Export Configuration

  The default exportConfig is setup as below:

  // $isFa below determines if export['fontAwesome'] property is set to true.
  $defaultExportConfig = [
      GridView::HTML => [
          'label' => Yii::t('kvgrid', 'HTML'),
          'icon' => $isFa ? 'file-text' : 'floppy-saved',
          'iconOptions' => ['class' => 'text-info'],
          'showHeader' => true,
          'showPageSummary' => true,
          'showFooter' => true,
          'showCaption' => true,
          'filename' => Yii::t('kvgrid', 'grid-export'),
          'alertMsg' => Yii::t('kvgrid', 'The HTML export file will be generated for download.'),
          'options' => ['title' => Yii::t('kvgrid', 'Hyper Text Markup Language')],
          'mime' => 'text/html',
          'config' => [
              'cssFile' => 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'
          ]
      ],
      GridView::CSV => [
          'label' => Yii::t('kvgrid', 'CSV'),
          'icon' => $isFa ? 'file-code-o' : 'floppy-open', 
          'iconOptions' => ['class' => 'text-primary'],
          'showHeader' => true,
          'showPageSummary' => true,
          'showFooter' => true,
          'showCaption' => true,
          'filename' => Yii::t('kvgrid', 'grid-export'),
          'alertMsg' => Yii::t('kvgrid', 'The CSV export file will be generated for download.'),
          'options' => ['title' => Yii::t('kvgrid', 'Comma Separated Values')],
          'mime' => 'application/csv',
          'config' => [
              'colDelimiter' => ",",
              'rowDelimiter' => "\r\n",
          ]
      ],
      GridView::TEXT => [
          'label' => Yii::t('kvgrid', 'Text'),
          'icon' => $isFa ? 'file-text-o' : 'floppy-save',
          'iconOptions' => ['class' => 'text-muted'],
          'showHeader' => true,
          'showPageSummary' => true,
          'showFooter' => true,
          'showCaption' => true,
          'filename' => Yii::t('kvgrid', 'grid-export'),
          'alertMsg' => Yii::t('kvgrid', 'The TEXT export file will be generated for download.'),
          'options' => ['title' => Yii::t('kvgrid', 'Tab Delimited Text')],
          'mime' => 'text/plain',
          'config' => [
              'colDelimiter' => "\t",
              'rowDelimiter' => "\r\n",
          ]
      ],
      GridView::EXCEL => [
          'label' => Yii::t('kvgrid', 'Excel'),
          'icon' => $isFa ? 'file-excel-o' : 'floppy-remove',
          'iconOptions' => ['class' => 'text-success'],
          'showHeader' => true,
          'showPageSummary' => true,
          'showFooter' => true,
          'showCaption' => true,
          'filename' => Yii::t('kvgrid', 'grid-export'),
          'alertMsg' => Yii::t('kvgrid', 'The EXCEL export file will be generated for download.'),
          'options' => ['title' => Yii::t('kvgrid', 'Microsoft Excel 95+')],
          'mime' => 'application/vnd.ms-excel',
          'config' => [
              'worksheet' => Yii::t('kvgrid', 'ExportWorksheet'),
              'cssFile' => ''
          ]
      ],
      GridView::PDF => [
          'label' => Yii::t('kvgrid', 'PDF'),
          'icon' => $isFa ? 'file-pdf-o' : 'floppy-disk',
          'iconOptions' => ['class' => 'text-danger'],
          'showHeader' => true,
          'showPageSummary' => true,
          'showFooter' => true,
          'showCaption' => true,
          'filename' => Yii::t('kvgrid', 'grid-export'),
          'alertMsg' => Yii::t('kvgrid', 'The PDF export file will be generated for download.'),
          'options' => ['title' => Yii::t('kvgrid', 'Portable Document Format')],
          'mime' => 'application/pdf',
          'config' => [
              'mode' => 'c',
              'format' => 'A4-L',
              'destination' => 'D',
              'marginTop' => 20,
              'marginBottom' => 20,
              'cssInline' => '.kv-wrap{padding:20px;}' .
                  '.kv-align-center{text-align:center;}' .
                  '.kv-align-left{text-align:left;}' .
                  '.kv-align-right{text-align:right;}' .
                  '.kv-align-top{vertical-align:top!important;}' .
                  '.kv-align-bottom{vertical-align:bottom!important;}' .
                  '.kv-align-middle{vertical-align:middle!important;}' .
                  '.kv-page-summary{border-top:4px double #ddd;font-weight: bold;}' .
                  '.kv-table-footer{border-top:4px double #ddd;font-weight: bold;}' .
                  '.kv-table-caption{font-size:1.5em;padding:8px;border:1px solid #ddd;border-bottom:none;}',
              'methods' => [
                  'SetHeader' => [
                      ['odd' => $pdfHeader, 'even' => $pdfHeader]
                  ],
                  'SetFooter' => [
                      ['odd' => $pdfFooter, 'even' => $pdfFooter]
                  ],
              ],
              'options' => [
                  'title' => $title,
                  'subject' => Yii::t('kvgrid', 'PDF export generated by kartik-v/yii2-grid extension'),
                  'keywords' => Yii::t('kvgrid', 'krajee, grid, export, yii2-grid, pdf')
              ],
              'contentBefore'=>'',
              'contentAfter'=>''
          ]
      ],
      GridView::JSON => [
          'label' => Yii::t('kvgrid', 'JSON'),
          'icon' => $isFa ? 'file-code-o' : 'floppy-open',
          'iconOptions' => ['class' => 'text-warning'],
          'showHeader' => true,
          'showPageSummary' => true,
          'showFooter' => true,
          'showCaption' => true,
          'filename' => Yii::t('kvgrid', 'grid-export'),
          'alertMsg' => Yii::t('kvgrid', 'The JSON export file will be generated for download.'),
          'options' => ['title' => Yii::t('kvgrid', 'JavaScript Object Notation')],
          'mime' => 'application/json',
          'config' => [
              'colHeads' => [],
              'slugColHeads' => false,
              'jsonReplacer' => null,
              'indentSpace' => 4
          ]
      ],
  ];
  

  Note:

  You can choose to display only the download formats you want in the export menu and reorder them as you need. To hide a format, just do not add it to exportConfig. For example, to reorder the menu, to show CSV first, then HTML and PDF, and totally hide the rest, you could do this:

  'exportConfig' => [
      GridView::CSV => ['label' => 'Save as CSV'],
      GridView::HTML => [// html settings],
      GridView::PDF => [// pdf settings],
  ]
  

  You should note that, each format within the exportConfig needs to be set as an array.

Usage

use kartik\grid\GridView;

echo GridView::widget([
    'dataProvider'=> $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,
    'toolbar'=>[
        '{export}',
        '{toggleData}'
    ]
]);

• toolbar: array, same as the settings for toolbar in the toolbar section. The special tag {toggleData} will be replaced with the toggle button.

• toggleDataOptions: array, the settings for the toggle data button for the toggle data type. This will be setup as an associative array of $type => $options, where:

  • $type: string, is the type of data to display. Should be one of:

    • all: toggle button settings for all grid data display

    • page: toggle button for showing first page data

  • $options: array, is the HTML attributes for the button. The following special options are recognized:

    • icon: string, the glyphicon suffix name. If not set or empty will not be displayed.

    • label: string, the label for the button.

  The toggleDataOptions defaults to the following setting:

  [
      'all' => [
          'icon' => 'resize-full',
          'label' => Yii::t('kvgrid', 'All'),
          'class' => 'btn btn-secondary btn-default',
          'title' => 'Show all data'
      ],
      'page' => [
          'icon' => 'resize-small',
          'label' => Yii::t('kvgrid', 'Page'),
          'class' => 'btn btn-secondary btn-default',
          'title' => 'Show first page data'
      ],
  ]
  

Allows configuration of GridView to be enclosed in a panel that can be styled as per Bootstrap 5.x / 4.x / 3.x CSS markup. The panel will enable configuration of various sections to embed content/buttons, before and after header, and before and after footer.

• panel: array, the panel settings. If this is set, the grid widget will be embedded in a Bootstrap panel. Applicable only if bootstrap is true. The following array keys are supported:

  • type: string, the Bootstrap contextual color type. Should be one of the GridView TYPE constants below. If not set will default to default or GridView::TYPE_DEFAULT.

    • GridView::TYPE_DEFAULT or 'default'

    • GridView::TYPE_PRIMARY or 'primary'

    • GridView::TYPE_SECONDARY or 'secondary'

    • GridView::TYPE_INFO or 'info'

    • GridView::TYPE_DANGER or 'danger'

    • GridView::TYPE_WARNING or 'warning'

    • GridView::TYPE_SUCCESS or 'success'

    • GridView::TYPE_LIGHT or 'light'

    • GridView::TYPE_DARK or 'dark'

  • heading: string|boolean, the panel heading. To hide and disable this section completely, set this to false.

  • headingOptions: array, HTML attributes for the heading container. Defaults to ['class'=>'panel-heading'].

  • footer: string|boolean, the panel footer. To hide and disable this section completely, set this to false.

  • footerOptions: array, HTML attributes for the footer container. Defaults to ['class'=>'panel-footer'].

  • before: string|boolean, the panel content to be placed before/above the grid table (after the panel heading). To hide and disable this section completely, set this to false.

  • beforeOptions: array, HTML attributes for the before container. Defaults to ['class'=>'kv-panel-before'].

  • after: string|boolean, the panel content to be placed after/above the grid table (before the panel footer). To hide and disable this section completely, set this to false.

  • afterOptions: array, HTML attributes for the after container. Defaults to ['class'=>'kv-panel-after'].

Usage

use kartik\grid\GridView;

// Create a panel layout for your GridView widget
echo GridView::widget([
    'dataProvider'=> $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,
    'panel' => [
        'heading'=>'<h3 class="panel-title"><i class="fas fa-globe"></i> Countries</h3>',
        'type'=>'success',
        'before'=>Html::a('<i class="fas fa-plus"></i> Create Country', ['create'], ['class' => 'btn btn-success']),
        'after'=>Html::a('<i class="fas fa-redo"></i> Reset Grid', ['index'], ['class' => 'btn btn-info']),
        'footer'=>false
    ],
]);

The grid layout templates have been enhanced for enclosing in the panel. You can create your own template by setting the following parameter:

• layout: string, will be automatically set based on panel settings. If panel is a valid array, the layout will default to the panelTemplate property. If panel property is set to false, the layout defaults to {summary}\n{items}\n{pager}.

  Note

  You can use the following additional special variables in the grid layout property:

  • {export}: Will be replaced with the grid export button menu.

  • {toolbar}: Will be replaced with the toolbar property set.

• panelTemplate: string, the template for rendering the entire panel layout. The following special variables are recognized and will be replaced:

  • {type}: The panel contextual type (one of the GridView TYPE constants).

  • {panelHeading}: The panel heading block which will be rendered using panelHeadingTemplate.

  • {panelBefore}: The content to be placed before the grid header and after the panel heading. This will be rendered using panelBeforeTemplate.

  • {panelAfter}: The content to be placed after the grid footer and before the panel footer. This will be rendered using panelAfterTemplate.

  • {panelFooter}: The panel footer block which will be rendered using panelFooterTemplate.

  • {summary}: Will be replaced with the GridView summary information.

  • {items}: The grid table content.

  • {sort}: The grid sort content.

  • {pager}: The grid pager content.

  The panelTemplate defaults to:

  <div class="panel {type}">
      {panelHeading}
      {panelBefore}
      {items}
      {panelAfter}
      {panelFooter}
  </div>
  

• panelHeadingTemplate: string, the template for rendering the panel heading block. The following special variables are recognized and will be replaced:

  • {title}: The panel heading title text/content.

  • {summary}: Will be replaced with the GridView summary information.

  • {items}: The grid table content.

  • {sort}: The grid sort content.

  • {pager}: The grid pager content.

  • {export}: Will be replaced with the grid export button menu.

  • {toolbar}: Will be replaced with the toolbar property set.

  The panelHeadingTemplate defaults to:

  {summary}
  {title}
  <div class="clearfix"></div>
  

• panelBeforeTemplate: string, the template for rendering the panel before block. The following special variables are recognized and will be replaced:

  • {before}: The before text/content which will be passed via panel['before'] setting.

  • {summary}: Will be replaced with the GridView summary information.

  • {items}: The grid table content.

  • {sort}: The grid sort content.

  • {pager}: The grid pager content.

  • {export}: Will be replaced with the grid export button menu.

  • {toolbarContainer}: Will be replaced with the render toolbar container. See GridView::renderToolbarContainer().

  • {toolbar}: Will be replaced with the toolbar property set.

  The panelBeforeTemplate defaults to:

  {toolbarContainer}
  {before}
  <div class="clearfix"></div>
  

• panelAfterTemplate: string, the template for rendering the panel after block. The following special variables are recognized and will be replaced:

  • {after}: The after text/content which will be passed via panel['after'] setting.

  • {summary}: Will be replaced with the GridView summary information.

  • {items}: The grid table content.

  • {sort}: The grid sort content.

  • {pager}: The grid pager content.

  • {export}: Will be replaced with the grid export button menu.

  • {toolbarContainer}: Will be replaced with the render toolbar container. See GridView::renderToolbarContainer().

  • {toolbar}: Will be replaced with the toolbar property set.

  The panelAfterTemplate defaults to:

  {after}
  

• panelFooterTemplate: string, the template for rendering the panel footer block. The following special variables are recognized and will be replaced:

  • {footer}: The footer text/content which will be passed via panel['footer'] setting.

  • {summary}: Will be replaced with the GridView summary information.

  • {items}: The grid table content.

  • {sort}: The grid sort content.

  • {pager}: The grid pager content.

  • {export}: Will be replaced with the grid export button menu.

  • {toolbar}: Will be replaced with the toolbar property set.

  The panelFooterTemplate defaults to:

  <div class="kv-panel-pager">
      {pager}
  </div>
  {footer}
  <div class="clearfix"></div>
  

The grid offers ability to plugin components or widgets. The export property has been enhanced to add additional items for export if needed through external code. In addition, one can virtually define their own tags in the grid layout - and dynamically replace them via code at runtime. This is achievable by setting the following property for the grid:

• replaceTags: array, tags to replace in the rendered layout. Enter this as an associative array of the format $key => $callback, where:

  • $key: string, is the token you wish to replace. You can define any token tag and use it in your layout template.

  • $callback: string|array, the callback function name that will return the value to be replaced. This can be a global function name or a callback setting in an array format as understood by PHP's call_user_func_array method. For example:

    As a function name:

    function renderTag1() {	// global function
    	$string = ''; // do your stuff to render;
    	return $string;
    };
    echo GridView::widget([
    	'replaceTags' => [
    		'{tag1}' => 'renderTag1'
    	]
    	// other gridview settings
    ]);
    

    Alternatively you can return a function name from your class / object as an array format. For example:

    class YourClass {
    	public function renderToken2() {		// object function
    		$string = ''; // do your stuff to render;
    		return $string;
    	}
    	
    	public static function renderToken3() {	// static function
    		$string = ''; // do your stuff to render;
    		return $string;
    	}
    	
    	public function render() {
    		return GridView::widget([
    			'replaceTags' => [
    				'{token2}' => [$this, 'renderToken2'],
    				'{token3}' => [YourClass::class, 'renderToken3']
    			]
    			// other gridview settings
    		]);
    	}
    }
    

• itemLabelSingle: string, the default label shown for each record in the grid (singular). This label will replace the singular word item within the grid summary text as well as the ActionColumn default delete confirmation message.

• itemLabelPlural: string, the default label shown for each record in the grid (plural). This label will replace the singular word items within the grid summary text.

• itemLabelFew: string, the default label shown for each record in the grid (plural). This is similar to itemLabelPlural but this is applicable for languages like Russian, where the plural label can be different for fewer item count. This label will replace the plural word items-few within the grid summary text.

• itemLabelMany: string, the default label shown for each record in the grid (plural). This is similar to itemLabelPlural but this is applicable for languages like Russian, where the plural label can be different for fewer item count. This label will replace the plural word items-many within the grid summary text.

Usage

use kartik\grid\GridView;
use yii\helpers\Html;

// shows how you can add in your own tags e.g. {custom}
$layout = <<< HTML
<div class="float-right">
    {summary}
</div>
{custom}
<div class="clearfix"></div>
{items}
{pager}
HTML;

// Plugin components using `replaceTags`
echo GridView::widget([
    'dataProvider'=> $dataProvider,
    'filterModel' => $searchModel,
    'columns' => $gridColumns,
    'layout' => $layout,
    'replaceTags' => [
        '{custom}' => function($widget) {
            // you could call other widgets/custom code here
            if ($widget->panel === false) {
                return '';
            } else {
                return '';
            }
        }
    ]
]);

'columns' => [
    [
        'class' => '\kartik\grid\DataColumn',
        'attribute' => 'amount',
        'pageSummary' => true
    ]
]

The following jQuery plugin events are available for the expand row column. Each of these events are triggered on the grid element identified by grid's options[id].

• kvexprow:toggle: This event is triggered on toggling an expand column in each table row and will trigger for either expand or collapse. The event sends the following parameters for advanced parsing:

  • ind: int, the row index

  • key: mixed, the row key

  • extra: object, the extra data object set as key value pairs via the ExpandRowColumn extraData property

  • state: boolean, whether expanded true or collapsed false.

  var $grid = $('#grid-id');
  $grid.on('kvexprow:toggle', function (event, ind, key, extra, state) {
      console.log('Toggled expand row');
  });
  

• kvexprow:toggleAll: This event is triggered on toggling all rows by clicking the toggle indicator on the table header. The event sends the following parameters for advanced parsing:

  • extra: object, the extra data object set as key value pairs via the ExpandRowColumn extraData property

  • state: boolean, whether expanded true or collapsed false.

  var $grid = $('#grid-id');
  $grid.on('kvexprow:toggleAll', function (event, extra, state) {
      console.log('Toggled all rows');
  });
  

• kvexprow:beforeLoad: This event is triggered before the call to ajax load. This occurs when you set the detailUrl property in ExpandRowColumn for triggering the ajax call to load expanded content.

  • ind: int, the row index

  • key: mixed, the row key

  • extra: object, the extra data object set as key value pairs via the ExpandRowColumn extraData property

  var $grid = $('#grid-id');
  $grid.on('kvexprow:beforeLoad', function (event, ind, key, extra) {
      console.log('Before ajax load.');
  });
  

• kvexprow:loaded: This event is triggered after the ajax content has been successfully loaded. This occurs when you set the detailUrl property in ExpandRowColumn for triggering the ajax call to load expanded content.

  • ind: int, the row index

  • key: mixed, the row key

  • extra: object, the extra data object set as key value pairs via the ExpandRowColumn extraData property

  var $grid = $('#grid-id');
  $grid.on('kvexprow:loaded', function (event, ind, key, extra) {
      console.log('After ajax load completed.');
  });
  

'columns' => [
    [
        'class' => '\kartik\grid\FormulaColumn',
        'value' => function ($model, $key, $index, $widget) {
            $p = compact('model', 'key', 'index');
            // Write your formula below
            return $widget->col(3, $p) + $widget->col(4, $p);
        }
    ]
]

'columns' => [
    [
        'class' => '\kartik\grid\BooleanColumn',
        'trueLabel' => 'Yes', 
        'falseLabel' => 'No'
    ]
]

'columns' => [
    // Example 1
    [
         'class' => 'kartik\grid\EnumColumn',
         'attribute' => 'role',
         'enum' => User::getRoles(), // returns a value => content pair
         'loadEnumAsFilter' => true, // optional - defaults to `true`
    ],
    // Example 2
    [
         'class' => 'kartik\grid\EnumColumn',
         'attribute' => 'gender',
         'enum' => [
             '0' => '<span class="text-muted">Unknown</span>',
             'F' => '<span class="text-success">Female</span>',
             'M' => '<span class="text-danger">Male</span>',
         ],
         'filter' => [  // will override the grid column filter (i.e. `loadEnumAsFilter` will be parsed as `false`)
             '0' => 'Unknown',
             'F' => 'Female',
             'M' => 'Male',
         ],
    ]
]

'columns' => [
    [
        'class' => '\kartik\grid\RadioColumn'
    ]
]

You can listen to the following jQuery events via javascript, to capture the rows selected via the radio column.

• grid.radiochecked: Triggered when a row is selected using the radio input.

• grid.radiocleared: Triggered when a radio input is cleared using the clear button on the header.

Both of the events returns the following parameters for access:

• key: string, the primary key value for the row

• val: string, the value of the selected radio input

For example

var $grid = $('#grid-id'); // your grid identifier 

$grid.on('grid.radiochecked', function(ev, key, val) {
    console.log("Key = " + key + ", Val = " + val);
});

$grid.on('grid.radiocleared', function(ev, key, val) {
    console.log("Key = " + key + ", Val = " + val);
});

'columns' => [
    [
        'class' => '\kartik\grid\CheckboxColumn'
    ]
]

You can get the checked rows very similar to how you would do it for a default yii\grid\CheckboxColumn. Users may click on the checkboxes to select rows of the grid. The selected rows may be obtained by calling the following JavaScript code:

var keys = $('#grid').yiiGridView('getSelectedRows');
// keys is an array consisting of the keys associated with the selected rows

'columns' => [
    [
        'class' => '\kartik\grid\ActionColumn',
        'deleteOptions' => ['label' => '<i class="fas fa-remove"></i>']
    ]
]

'columns' => [
    [
        'class' => '\kartik\grid\SerialColumn'
    ]
]