I have a simple gridview table, that shows data from one table only. It contains field named "comment" (of each product) and, since the comments can be very long, in gridview I show only first 50 characters. I would like, that after I hover on each comment, a balloon/bubble/not-sure-how-to-call-it appears, with the whole comment inside. Is it possible for GridView? No clicking, just right after hovering on comment.
<div class="comments">
<?=
GridView::widget([
'dataProvider' => $dataProvider,
'columns' => [
'place_rating',
'comment:longtext',
],
]);
?>
</div>
<div class="comments">
<?=
GridView::widget([
'dataProvider' => $dataProvider,
'columns' => [
'place_rating',
// 'comment:longtext',
[
'attribute' => 'comment',
'format' => 'longtext',
'contentOptions' => function($data) {
// needs to be closure because of title
return [
'class' => 'cell-with-tooltip',
'data-toggle' => 'tooltip',
'data-placement' => 'bottom', // top, bottom, left, right
'data-container' => 'body', // to prevent breaking table on hover
'title' => $data->comment,
];
}
]
],
]);
?>
</div>
Then in your in /views/layouts/main.php add this
<?php $this->registerJs("
$(function () {
$('[data-toggle=\"tooltip\"]').tooltip();
});
", $this::POS_END, 'tooltips'); ?>
or add it to your .js file without php code ofcourse
Related
I am using yii2 GridView widget for showing data in form of table.
As there are many fields to show, GridView ( below table ) showing scroll for it. But i don't want it.
I want to increase container width so that it show table without scroll.
I had search about bootstrap.css file but not found in any directory.
How do i change GridView width ?
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
.........
['class' => 'yii\grid\ActionColumn'],
],
'tableOptions' =>['style' => 'width: 1800px;'],
]); ?>
or the gridview container options
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
.........
['class' => 'yii\grid\ActionColumn'],
],
'options' =>['style' => 'width: 1800px;'],
]); ?>
http://www.yiiframework.com/doc-2.0/yii-grid-gridview.html
http://www.yiiframework.com/doc-2.0/yii-grid-gridview.html#$options-detail
http://www.yiiframework.com/doc-2.0/yii-grid-gridview.html#$tableOptions-detail
Otherwise if you need a larger page container you need a new layout
add tye new layout in you app/views/layout eg:changing the container this this way
....
<div class="container-fluid">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= Alert::widget() ?>
<?= $content ?>
</div>
....
then assign you new layout to you view before render
public function actionIndex()
{
......
$this->layout = 'my_new_layout'
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
}
I cannot seem to figure out why pjax reloads the page on the second form submission. It works exactly as intended on the first form submission pulling from this url /site/profile?UserSearch%5Bsearchstring%5D=mi&_pjax=%23form-pjax, however, after that first one it loses the ending of the url /site/profile?UserSearch%5Bsearchstring%5D=m. I checked the actual html code and the form is retaining the data-ajax attribute. I tried increasing the timeout as had been suggested when pjax is reloading the entire page, but that did not change anything.
Below is the code from my view
<?php Pjax::begin(['timeout' => 5000, 'id' => 'form-pjax']); ?>
<?php $form = ActiveForm::begin([
'method' => 'get',
'action' => Url::to(['site/profile']),
'options' => ['data-pjax' => true ],
]); ?>
<?= $form->field($searchModel, 'searchstring', [
'template' => '<div class="input-group">{input}<span class="input-group-btn">' .
Html::submitButton('Search', ['class' => 'btn btn-default']) .
'</span></div>',
])->textInput(['placeholder' => 'Find friends by username or email']);
?>
<?php ActiveForm::end(); ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'columns' => [
'username',
[
'label' => 'View Profile',
'format' => 'raw',
'value'=>function ($data) {
return Html::a(Html::encode("View Profile"),'/site/redirectprofile/'.$data->id);
},
],
[
'label' => 'Follow',
'format' => 'raw',
'value'=>function ($data) {
return Html::a(Html::encode(Follow::find()->where(['user_id' => $data->id, 'follower_id' => Yii::$app->user->Id])->exists() ? 'Unfollow' : 'Follow'),'/site/follow/'.$data->id.'/'.$data->username);
},
],
],
'summary'=>'',
]); ?>
<?php Pjax::end(); ?>
You must call needed javascript triggers/functions after every pjax reload like:
$('#form-pjax').on('pjax:success', function() {
/*call Your functions here, or copy from your generated page js code,
that bind event to pjax form,
at end of generated html You should have something like: */
jQuery(document).on('submit', "#form-pjax form[data-pjax]", function (event) {
jQuery.pjax.submit(event, '#form-pjax', {"push":true,"replace":false,"timeout":000,"scrollTo":false});
});
});
This is not yii2 issue, it's how javascript works, when You add dynamically content it's needed to bind triggers/events for every added element.
i'm new in Yii2, previously i use self-made-mvc-php + extjs 4.2
So i working on Yii2 now, i'm starting to get the hang of it for simple CRUD, my pobrem starts when i need to make entry form for parent-child tables.
I have 3 tables
commission
commission_id
commission_name
commission_amount
commission_percent
commission_scheme
cscheme_id
cscheme_name
cscheme_amount
cscheme_percent
cscheme_bonus
cscheme_description
commission_scheme_detail
cscheme_detail_id
commission_id
cscheme_id
The entry form is for commission_scheme and commission_scheme_detail.
I have generated all the crud using gii
i modify _form.php, add a gridview of commission_scheme_detail after the active form
i also add modal containing selection grid from commission
this is _form.php
gridview
<?php Pjax::begin(['id' => 'pjaxCschemedetail',
'timeout' => false,
'enablePushState' => false,
'clientOptions' => ['method' => 'POST']
]);
echo GridView::widget([
'id' => 'gridCschemedetail',
'dataProvider' => $detailData,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'CSCHEME_DETAIL_ID',
'CSCHEME_ID',
'COMMISSION_ID',
[
'class' => 'yii\grid\ActionColumn',
'buttons' => [
'update' => function ($url, $model) {
return Html::a('<span class="glyphicon glyphicon-pencil"></span>', Yii::$app->urlManager->createUrl(['commission-scheme-detail/view','id' => $model->CSCHEME_DETAIL_ID,'edit'=>'t']), [
'title' => Yii::t('yii', 'Edit'),
]);}
],
],
],
'responsive'=>true,
'hover'=>true,
'condensed'=>true,
'floatHeader'=>true,
'panel' => [
'type'=>'info',
'before'=>
'after'=>Html::a('<i class="glyphicon glyphicon-repeat"></i> Reset List', ['index'], ['class' => 'btn btn-info']),
Html::button('Add', [
'id' => 'addDetailButton',
'class' => 'glyphicon glyphicon-plus btn btn-success btn-ajax-modal',
'value' => Url::to('#web/commission/listselect'),
'data-target' => '#modal_cschemedetail',
]),
'showFooter'=>false
],
]); Pjax::end();
Modal
Modal::begin([
'id' => 'modal_cschemedetail',
'header' => '<h4>Category</h4>',
]);
echo '<div id="modal-content"></div>';
echo Html::button('Add Selected', [
'id' => 'addCommissionsButton',
'class' => 'btn btn-success btn-ajax-modal'
]);
Modal::end();
?>
</div>
</div>
<div class="box-body">
</div>
</div>
selection grid
<?php Pjax::begin(); echo GridView::widget([
'id' => 'gridCommissionSelection',
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\CheckboxColumn'],
['class' => 'yii\grid\SerialColumn'],
[
'attribute' => 'COMMISSION_ID',
'visible' => false
],
'COMMISSION_NAME',
[
'attribute' => 'TRANSACTION_TYPE_ID',
'value' => 'transactionTypeName'
],
'COMMISSION_DESC:ntext',
'COMMISSION_AMOUNT',
]
'responsive'=>true,
'hover'=>true,
'condensed'=>true,
'floatHeader'=>true,
]); Pjax::end(); ?>
Is it possible to insert the selected records from the modal to the detail gridview, then after user click the create button, the form and the inserted records in gridview saved to respective tables?
How can i insert the selected records to gridview (not to db table, it will be done after user click create)?
I suggest you to simplify your flow. You can easily save your models (performing an insert/update) at Modal and then refresh the page or call the $.pjax.reload('#gridCommissionSelection') to redraw the grid-view with new entries.
Another way is to append new lines with JS and then save them via AJAX request. It will be rather dirty and unclear solution, I guess :)
Am saving data using the ckeditor in yii2 in my form model but when doing the view action it displays the html tags
CKEDITOR CODE:
<?= $form->field($model, 'case_description')->widget(CKEditor::className(),[
'editorOptions' => [
'preset' => 'full',
'inline' => false,
],
]);
?>
So after I save the data in the table its saved having the html codes
example of saved data:
<b>My new project being grilled</b>
So when viewing the data using yii2 detail and gridview it always shows the <b> instead of being bold.
How can I solve the problem
EXAMPLE: of grid view outputting it in the case_description column
<?= GridView::widget([
'summary'=>"",
'showOnEmpty'=>false,
'dataProvider' => $dataProviderb,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'case_description',
],
]) ?>
You just use the 'format' => 'row' in your GridView like:
<?= GridView::widget([
'summary'=>"",
'showOnEmpty'=>false,
'dataProvider' => $dataProviderb,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
[
'attribute' => 'case_description',
'format' => 'raw',
],
],
]) ?>
I am using kartik grid view to display my data in yii 2 with pjax enabled. Every time, I search a data in the grid view, the search is done using ajax but the url keeps changing. Is there a way to keep the url unchanged? Please help me with the solution. Here is my code:
<?php use kartik\grid\GridView;?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'pjax'=>true,
'pjaxSettings'=>[
'neverTimeout'=>true,
],
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'hotel_id',
'name',
'address',
'phone_no',
'contact_person',
// 'email_address:email',
// 'website',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
You can disable pushState feature like this:
'pjax' => true,
'pjaxSettings' => [
'options' => [
'enablePushState' => false,
],
],