How to edit the header in a yiibooster gridview?

Question

I started using yiibooster for in-place editing on a gridview simple add

$columns[] = array(
            'name'  => $field->name,
            'value' => array($this, 'cellValue'),
            'class' => 'bootstrap.widgets.TbJEditableColumn',
            'jEditableOptions' => array(
                'type' => 'text',
                // very important to get the attribute to update on the server!
                'submitdata' => array('field_id'=>$field->id),
                'width' => '100%',
                'placeholder' => Yii::t('sms', 'click for edit'),
            )
        );

How can I edit table header by same way?

EDIT: My solution. It works for me. http://pastebin.com/0NzHMgEr

Answer 1

@topher, here is my solution

<?php
/**
* XColumnWithDeleteLink
*
* Allows to delete column in CGridView column.
*
* @author Arthur Skobara <skobara.arthur@gmail.com>
* @version 0.1
*/
Yii::import('bootstrap.widgets.TbJEditableColumn');

class XColumnWithDeleteLink extends TbJEditableColumn
{
        public $editableCssClass = 'editable-header';
        public $canBeDeleteCssClass = 'can-be-delete';

        public $deleteURL = '/phone/deletecolumn';

        protected $defaultOptions = array(
                'method' => 'POST', // method to use to send edited content (POST or PUT)
                'callback' => null, // Function to run after submitting edited content
                'name' => 'value', // POST parameter name of edited content,
                'id' => null, // POST parameter name of edited div id (if null will be filled with htmlOptions['id'] or $this->id)
                'submitdata' => null, // Extra parameters to send when submitting edited content
                'type' => 'text', // text, textarea or select (or any 3rd party input type)
                'rows' => null, // number of rows if using textarea
                'cols' => null, // number of cols if using textarea
                'height' => '15px', // 'auto', 'none' or height in pixels,
                'width' => '70%', // 'auto', 'none' or width in pixels
                'loadurl' => null, // URL to fetch input content before editing
                'loadtype' => 'GET', // Request type for load url. Should be GET or POST.
                'loadtext' => null, //  Text to display while loading external content.
                'loaddata' => null, // Extra parameters to pass when fetching content before editing.
                'data' => null, // Or content given as paramameter. String or function.
                'indicator' => null, // indicator html to show when saving (will default to assets/img/loading.gif if null)
                'tooltip' => null, // optional tooltip text via title attribute
                'event' => 'click', // jQuery event such as 'click' of 'dblclick'
                'submit' => null, // submit button value, empty means no button
                'cancel' => null, // cancel button value, empty means no button
                'cssclass' => null, // CSS class to apply to input form. 'inherit' to copy from parent.
                'style' => null, //  Style to apply to input form 'inherit' to copy from parent.
                'select' => false, // true or false, when true text is highlighted
                'placeholder' => null, // Placeholder text or html to insert when element is empty.
                'onblur' => null, // 'cancel', 'submit', 'ignore' or function
                'onsubmit' => null, // function(settings, original) { ... } called before submit
                'onreset' => null, // function(settings, original) { ... } called before reset
                'onerror' => null, // function(settings, original, xhr) { ... } called on error
                'ajaxoptions' => null, // jQuery Ajax options. See docs.jquery.com.
                'cancelAttrs' => array('class' => 'btn'), /* custom property */
                'submitAttrs' => array('class' => 'btn'), /* custom property */
                //'mask' => '99/99/9999', /* configuration setting for masked plugin */
                //'dateformat' => 'yyyy/mm/dd', /* you can use this configuration when using the date plugin */
                //'colorformat' => 'rgb' /*  rgb | hex | rgba you can use this parameter when using color picker plugin @see www.eyecon.ro/bootstrap-colorpicker/ */

        );

        public function init()
        {
                parent::init();

                if (!$this->saveURL)
                {
                        $this->saveURL = Yii::app()->getRequest()->requestUri;
                }
                $this->registerCustomClientScript();
        }

        public function renderHeaderCell()
        {
                $this->headerHtmlOptions['id']=$this->id;
                $this->headerHtmlOptions['data-column-name']=$this->name;
                $this->headerHtmlOptions['class']=$this->canBeDeleteCssClass;
                echo CHtml::openTag('th',$this->headerHtmlOptions);
                $this->renderHeaderCellContent();
                echo "</th>";
        }

        protected function renderHeaderCellContent()
        {
                $sort = $this->grid->dataProvider->getSort();
                $label = isset($this->header) ? $this->header : $sort->resolveLabel($this->name);

                echo "<span class=\"{$this->editableCssClass}\">". $label .'</span><i class="right icon-trash"></i>';
        }

        public function registerCustomClientScript()
        {
                $cs = Yii::app()->getClientScript();
                $assetsUrl = Yii::app()->bootstrap->getAssetsUrl();
                $cs->registerScriptFile($assetsUrl . '/js/jquery.jeditable.js', CClientScript::POS_END);

                $deleteURL = Yii::app()->createUrl($this->deleteURL);

                $options = CJavaScript::encode(array_filter($this->defaultOptions));
                $cs->registerScript(__CLASS__ . '#' . $this->id, "
                        jQuery(document).on('{$this->event}','.{$this->editableCssClass}', function(){
                                var self = jQuery(this);
                                var name = self.parent().attr('data-column-name');
                                var oldValue = self.html();
                                var options = jQuery.extend(true, {$options}, {});
                                self.editable(function(value, settings) {
                                        selectedId = $(this).attr('id');
                                        $.ajax({
                                                url:'{$this->saveURL}',
                                                data:{
                                                        name:name,
                                                        oldvalue:oldValue,
                                                        editheader:'{$this->id}',
                                                        value:value,
                                                },
                                                type:'post',
                                                success: function(data) {
                                                        self.attr('data-column-name', data);
                                                        var label = $('.inline-input-item label[name=\"'+oldValue+'\"]');
                                                        label.attr('name', value);
                                                        label.html(value);
                                                },
                                        });
                                        return value;
                                }, options);
                        });
                ");

                $cs->registerScript(__CLASS__ . '#column-delete', "
                        $(document).on('click', '.icon-trash', function() {
                                var self = this;
                                var name = $(this).parent().attr('data-column-name');
                                $.ajax({
                                        url:'{$deleteURL}',
                                        data:{name:name},
                                        type:'post',
                                        success: function(data) {
                                                $.fn.yiiGridView.update('{$this->grid->id}');
                                                $('.inline-input-item').each(function(){
                                                        var self = $(this);
                                                        if (self.find('label').attr('name') == name) {
                                                                self.remove();
                                                        }
                                                });
                                        }
                                });
                        });
                ");
        }
}