Hi all, anybody who knows this… creating an editable grid view to help edit the grid columns.
I used an extension called bootstrap-editable and followed the installation examples but in vain.
Does anyone has working sources on the same or even a different approach, I will appreciate, thank you.
There’s no inbuilt behavior for this, but you could integrate a jQuery plugin, such as jeditable.
Demo here.
Keith: thank you… I got an extension called yii-bootstrap-editable that I have tried but no changes in the back-ground and here are the sources:
<!--Generated using Gimme CRUD freeware from www.HandsOnCoding.net -->
<?php
Yii::app()->clientScript->registerScript('search', "
$('.search-button').click(function(){
$('.search-form').toggle();
return false;
});
$('.search-form form').submit(function(){
$.fn.yiiGridView.update('readingbooksgrid', {
data: $(this).serialize()
});
return false;
});
");
?>
Reading Books for Period Group
<?php //echo CHtml::link('Advanced Search','#',array('class'=>'search-button')); ?>
<div class="search-form" >
<?php $this->renderPartial('_search',array(
'model'=>$model,
)); ?>
</div><!-- search-form -->
<?php
$this->widget('bootstrap.widgets.TbGridView', array(
'id'=>'readingbooksgrid',
'itemsCssClass'=>'table table-striped table-bordered table-condensed',
// 'header'=>'my home is here ',
'dataProvider'=>$model->search(),
// 'filter'=>$model,
'columns'=>array(
// 'class' => 'ext.editable.EditableColumn',
// 'BillingGroupID',
// 'BillingMonth',
'contractno',
'firstname',
'previousreading',
array(
'class' => 'ext.editable.EditableColumn',
'name' => 'reading',
'headerHtmlOptions' => array('style' => 'width: 30px'),
'editable' => array(
'url' => $this->createUrl('readingbooks/update'),
'placement' => 'right',
'inputclass' => 'span3',
'params' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken),
)
),
array(
'class' => 'ext.editable.EditableColumn',
'name' => 'readingcode',
'headerHtmlOptions' => array('style' => 'width: 30px'),
'editable' => array(
'url' => $this->createUrl('meterreading/update'),
'placement' => 'right',
'inputclass' => 'span3',
)
),
// 'readingcode',
array(
'class' => 'ext.editable.EditableColumn',
'name' => 'dateofreading',
'headerHtmlOptions' => array('style' => 'width: 80px'),
'editable' => array(
'type' => 'date',
'url' => $this->createUrl('meterreading/update'),
'placement' => 'right',
'inputclass' => 'span3',
)
),
// 'dateofreading',
array(
'class' => 'ext.editable.EditableColumn',
'name' => 'meterreaderid',
'headerHtmlOptions' => array('style' => 'width: 70px'),
'editable' => array(
'type' => 'select',
'url' => $this->createUrl('meterreading/update'),
'placement' => 'right',
'inputclass' => 'span3',
'source'=>CHtml::listData(Meterreader::model()->findAll(),'ID','FirstName'),
'onRender' => 'js: function(e, editable) { var colors = {1: "green", 2: "blue", 3: "red", 4: "gray"};
$(this).css("color", colors[editable.value]); }',
// 'source' => array(0 => 'Male', 1 => 'Female'),
)
),
// 'meterreaderid',
array(
'class' => 'ext.editable.EditableColumn',
'name' => 'readingcomments',
'headerHtmlOptions' => array('style' => 'width: 110px'),
'editable' => array(
'type' => 'textarea',
'url' => $this->createUrl('meterreading/update'),
'placement' => 'right',
'inputclass' => 'span3',
)
),
// 'readingcomments',
// 'consumptionforbilling',
'avgconsumption',
array(
'class'=>'CButtonColumn',
'template'=>'',
'buttons'=>array
(
),
),
),
)); ?>
Controller Action
public function actionUpdate($CustomerID, $BillingMonth)
{
Yii::import('ext.editable.EditableSaver'); //or you can add import 'ext.editable.*' to config
$es = new EditableSaver('Readings'); // 'MeterReading' is classname of model to be updated
$es->onBeforeUpdate = function($event) {
$event->sender->setAttribute('Reading',$this->readingcode);
};
try {
$es->update();
} catch(CException $e) {
echo CJSON::encode(array('success' => false, 'msg' => $e->getMessage()));
return;
}
echo CJSON::encode(array('success' => true));
}
Still no solution
That extension looks pretty good. What’s not working exactly? If the ajax call isn’t working, you should use your browser’s dev tools to check that data is being sent to the server and that the server is responding appropriately. You need to narrow down which part of the process is failing.
Keith, you know what? The extension as for me does not do the background editing. I checked on my table that I was editing and no changes. Also used firebug to trace if the data iz being sent: very well it even indicates the primary key sent. But is a folder in assets directory which gives an error in line 8240, its a jquery.js file. So am gonna update my jquery files and see whats up. But looks like the file in the extension called server does not do the real work. And again another question. It does not handle a composite key table, any suggestions? I tried inserting array in the modelID but it returns erros.