Yii 2.0: yii2-grid

GridView enhancements and utilities for Yii Framework 2.0.
37 followers

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.

GridView Screenshot

Latest Release

The latest version of the module is v2.7.0 released on 01-Dec-2014. Refer the CHANGE LOG for details.

New features in release 2.7.0.

  1. A brand new column ExpandRowColumn has been added which allows one to expand grid rows, show details, or load content via ajax. Check the ExpandRowColumn documentation for further details. The features available with this column are:
    • Ability to expand grid rows and show a detail content in a new row below it like a master detail record.
    • Allows configuring the column like any grid DataColumn. The value of the column determines if the row is to be expanded or collapsed by default.
    • Allows you to configure/customize the expand and collapse indicators.
    • Ability to configure only specific rows to have expand/collapse functionality.
    • Ability to disable the expand / collapse behavior and indicators for selective rows.
    • Allows you to configure the detail content markup directly in the column configuration (using detail property). This can be set as a HTML markup directly or via Closure callback using column parameters.
    • Allows you to load the detail content markup via ajax. Set the detailUrl property directly or via a Closure callback using column parameters.
    • Automatically caches the content loaded via ajax so that the content is rendered from local on toggling the expand/collapse indicators, until the grid state is changed via filtering, sorting, or pagination.
    • Ability to batch expand or batch collapse grid rows from the header. If content is loaded via ajax, the batch expand and collapse will fire the ajax requests to load and use intelligently from cache where possible.
  2. Included prepend and append settings within pageSummaryOptions to prepend/append content to page summary.
  3. All asset (JS & CSS) files have been carefully isolated to only load them if the specific grid feature has been selected.
  4. Enhancements for JS confirmation popups being hidden by browser's hide dialog settings.
  5. Recursively replace/merge PDF export configuration correctly.
  6. Include demo messages for auto generating via config.

Note: This extension depends on other yii2 extensions based on the functionality chosen by you. It will not install such dependent packages by default, but will prompt through an exception, if accessed. For example, if you choose to enable PDF export, then the yii2-mpdf will be mandatory and exception will be raised if yii2-mpdf is not installed. Check the composer.json for other extension dependencies.

Change Log

Refer the CHANGE LOG for details.

Module

The extension has been created as a module to enable access to advanced features like download actions (exporting as csv, text, html, or xls). You should configure the module with a name of gridview as shown below: php 'modules' => [ 'gridview' => [ 'class' => '\kartik\grid\Module' ] ],

GridView

\kartik\grid\GridView

The following functionalities have been added/enhanced:

Table Styling (Enhanced)

Control various options to style your grid table. Added containerOptions to customize your grid table container. Enhancements for grid and columns to work with yii\widgets\Pjax.

Pjax Settings (New)

Inbuilt support for Pjax. Enhancements for grid and columns to work with yii\widgets\Pjax. Auto-reinitializes embedded javascript plugins when GridView is refreshed via Pjax. Added pjax property to enable pjax and pjaxSettings to customize the pjax behavior.

Custom Header & Footer (New)

Add custom header or footer rows, above / below your default grid header and footer.

Floating Header (New)

Allows the grid table to have a floating table header. Uses the JQuery Float THead plugin to display a seamless floating table header.

Panel (New)

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

Toolbar (New)

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 is by default appended to the toolbar. 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 configured as a simple array. Refer the docs and demos for details.

Grid Plugins (New)

The grid now offers ability to plugin dynamic content to your grid at runtime. A new property replaceTags has been added with v2.3.0. This allows you to specify tags which will be replaced dynamically at grid rendering time and wherever you set these tags in any of the grid layout templates.

Page Summary (New)

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. 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'].

Export Grid Data (New)

This is a new feature added to the GridView widget. It allows you to export the displayed grid content as HTML, CSV, TEXT, EXCEL, PDF, & JSON. It uses the rendered grid data on client to convert to one of the format specified using JQuery. This is supported across all browsers. The PDF rendering is achieved through a separate extension yii2-mpdf.

Features offered by yii2-grid export:

  • 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 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.
    • skip-export-pdf: Will skip this element during export only for pdf export format.
    • skip-export-json: Will skip this element during export only for json export format. These CSS can be set virtually anywhere. For example headerOptions, contentOptions, beforeHeader etc.
  • With release v2.1.0, you can now merge additional action items to the export button dropdown.
  • With release v2.3.0 the export functionality includes these additional features:
    • A separate export popup progress window is now shown for download.
    • Asynchronous export process on the separate window - and avoid any grid refresh
    • Set export mime types to be configurable
    • Includes support for exporting new file types:
      • JSON export
      • PDF export (using yii2-mpdf extension)
    • Adds functionality for full data export
    • Enhance icons formatting for export file types (and beautify optionally using font awesome)
    • Ability to hide entire column from export using hiddenFromExport property, but show them in normal on screen display.
    • Ability to do reverse of above. Hide column in display but show on export using hidden property.
  • Adds ability to integrate a separate extension for full data export i.e. yii2-export.

Toggle Grid Data (New)

This extension (with v2.3.0) adds ability to toggle between viewing all grid data and paginated data. By default the grid displays paginated data. This can be used for exporting complete grid data.

Data Column (Enhanced)

\kartik\grid\DataColumn

The default Yii data column has been enhanced with various additional parameters. Refer documentation for details.

Expand Row Column (New)

\kartik\grid\ExpandRowColumn

An enhanced data column that allows one to expand a grid row and display additional/detail content in a new row below it either directly or via ajax. Refer documentation for details.

Editable Column (New)

\kartik\grid\EditableColumn

An enhanced data column that allows you to edit the cell content using kartik\editable\Editable widget. Refer documentation for details.

Formula Column (New)

\kartik\grid\FormulaColumn

This is a new grid column class that extends the \kartik\grid\DataColumn class. It allows calculating formulae just like in spreadsheets - based on values of other columns in the grid. The formula calculation is done at grid rendering runtime and does not need to query the database. Hence you can use formula columns within another formula column. Refer documentation for details.

Boolean Column (New)

\kartik\grid\BooleanColumn

This is a new grid column class that extends the \kartik\grid\DataColumn class. It automatically converts boolean data (true/false) values to user friendly indicators or labels (that are configurable). Refer documentation for details. The following are new features added since release v1.6.0:

  • BooleanColumn icons have been setup as ICON_ACTIVE and ICON_INACTIVE constants in GridView.

Action Column (Enhanced)

\kartik\grid\ActionColumn

Enhancements of \yii\grid\ActionColumn to include optional dropdown Action menu and work with the new pageSummary and a default styling to work for many scenarios. Refer documentation for details. The following are new features added since release v1.6.0: - 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.

Serial Column (Enhanced)

\kartik\grid\SerialColumn

Enhancement of \yii\grid\SerialColumn to work with the new pageSummary and a default styling to work for many scenarios. Refer documentation for details.

Checkbox Column (Enhanced)

\kartik\grid\CheckboxColumn

Enhancements of \yii\grid\CheckboxColumn to work with the new pageSummary and a default styling to work for many scenarios. Refer documentation for details.

Requirements

  • Yii 2.0 (dev-master)
  • PHP 5.4
  • Twitter Bootstrap 3.0

Note: This extension mandatorily requires Yii Framework 2. The framework is under active development and the first stable release of Yii 2 is expected in early 2014.

Installation

The preferred way to install this extension is through composer.

Either run:

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

or add:

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

to the require section of your composer.json file.

Demo

You can see detailed documentation and demonstration on usage of the extension.

Report

License

yii2-grid is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.

Resources

Total 13 comments

#18475 report it
Kartik V at 2014/11/04 08:48am
Yii2 Grid Release v2.2.0

As requested by many of you, the yii2-grid extension has been vastly enhanced... offering support for FULL DATA export (using a toggle button to move between page data and full data). In addition, it has various export functionality enhancements including NEW support for PDF and JSON formats. The PDF formatting can be used to generate reports as well.

#18407 report it
Kartik V at 2014/10/24 04:35pm
Grid extension updates

With latest release v2.1.0 - the extension offers ability to plugin external components in a much easier way - and has a revamped toolbar method.

#18350 report it
Scott_Huang at 2014/10/19 09:48am
Thanks.

Thanks.

#17985 report it
Kartik V at 2014/08/21 05:49pm
Pjax Upgrades with v1.9.0

Extension upgraded to v1.9.0 with various inbuilt Pjax enhancements.

#17858 report it
Kartik V at 2014/07/31 03:02pm
Editable Column

Editable Column has been added with new release v1.8.0. Refer documentation and demo for details.

#17698 report it
Kartik V at 2014/07/15 09:58am
Feedback and Pull Request

@sltech thanks for the feedback and glad you find the extension useful. You may also raise a new issue or submit a new pull request on github here for any proposed enhancements.

#17688 report it
Kartik V at 2014/07/14 11:17pm
Grid Layout Positioning

@sltech you may want to read the grid layout templates documentation. You can add the special tags {export} and {toolbar} to the layout to render the export dropdown button and the toolbar setting buttons.

Requirement # 1: Set panel to false, and set the layout property in the grid. You can check it in the demo as well. Without panel, you can set it to something as:

echo GridView::widget([
    'layout' => '<div class="pull-right">{export}</div>\n{summary}\n{items}\n{pager}',
    'panel' => false
]);

Requirement # 2: Exporting on screen data is the only option built in by default (because that's the more difficult part of reading the display from the client and passing it to the server for download). For exporting the full data, you can directly read the data from your dataProvider and can write a simple PHP function to do this for you. Since, this may vary by each individual's choice, as to what data, what format etc, this was not built into the grid (its basically a separate extension of the built in Yii DataProvider - to yield out formats for CSV, TEXT, XLS, etc.). If you feel, you may create a Pull Request to enhance this if you can generalize. Note that, the formatting and formulae need to be parsed by you for this case.

#17686 report it
sltech at 2014/07/14 04:21pm
Export button position and data export

Hi Kartik,

Thank you for such a wonderful work. I have become fan of this plugin after 2 days of use.

I have 2 questions related to positioning of the Export button & export data.

  1. I need to show grid in a tab and that is being done using partialRender. Now I dont want to show the grid panel but do want to show the export button & at the same location. If the template is changed it will be changed for all other grids in the application. how this can be done, because when i hide/comment the panel it doesn't show the export button.
  2. how can i give option to export on screen data & full data ?

Thanks

#16980 report it
Kartik V at 2014/04/18 01:50am
Enhancements version 1.3

The module has been upgraded to v1.3 (refer change log).

With translations contributed by couple of folks, have included a LANGUAGE selector to the grid demo. So you can check the translations as well.

#16787 report it
Kartik V at 2014/03/27 09:50am
Upgraded to ver 1.2.0

FYI... the yii2-grid extension has been enhanced:

  1. to work with all browsers in a more secure and reliable manner
  2. to support export of the displayed grid and download as HTML, TEXT, CSV, and EXCEL formats
  3. configurable file names for export
  4. configurable worksheet name for excel
  5. configurable column and row delimiters for export as TEXT or CSV
  6. i18n/translation enabled
  7. and the extension is a module now which has potential to add on more features later.

and more other features... Refer the updated documentation and demo.

#16772 report it
Kartik V at 2014/03/26 04:47pm
Grid Export Added and Templates Enhanced

The \kartik\grid\GridView extension is now updated to include the export feature for HTML and CSV formats (and EXCEL is in process) via a newly developed JQuery plugin. It allows you to export the grid data displayed on screen. You can refer the demo and documentation for the new features. The export plugin has some intelligence to detect the HTML5 download attribute for the supported modern browsers. Check the Export Data Button in the demo. The EXCEL export is being worked upon.

#16705 report it
Kartik V at 2014/03/21 10:11am
Demo Page Online

FYI - the demo page is online for this extension. The demo doubles up as a GridView configurator as well. You can configure various widget options dynamically and see the impact.

#16699 report it
Kartik V at 2014/03/20 04:07pm
Demo page will be updated soon

Demo page is in process and will be updated soon

Leave a comment

Please to leave your comment.

Create extension
Downloads
No downloadable files yet