ecolumns Manage column's visibility and order in GridView

  1. Requirements
  2. Usage
  3. Change log

EColumns provides widgets for managing column's visibility and order in GridView.
Please, try out a demo. Screenshot


Developed and tested on Yii 1.1.10


1.Put ecolumns from zip to protected/extensions directory.
Extensions contains two widgets:
EColumns - widget based on [CJuiSortable] that can be attached to [CGridView] and allows to manage columns. This widget is always shown on the screen.
EColumnsDialog - dialog based on [CJuiDialog] that includes EColumns and allows to manage columns of CGridView as well.

2.Create required widget in view.
For example, dialog:

$dialog = $this->widget('ext.ecolumns.EColumnsDialog', array(
            'title' => 'Layout settings',
            'autoOpen' => false,
            'show' =>  'fade',
            'hide' =>  'fade',
       'htmlOptions' => array('style' => 'display: none'), //disable flush of dialog content
       'ecolumns' => array(
            'gridId' => 'grid1', //id of related grid
            'storage' => 'db',  //where to store settings: 'db', 'session', 'cookie'
            'fixedLeft' => array('CCheckBoxColumn'), //fix checkbox to the left side 
            'model' => $dataProvider->model, //model is used to get attribute labels
            'columns' => array(
                  'name' => 'login_date',
                  'header' => 'Login Date',
                 'header' => 'Link',

Here it is required to set (in ecolumns array):

  • gridId - id of related GridView widget
  • storage - where to store column settings
  • columns - all columns that potentially can be seen in gridview

Storage can be: db, session or cookie. Session and cookie can be used without any setup, but for 'db' you should create following table: ~~~ [sql] CREATE TABLE tbl_columns (


); ~~~ 3.Attach widget to [CGridView]:

$this->widget('zii.widgets.grid.CGridView', array(
       'id' => 'grid1',
       'dataProvider' => $dataProvider,
       'columns' => $dialog->columns(),
       'template' => $dialog->link()."{summary}\n{items}\n{pager}",

$dialog->columns() returns columns that are currently visible.
$dialog->link() returns link openning dialog. You can place it anywhere in template property or even outside the grid.

4.Additional parameters:
fixedLeft, fixedRight - array of column names that are fixed on left or right side of grid and cannot be modified by user. Useful for [CCheckBoxColumn] and [CButtonColumn].
userSpecific (boolean) - store settings for each user or for grid globally. Defaults to true.
model - model for getting attribute labels as column headers
buttonApply - html for apply button. Default: <input type="submit" value="Apply" style="float: left">
buttonCancel - html for cancel button. Default: null
buttonReset - html for reset button. Default: <input type="button" class="reset" value="Reset" style="float: right">. CSS class "reset" is required for this button.

If you do not need dialog, you can use EColumns widget itself or inside your own widgets. Parameters of EColumns widget are the same as in ecolumns array config in EColumnsDialog.

Change log

May, 9

  • Column headers are taken from attribute labels (for array column definitions)

May, 8

  • Added reset button
  • Column headers are taken from attribute labels

April, 30
Initial Release

All comments are welcome!

27 0
2 572 downloads
Yii Version: 1.1
License: BSD-2-Clause
Category: User Interface
Developed by: Vitalets
Created on: Apr 30, 2012
Last updated: 11 years ago


show all

Related Extensions