My extension to use CGridView, CDetailView, CLinkPager with jquery-ui

Edit: extension added to extensions repository: eziiui

Hi People!

I’ve made this little extension to use CGridView, CDetailView and CLinkPager with jquery-ui theme framework.

Put it in your extensions folder and use it like normal widget.

Since I don’t extended CJuiWidget you need to include a jquery-ui css theme in your page or, to test, simply put a zii CJuiWidget (CJuiTabs for example) before in order to auto-include a default theme.

This is an early version, feel free to post your comments, suggestions and modifications.

Tested (quickly) on FF 3.5.x, Google Chrome, IE8, IE7, IE6

Known issues:

• IE6, IE7 pager buttons spacing and dimensions are not the same as in FF

Example:

$this->widget('ext.eziiui.CGridViewUI', array(

    'dataProvider'=>$model->search(),

    'columns'=>array(

        'column1',

        //......

    ),

));


$this->widget('ext.eziiui.CDetailViewUI', array(

    'data'=>$model,

    'attributes'=>array(

        'id',   

        'column1',

    ),

));

waiting for your comments,

Marco

Edit: code is in post #4

Great job! Where is the code? Do you have some screenshots?

Interesting! I began to code a yii theme based on jquery-ui css and a custom fluid grid (instead of the blueprint css used by the default webapp), much more flexible than 960gs, blueprint and any other grid (similar to this http://fluidgrids.com which doesn’t correctly work on IE).

Ops!! I’ve attached the code but there’s no attachments!!

Let me retry…

Try my jqGrid wrapper, it extends CJuiWidget (documentation is inside the code)

Well, I mean a css grid for the layout (like this http://960.gs ) not a table for data.

Here’s a screenshot

Have a look at post #5 too

Ah ok!

I’d like to see your layout, could you share something when ready?

I like your extension but it needs more documentation.

Using it as you suggest I get errors regarding the ‘filter’ and ‘filterPosition’.

Commenting out the appropriate lines in CGridViewUI.php I managed to get it working, but it seems there’s much more to it than simply replacing ‘zii.widgets.grid.CGridView’ with ‘ext.eziiui.CGridViewUI’.

Thanks though for your contribution

Hi, thanks for your comments.

About the documentation… well the widgets have the same method and properties of the original zii widgets…

About the "filter" error…

Ops… sorry, I’ve worked on a yii-1.1.1-dev version and this new property is not present in yii-1.1.0

Below you can find the extension for 1.1.0 (commented some rows as you did)

Please could you try it again?

Bye,

Marco

Thanks for the quick reply Marco.

I decided to checkout the development version of Yii myself and your extension now works fine

Congrats, I love it.

Thanks!

I see pager doesn’t show First and Last buttons, it’s not my fault… the original pager.css from which I start has these lines inside

/**

 * Hide first and last buttons by default.

 */

ul.yiiPager .first,

ul.yiiPager .last

{

	display:none;

}

Comment these lines if you want to have First and Last buttons too

The jqGrid wrapper file seems damaged. Could you try to attach it again?

Thanks!

Try now

Edit: corrupted again…

File corrupt again… I can’t understand why!

I re-try with zip file

THIS WORKS!

Added to extensions repository click here

Thanks a lot!

Is it enough to copy the zip file content to protected/extensions directory?

Yes, and look inside CJuiJqGrid.php file for a view and controller code example.

Let me know what you think.

I’m thinking to add it to extension repos

A good widget - a tree + grid (master-detail tables). Can you make this combination? Because I do not do it. Propose a my jqTree (edit/insert/delete/drag-drop) or a widget of your choice. I propose to help with my tree widget.

Hi Flybot.

You already have all these features in jqGrid (CJuiJqGrid plugin). My extension is only a simple wrapper, so you have all the functionalities of jqGrid.

Have a look at http://trirand.com/blog/jqgrid/jqgrid.html for demos (jqGrid official site)

Under "Advanced" section you can find master-detail and subgrid, under "New in version 3.3" something about Trees.

Of course you have to write some javascript code.

Let me know,

Marco