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

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( 'options'=>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', 'age', array( 'name' => 'login_date', 'header' => 'Login Date', ), array( 'class'=>'CLinkColumn', 'header' => 'Link', ), array( 'class'=>'CButtonColumn', ), array( 'class'=>'CCheckBoxColumn', ), ), ) ));
Here it is required to set (in ecolumns array):
Storage can be: db, session or cookie. Session and cookie can be used without any setup, but for 'db' you should create following table:
CREATE TABLE `tbl_columns` ( `id` VARCHAR(100) NOT NULL, `data` VARCHAR(1024) NULL DEFAULT NULL, PRIMARY KEY (`id`) );
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.
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!
Total 20 comments
hi, seems it's because column from related table as you mentioned. try to set header manually, e.g.
if I click the reset button in the dialog, the shop.sid field is lost.
shop is a relation table
hi, could you provide more details wich delete option you mean?
Extension does not have such option in config..
Here delete option is providing Error:500 can any one fix it..?
hi lifeinthefridge
in your example in search grid you defined 'columns' twice. I suppose it's the reason.
When using ecolumns you should define all columns in EColumnsDialog. In grid you just make link to it as
If you want you button columns to be shown always - use fixedRight property of ecolumns.
Hope this helps!
Hi! I would really like to utilize this great extension. However, I am having issues.
I cannot seem to retain the cgridview search functionality, as well as having my button customization remain with the extension functioning. Perhaps you have experience solving this issue?
I want to retain the same default columns I have defined I currently have in my gridview. I am not sure how to replace $dialog->columns() within my original implemenation and keep everything functioning
hi hehbhehb,
1.have you also changed 'id' => 'grid2' for CGridView widget itself?
2.I agree, it's nice to have pageSize, it allowes to setup whole layout in one dialog. Thanks, I will try find time to add it.
Hi artur_oliveira,
thanks for feedback! 1. For empty columns it is good idea, I will add it! 2. For button text I thought about it. I think we also should keep number of params at minimum, and I set only button html as more universal.
I noticed that the buttons text is hardcoded.
Could you please add a parameter to define only the button text instead off the all button
Thanks in advance
PS: Again great work!!!!!
Hi vitalets
Nice work !!!!
I found a small issue with your extension, if the columns array is empty then the dialog shows no entries.
To solve this i added a small piece of code:
In EColumns.php add the following in the init() function:
@Patrigan: hi, I see two ways for getting list of visible columns for this task:
You can use $dialog->columns() that returns array of columns with visible property according to layout (as well as it used in CGridView confing). But it seems to be too late because renedring usually starts after dataprovider initialization.
You can manually read visible columns from storage (session, db, cookie), it's just list separated by "|". But you also should pay attention that when user submits new layout, you need to read columns from POST, not storage (as storage was not updated yet)
hope this helps!
PS: for dublicated values in grid you may be intrested in my groupgridview extension :)
So I currently use this with an SQL Data Provider combining a many-many relationship. The request is as follows: When I throw everything together, I have a combination of every related model. For example: a training can have multiple attendees and a user can attend multiple trainings. So the user and the training will be multiplied. The table will also contain additional information of each training and each user. Now the issue is as follows: When I select only the trianing title, I get a lot of duplicates (obviously). So how can I solve this? My idea was simple, I would just look at which columns are currently shown and adjust my SQL accordingly. At this point, however, I have been unable to find out where I could look at a list of enabled columns. Any ideas?
@nitropenta: I also work with redmine :) Saving named column layouts is very usefull sometimes, I will think about it. But I assume it should be another widget as this feature is not always required.
Thank you!
Hi, I have the next big wish for the next version: save the columns adustment.
I work with the ticket system Redmine. Redmine have a similar feature at the filter options - you can see this at www.redmine.org/projects/redmine/wiki/RedmineIssueList#Applying-and-saving-filters
In a big table can I save different views with a name and reopen the adjustment with a link - and I should delete the link with an icon.
Yes! its christmas time ;-)
@dkrochmalny:
1.I've modified code for pulling headers from attribute labels. For this you need to set model parameter in ecolumns config. Thanks for idea!
2.Reset button is managed by parameter buttonReset. But it should be visible by default. Could you re-check once again?
nitropenta
Thanks. One suggestion, the window that displays the columns should pull the name from the label that is set up in the model instead of the header part of the column set up.
Thanks again.
Also, I just downloaded the new file and put it in the extensions directory, and no reset button. Is there an option to configure?
Hi all, I've added reset button for putting columns in default order.
@nitropenta:
concerning columns IDs I think it's better not to stick CSS-Style to generated column_id.
It's better to give column a css class name in config.
E.g.:
and in css:
Hi vitalets,
I have another annotation: If you reorder the colums so have any colums a new tabel-head-id
e.g. Start:
after reorder:
hmmm... I see any "problems" with any fixed CSS-Styles e.g. I have for the age-column a special style like
is this after the reorder obsolete.
A solution is maybe to fix the id at column...??
after reorder new:
Thanks
Leave a comment
Please login to leave your comment.