Yii2 Grid

This is the forum for the yii2-grid extension.

Yii2 GridView on steroids. 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.

The demo page is in process and will be updated soon.

FYI - the [size="4"]DEMO PAGE[/size] 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.

Upgrade to v1.1.0. Various new enhancements to the templates, including GRID EXPORT to HTML, CSV, and EXCEL FORMATS. It uses a newly developed JQuery plugin to export the DISPLAYED grid as HTML/CSV. The excel format is being worked upon.

Refer the UPDATED documentation and demos.

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.

Hello Kartik

First thank you for your distributions and good ideas. I’m wondering why your grid, helpers and the active form widget aren’t used in the core of Yii2.

Concerning the grid widget I have a question and an idea for further features.

  1. Why does your PJAX work with filters (in your demo) while the original grid doesn’t work in my test app? Could you publish the source code of your demo page?

  2. Filtering is a good possibility but it can’t be stored. My idea is to have an enrichment which could be added to your grid. This extension should a selection box and a button. If you push the button you get a dialog in which you can add a filter name and you can reorder the columns including hiding. If you store this name then the current filter settings, sort order, column order will be stored under the grid name, filter name and user in the database. One name should be marked as default if the grid is rendered first time.

The administrator should store such settings under a default user and filter name in addition which are available for all users. These entries per grid can’t be deleted by the user.

Such a class would help to have configured grids in an application per example records with a status "active". If user want to see historical data he can change the filter settings easily by selecting another filter name.

Hi Kartik

You might show the complete configuration in the example of the DataGrid?

regards

Domingo

On the demo page, click on the Grid Columns Setup button on the top and you will get the configuration code of all the grid columns used for the demo. That is the major part.

The other settings for the table settings, panel etc. are properties which you can directly relate to from the documentation.

You are welcome! Note: Most of my extensions use the inherent/core Yii 2.0 functionality and extensibility - probably that’s the reason why some of these extensions are useful. Also, I just have my interpretation and ideas on some of these stuff and shared them with community - not sure everyone may need it the way I thought of. Glad, that its useful for you.

Nothing special in the demo app. You would need to enclose the GridView widget between Pjax::begin(); and Pjax::end();. If you already have done that, you may want to look if your vendor folder is updated for latest yii release (run a composer update)

Thanks for the suggestion. The only challenge with such a requirement, is it requires a database or some storage mechanism to save such configs. At this stage, most extensions I have do not have any specific database requirements (as that may change from case to case). But still, if this is needed by many, I will build this once I have time. Maybe you can record an issue/enhancement request on github and I would consider it when I have time.

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.

The grid ActionColumn has been enhanced to include the option of rendering the action buttons as a dropdown menu. Check the updated demo.

Hi Kartik,

how does your great GridView extension work with filter type GridView::FILTER_DATE? I have stored unix timestamps in my application database and I am not sure, what kind of data the ‘filter’ attribute expects.

Thank you very much in advance.

The GridView::FILTER_DATE will render the kartik\widgets\DatePicker widget. Refer docs for DatePicker widget on options supported.

You need to pass the format options for displaying the date in DatePicker. Use the filterWidgetOptions property:




'filterWidgetOptions' => [

   'pluginOptions'=>['format' => 'dd-mm-yyyy']

]



Also, you need to convert back the date time to a user friendly format for display in your grid column. So your complete column looks like this




[

    'attribute'=>'publish_date',

    'value'=>function ($model, $index, $widget) {

        return date("d-M-Y", $model->publish_date);

    },

    'filterType'=>GridView::FILTER_DATE,

    'filterWidgetOptions' => [

        'pluginOptions'=>['format' => 'dd-mm-yyyy']

    ]

],



Then in your model->search function you need to convert this date format back to unix timestamp before filter query is executed. Something like




$timestamp = date_create_from_format("d-M-Y", $model->publish_date);

$model->publish_date = date("U", $timestamp); 



The latest version of the module is v1.5.0 released on 04-Jul-2014. With this release, the GridView now offers you to add customized header and footer rows above/below the default header.

Refer updated documentation and updated demo.

The latest version of the module is v1.6.0 released on 10-Jul-2014. Refer the CHANGE LOG for details. Also refer updated documentation and demo.

I think that your GridView should be default Yii2 GridView, but it could be better :rolleyes:

I don’t know if there is a way to group columns in your GridView, so I’ve added it to Yii2 by myself, but my code isn’t nice and I’m sure you can make it better.

I know that there is some ‘group columns’ that generate HTML tag ‘colgroup’ [in 2amigos editable grid extension as I remember], but with this I can only edit CSS of ‘group’.

I think that many users need real ‘group columns’ - possiblity to put few model attributes in one column.

Example: I got model ‘Users’ with 4 attributes ‘name, surname, email, phone’ and I want display it in 3 (not 4!) columns ‘Name Surname, E-mail, Phone’.

(‘column group’ configurable header [ex. ‘Name’ in place of ‘Name Surname’] could be nice, but then ‘order by’ won’t work proper [ex. sort by Surname when I click on Surname]))

My ‘GroupColumnsGridView’ class:

link: [color="#FF8C00"]paste.ots.me/560725/text[/color]

Example view code [just idea, not tested code]:

(example code merge columns ‘name’ and ‘surname’ [headers,filters and values] into one column ‘Name, Surname’ - columns should export in this format, column values should be editable by EditableColumn [2amigos extension], columns should be filterable and sortable)

link: [color="#FF8C00"]paste.ots.me/560724/text[/color]

and now worst part of my code… I had to edit Yii2 ‘Column’ class to make it store ‘group’ attribute and return array(‘content’ => ‘…’, ‘options’ => ‘…’) in place of <td option=“optionvalue” …>content</td> for grouped columns.

My modified Column class:

link: [color="#FF8C00"]paste.ots.me/560726/text[/color]

5760

GRIDCOLUMNS.jpg

Practice_OPL thanks for your feedback. Could you create an enhancement on Github with your proposed code or maybe a PR? I could not see all of your pasted/linked code/images due to some reason.

I just did get to see your code by pasting the links in a new window. It may still be great if you can help create a PR for better tracking.

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

Kartik-V… Your extension always awesome… it many help me to develop app…

I and maybe many people that using editable column maybe have trouble when using PJAX too…

This error is EditableColumn not work when Gridview refresh/reload with PJAX… and I see in Your demo

http://demos.krajee.com/grid-demo

You use PJAX too??

Okey lets follow my trial…

  1. Open http://demos.krajee.com/grid-demo

  2. Klik editable in column name and we get editable form popup… (okey its work)

  3. Klik Reset Grid button in right top left Gridview

  4. Klik again editable in column name… eng ing eng… Its not work…

Extension upgraded to release v1.9.0 with various new Pjax enhancements. Refer documentation and demos for the various settings. Extension now includes Pjax support by default - you do not need to enclose it within Pjax widget.