How to customize your grid columns visible and order by user themselves

How-tos

Grid, Columns, Customize, Hide, Show, Order, ScottHuang, Hzl

Goal -------- Cusomized your grid columns by user themselves, allow user to **hide/show columns or re-order the columns sequences**. Sample Picture -------- The final result look like below, you can hide/show any columns. You can type the order to re-sort the columns after save the config. You can input -1 to put it in first columns. After save, the index will reorder from 1 to the max. IfThe export to excel function will affected by the final resorted columns in case you use my export grid to excel extends [hzlexportgrid](http://www.yiiframework.com/extension/hzlexportgrid "http://www.yiiframework.com/extension/hzlexportgrid") too, the export function will affected by the final resorted columns too, Since that export extention just depends on the grid columns configs, and that columns been customized by user themselves just now.Below code will help you save user configs or reset it and redirect to the destination

Some helper function list details in last session,** you can deep dive HzlUtil::xxxFunction later** ```php //your other controller code if (isset($_POST['columnsVisibleConfigArr'])) { HzlUtil::saveConfigColumns(NPIPartRegion::IndexBuyerViewColumnSetting, $_POST['columnsVisibleConfigArr']); //we need save to user config } if (isset($_POST['resetColumnsVisibleConfigArr'])) { // HzlUtil::dump($_POST['resetColumnsVisibleConfigArr']); HzlUtil::deleteConfigColumns(NPIPartRegion::IndexBuyerViewColumnSetting);
$this->redirect(array("NPIPartRegion/searchNPI"));//you can set to your index file
}a.Register JS
--------
Add below code into view file, it try to register thse JS. **Note, the #npipart-region-grid id need same aschange to your own grid id.** You can paste ibelow code right after your old JS code in your view file

```php```
$columnsByRole will use in your grid. The parameter $specificID you can ignore or remove.
$model->BuyerColumns($specificId);  defined before, you can replace by your own get columns function:) just need in that function to do some special handles. in that function.** It state before, let me highlight again herebelow:**b.Show Config Columns link
--------
Add below code under the search link, it try to show the "Config Columns" link.
 
You can adjust style by yourself, just need keep that **'class' => 'config-columns-button'**


```php```

c.Add renderpartial render code in your view file --------
 
Usually it put in your view folder, name as _columnsVisibleConfig.php
 
And then you can render partial this file in your view fileyou have search code in your view file, please add below config columns code right after it. It try to partial render the **_columnsVisibleConfig.php** .

```phpd.Theat partial render real file -------- Usually it put in your view folder, name as _columnsVisibleConfig.php
 
And then you can partial render this file in your view file.
 
 
 

```php
<?php
$tempGridLength = $gridLength;
?>