How can I make a gridView in yii-booster bootstrap widget with popups for buttons in one of its column
My columns its a little bit different but i think you'll understand.
You'll have to change your TbButtonColumn this way:
$this->widget('bootstrap.widgets.TbExtendedGridView', array(
'type'=>'bordered',
'dataProvider'=>$model->search(),
'filter'=>$model,
'template'=>"{items}",
'columns'=>array(
'id',
'firstName',
'lastName',
'language',
'hours',
array(
'header'=>'Options',
'class'=>'bootstrap.widgets.TbButtonColumn',
'buttons'=>array(
'view'=>
array(
'url'=>'Yii::app()->createUrl("person/view", array("id"=>$data->id))',
'options'=>array(
'ajax'=>array(
'type'=>'POST',
'url'=>"js:$(this).attr('href')",
'success'=>'function(data) { $("#viewModal .modal-body p").html(data); $("#viewModal").modal(); }'
),
),
),
),
)
)));
?>
<!-- View Popup -->
<?php $this->beginWidget('bootstrap.widgets.TbModal', array('id'=>'viewModal')); ?>
<!-- Popup Header -->
<div class="modal-header">
<h4>View Employee Details</h4>
</div>
<!-- Popup Content -->
<div class="modal-body">
<p>Employee Details</p>
</div>
<!-- Popup Footer -->
<div class="modal-footer">
<!-- close button -->
<?php $this->widget('bootstrap.widgets.TbButton', array(
'label'=>'Close',
'url'=>'#',
'htmlOptions'=>array('data-dismiss'=>'modal'),
)); ?>
<!-- close button ends-->
</div>
<?php $this->endWidget(); ?>
<!-- View Popup ends -->
and your actionView from your personController this way:
public function actionView($id)
{
if( Yii::app()->request->isAjaxRequest )
{
$this->renderPartial('view',array(
'model'=>$this->loadModel($id),
), false, true);
}
else
{
$this->render('view',array(
'model'=>$this->loadModel($id),
));
}
}
and then, all you have to do it's do the same thing with your update.
If you can't understand anything, feel free to ask any question.
Pradeep
Updated on June 04, 2022Comments
-
Pradeep almost 2 years
I am a fresher in Yii, I need to make a gridView for employee details in Yii, for that I have followed the procedures mentioned in http://yii-booster.clevertech.biz/components.html#tables. And I have created a gridView with some sample data, exactly like clevertech.biz has done, and i succeeded in that. But my actual requirement is to make a gridView with popup windows for viewing and editing employee details and a javascript confirmation before deleting entries. Here is my code, that created a grid and a popup window but the actions for each button is not separated, the popup works for the entire cell under a particular column, not for a button in that cell. Can anyone help me to resolve this issue?
$stu->id = 3; $stu->name = 'Stu'; $stu->address = 'Dent'; $stu->position = 'SE'; $stu->joinDate = '2012-12-14'; $stu->age = 30; $stu->phone = 1112226789; $persons = array($mark, $jacob, $stu); $gridDataProvider = new CArrayDataProvider($persons); // $gridColumns $gridColumns = array( array('name'=>'id', 'header'=>'#', 'htmlOptions'=>array('style'=>'width: 60px')), array('name'=>'name', 'header'=>'Name'), array('name'=>'address', 'header'=>'Address'), array('name'=>'position', 'header'=>'Position'), array('name'=>'joinDate', 'header'=>'Join Date'), array('name'=>'age', 'header'=>'Age'), array('name'=>'phone', 'header'=>'Phone'), array('header'=>'Options', 'htmlOptions' => array('data-toggle'=>'modal', 'data-target'=>'#myModal'), 'class'=>'bootstrap.widgets.TbButtonColumn', 'viewButtonUrl'=>null, 'updateButtonUrl'=>null, 'deleteButtonUrl'=>null,), ); $this->widget('bootstrap.widgets.TbExtendedGridView', array( 'type'=>'bordered', 'dataProvider'=>$gridDataProvider, 'template'=>"{items}", 'columns'=>$gridColumns, )); ?> <!-- View Popup --> <?php $this->beginWidget('bootstrap.widgets.TbModal', array('id'=>'myModal')); ?> <!-- Popup Header --> <div class="modal-header"> <h4>View Employee Details</h4> </div> <!-- Popup Content --> <div class="modal-body"> <p>Employee Details</p> </div> <!-- Popup Footer --> <div class="modal-footer"> <!-- save button --> <?php $this->widget('bootstrap.widgets.TbButton', array( 'type'=>'primary', 'label'=>'Save', 'url'=>'#', 'htmlOptions'=>array('data-dismiss'=>'modal'), )); ?> <!-- save button end--> <!-- close button --> <?php $this->widget('bootstrap.widgets.TbButton', array( 'label'=>'Close', 'url'=>'#', 'htmlOptions'=>array('data-dismiss'=>'modal'), )); ?> <!-- close button ends--> </div> <?php $this->endWidget(); ?> <!-- View Popup ends -->
-
Scott Gardner almost 11 yearsThank you for the example of overriding a button's url.