Yii CGridView Javascript Functions (builtin JQuery Plugin)

Yii CGridView Javascript Functions (builtin JQuery Plugin)

Last updated:
Table of Contents

There's a few javascript functions used by Yii itself to control a CGridView widget. You can use them as well and I've found them quite useful and helpful when dealing with and manipulating grid widgets. There's not a lot of documentation on them (they are

Say you have a CGridView widget that you created like this (assuming you've passed a suitable data provider from your controller in variable $dp (like an instance of CActiveDataProvider)):

$this->widget('zii.widgets.grid.CGridView',[
    'id' => 'my-grid',
    'dataProvider' => $dp,
    'columns' => [
    //...your columns

Functions can be called in two ways; I'll only provide both ways for the first example:

Update grid

Use $.fn.yiiGridView.update('my-grid') or $('#my-grid').yiiGridView('update')

Get row

$.fn.yiiGridView.getRow(row_number)

Get column

$.fn.yiiGridView.getColumn(column_number)

Get current selection

$.fn.yiiGridView.getSelection('my-grid')

Get row key

$.fn.yiiGridView.getKey(row_number)

This Returns the key associated with each row in your grid. (This is what Yii uses to build Urls for CButtonColumn, for example.

At the end of the <table> tag on your grid you can see a <div> with class "keys". This is where the keys are kept.)

var key = $("#my-grid").yiiGridView('getKey',5); 
//returns the key for the 6th row (numbers start at 0)

Get grid URL

$.fn.yiiGridView.getUrl('my-grid')

Dialogue & Discussion