posted by jwerner on Thursday, September 15, 2011 5:07 PM

Have you ever wondered how to make an individual table look like the CGridView widget in Yii?

Continue reading...

Lets assume you have made a table on your on in a view file.

<table>
   <thead>
   ...
   </thead>
   <tbody>
      <tr>
         <td></td>
      </tr>
   </tbody>
</table>

In order to make this table look like the standard Yii CGridView widget, first add a div around the table:

<div class class="grid-view" id="my-grid">
   <table>
   ...
   </table>
</div>

Note the class attribute. This should be grid-view.

Also give that div a unique id (here: my-grid).

Now comes the tricky part. We need to add the grid view style sheet and as well run the grid widget's JavaScript code. In your view file, add the following PHP code:

<?php
// Get the client script handler
$cs=Yii::app()->getClientScript();
 
// Publish the grid view resources
$baseScriptUrl=Yii::app()->getAssetManager()->publish(
   Yii::getPathOfAlias('zii.widgets.assets')
).'/gridview';
 
// ... and the style sheet
$cssFile=$baseScriptUrl.'/styles.css';
$cs->registerCssFile($cssFile);
 
// Add jQuery and bbq:
$cs->registerCoreScript('jquery');
$cs->registerCoreScript('bbq');
// Add the gridview JavaScript
$cs->registerScriptFile(
   $baseScriptUrl
   .'/jquery.yiigridview.js',
   CClientScript::POS_END
);
// Add the code to format the div like a grid view:
$cs->registerScript(
   'applyGrid',
   "jQuery('#my-grid').yiiGridView("
      .CJavaScript::encode(array())
      .");"
);
?>

That's all!

Hope this is usefull for someone.

Comments

No comments


Please enter the letters as they are shown in the image above.
Letters are not case-sensitive.

Add comment

Change Log

Created OnSep 15, 2011 5:07:39 PM CEST
Created ByJoachim Werner
Updated OnSep 22, 2011 4:15:26 PM CEST
Updated ByJoachim Werner