X-editable for Yii

Bundle of widgets and server-side component for creating editable elements in Yii application

Download (1.1.0)
based on X-editable 1.4.4

Overview

This extension allows you to create editable elements in Yii application.
It comes instead of previous yii-bootstrap-editable that was upgraded to X-editable library.
Major changes are:

support of several libraries: Twitter Bootstrap, jQuery UI and pure jQuery
popup and inline modes. You can toggle it from config without changing code
update of related models

It contains 4 widgets:

Editable - single editable element
EditableField - editable element from attribute of model
EditableDetailView - editable detail-view for entire model
EditableColumn - editable column in GridView

and 2 components:

EditableConfig - used in config file to setup extension
EditableSaver - used in controller actions to update records

Demo

Try out demo in widgets section (you can compare different styles using dropdown in top-right corner).

Requirements

Requirements depend on core library you want to use:

Bootstrap
Twitter Bootstrap 2+, Yii 1.1+.
You can use Yii-bootstrap extension (2.0+) or include bootstrap js/css manually
jQuery UI
- popup: Yii 1.1.13+ (as requires jQuery UI 1.9 for tooltip)
- inline: Yii 1.1+
only jQuery
Yii 1.1+

Setup

Download and unzip to protected/extensions/x-editable

If using with Bootstrap, install Yii-bootstrap or include Bootstrap js and css manually:

Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/js/bootstrap/css/bootstrap.min.css');  
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/js/bootstrap/js/bootstrap.min.js');

Modify your config:

//assume you unzipped extension under protected/extensions/x-editable
Yii::setPathOfAlias('editable', dirname(__FILE__).'/../extensions/x-editable');

return array(
    ...
    'import'=>array(
        ...
       'editable.*' //easy include of editable classes
    ),            

    //application components
    'components'=>array(
        ...
        //X-editable config
        'editable' => array(
            'class'     => 'editable.EditableConfig',
            'form'      => 'bootstrap',        //form style: 'bootstrap', 'jqueryui', 'plain' 
            'mode'      => 'popup',            //mode: 'popup' or 'inline'  
            'defaults'  => array(              //default settings for all editable elements
               'emptytext' => 'Click to edit'
            )
        ),        
    )
);

That's it!
Now you can edit views and controller actions to have editable elements. Please refer to widgets section.