Menangani CGridView yang lebar di Yii

Mungkin kita pernah membuat tampilan tabulasi menggunak CGridView Yii dengan ukuran yang lebar. Ukuran yang lebar ini membuat disain jadi terlihat tidak rapi. Untuk itu kita perlu solusi bagaimana data tetap dapat ditampilkan dengan baik tetapi tidak merusak disain. Kita dapat melakukan ini dengan menggunakan overflow-x dari CSS 3.

Secara teknis, kita perlu mengedit stylenya dengan :
.grid-view
{
    padding: 15px 0;
    width: 900px;
    overflow-x: auto;
}

Tetapi kita tidak mungkin  mengedit file style.css yang ada di bawah folder assets ini secara terus-menerus. File di bawah folder assets ini selalu tergenerate oleh Yii, jadi takutnya kita sudah edit tetapi di-replace oleh Yii. CGridView mempunyai file css sendiri yaitu ‘framework/zii/widgets/assets/gridview/style.css yang akan disalin ke folder assets.

Oleh karena itu kita perlu mencopy style.css ke css/cgridview_overflow.css dan mengeditnya misal hasilnya seperti ini:
.grid-view-loading
{
    background:url(loading.gif) no-repeat;
}

.grid-view
{
    padding: 15px 0;
    width: 900px;
    overflow-x: auto;
}

.grid-view table.items
{
    background: white;
    border-collapse: collapse;
    border: 1px #D0E3EF solid;
}

.grid-view table.items th, .grid-view table.items td
{
    font-size: 0.9em;
    border: 1px white solid;
    padding: 0.3em;
}

.grid-view table.items th
{
    color: white;
    background: url(“bg.gif”) repeat-x scroll left top white;
    text-align: center;
}

.grid-view table.items th a
{
    color: #EEE;
    font-weight: bold;
    text-decoration: none;
}

.grid-view table.items th a:hover
{
    color: #FFF;
}

.grid-view table.items th a.asc
{
    background:url(up.gif) right center no-repeat;
    padding-right: 10px;
}

.grid-view table.items th a.desc
{
    background:url(down.gif) right center no-repeat;
    padding-right: 10px;
}

.grid-view table.items tr.even
{
    background: #F8F8F8;
}

.grid-view table.items tr.odd
{
    background: #E5F1F4;
}

.grid-view table.items tr.selected
{
    background: #BCE774;
}

.grid-view table.items tr:hover.selected
{
    background: #CCFF66;
}

.grid-view table.items tbody tr:hover
{
    background: #ECFBD4;
}

.grid-view .link-column img
{
    border: 0;
}

.grid-view .button-column
{
    text-align: center;
    width: 60px;
}

.grid-view .button-column img
{
    border: 0;
}

.grid-view .checkbox-column
{
    width: 15px;
}

.grid-view .summary
{
    margin: 0 0 5px 0;
    text-align: right;
}

.grid-view .pager
{
    margin: 5px 0 0 0;
    text-align: right;
}

.grid-view .empty
{
    font-style: italic;
}

.grid-view .filters input,
.grid-view .filters select
{
    width: 100%;
    border: 1px solid #ccc;
}

Kemudian pada views, masukkan css tersebut dengan pola:
    ‘cssFile’ => ‘/css/gridview_overflow.css’,

Contoh coding misalnya:
 $this->widget(‘zii.widgets.grid.CGridView’, array(
    ‘id’=>’tbl-customer-grid’,
    ‘cssFile’ => ‘/css/gridview_overflow.css’,
    ‘ajaxUpdate’=>false,

Tampilan yang terjadi akan menghasilkan scroll seperti contoh berikut ini:

Informasi lebih lanjut silahkan mengunjungi:
1. http://www.yiiframework.com/forum/index.php/topic/31288-doubt-about-cgridview-and-css/
2. http://www.w3schools.com/cssref/css3_pr_overflow-x.asp .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.