Yii2 Image Popup in kartik gridview - yii

I need help in displaying image in Kartik gridview Yii2.
Please give me suggestion to show image in popup when we click on it.
/* Script to load the image in popup */
'attribute' => 'image',
'width' => '50px',
'value' => function ($model, $key, $index, $widget) {
if ($model->image != '') {
return Html::a(Html::img(Yii::$app->params['server'] . "/mypath/uploadedfile/" .
Yii::$app->session['city'] . "/" . $model->image, ['width' => '70px', 'height' => '70px']), '#', [
'title' => Yii::t('app', 'View Image'),
'class' => 'view-image-link',
'data-id' => $model->image,
]);
} else {
return "No Image";
}
$this->registerJs("
$('.view-image-link').click(function()
{
$.get
(
'viewimage',
{
id: $(this).data('id')
},
function(data)
{
$('.modal-body').html(data);
$('#imageview').modal();
}
);
});");

By Changing I have resolved my self
Modal dialog
Modal::begin([ 'id' => 'imageview', 'footer' => 'Close', ]); Modal::end();

Related

Prestashop 1.7 - Bug FormBuilder on Cms Page Category

I wrote a Prestashop module to add two fields in the CMS Category but the render is wrong.
My source code:
<?php
class NewsSlider extends Module {
public function hookActionCmsPageCategoryFormBuilderModifier(array $params) {
$formBuilder = $params['form_builder'];
$locales = $this->get('prestashop.adapter.legacy.context')->getLanguages();
$formBuilder->add($this->name.'_cover_lang',
\PrestaShopBundle\Form\Admin\Type\TranslatableType::class,
[
'type' => \Symfony\Component\Form\Extension\Core\Type\FileType::class,
'label' => $this->l('Image de couverture'),
'options' => [
'required' => false,
'constraints' => [
'mimeTypes' => [
'image/png',
'image/jpeg'
],
'mimeTypesMessage' => 'JPEG/PNG',
]
],
'required' => false,
]
);
$formBuilder->add($this->name.'_header_lang',
\PrestaShopBundle\Form\Admin\Type\TranslateType::class,
[
'type' => \PrestaShopBundle\Form\Admin\Type\FormattedTextareaType::class,
'label' => $this->l('Entête de la page'),
'locales' => $locales,
'hideTabs' => false,
'required' => false
]
);
$languages = Language::getLanguages(true);
foreach($languages as $lang){
$content = $this->getCMSHeader($params['id'], $lang['id_lang'], $isCategory);
if(is_string($content) && strlen($content)) {
$params['data'][$this->name.'_header_lang'][$lang['id_lang']] = $content;
}
}
$formBuilder->setData($params['data']);
}
}
?>
You can see the render here.
And I wrote exactly the same code for the CMS Page (hookActionCmsPageFormBuilderModifier) and it's working. Why is it different?

2amigos DataRangePicker. Display over input.

Problem
I set orientation, but it's still at the bottom. What's the problem?
Code
<?=$form->field($contactUsModel, 'planningToTravelFrom')
->widget(\dosamigos\datepicker\DateRangePicker::className(), [
'attributeTo' => 'planningToTravelTo',
'form' => $form, // best for correct client validation
'language' => 'es',
'size' => 'lg',
'clientOptions' => [
'autoclose' => true,
'orientation' => 'top',
'format' => 'dd-M-yyyy'
]
]);?>
Problem was in
Should be 'orientation' => 'bottom'
Not works with date-range-picker bugfix
$("#contactform-planningtotravelfrom, #contactform-planningtotravelto").datepicker().on('show.bs.modal', function (event) {
// prevent datepicker from firing bootstrap modal "show.bs.modal"
event.stopPropagation();
});

Displaying an image in kartik grid shows the path

I have a grid and i would like to implement an image but it always returns the path to the image
this is the code:
[
'attribute' => 'picture',
'value'=>function($data) { return $data->imageurl; },
'value' => function ($data) {
return Html::img(Yii::getAlias('#web').'/images/user_accounts.png',
['width' => '70px']);
},
],
The above idea i got from This link but it fails
I have also tried :
[
'attribute' => 'picture',
'value'=>function($data) { return $data->imageurl; },
],
And added
public function getImageurl()
{
return \Yii::$app->request->BaseUrl.'/images/user_accounts.png';
}
But it still fails to display the image to the grid
This is what is displayed
Try this:
[
'attribute' => 'picture',
'format' => 'html',
'value' => function ($data) {
return Html::img(Yii::getAlias('#web').'/images/'. $data['imageurl'],
['width' => '70px']);
},
],
Use the format attribute of the DataColumn class, by default it uses the text format, so the content is displayed as text instead of html. Use the raw or html formatters
>>>This may be helpfull too...
[
'attribute' => 'picture',
'format' => 'html',
'value' => function ($data) {
return Html::img($data->imageurl,['width' => '80px']);
},
'filterType' => GridView::FILTER_SELECT2,
'filter' => '',
'filterWidgetOptions' => [
'pluginOptions' => ['allowClear' => true],
],
'filterInputOptions' => ['placeholder' => 'Image Url'],
],

How to display Image in gridview yii2

I'm new to yii, i want to display an image in gridview table, anyhelp will be appreciated, below is my code.
view....
<?= GridView::widget([
'dataProvider' => $dataProvider,
//'filterModel' => $searchModel,
'columns' => [
//['class' => 'yii\grid\SerialColumn'],
'product_id',
'name',
'descr',
'price',
//'image',
[
'attribute'=>'image',
'label'=>'Image',
'format'=>'html',
'value' => function ($data) {
$url = \Yii::getAlias('#backend/web/').$data['image'];
return Html::img($url, ['alt'=>'myImage','width'=>'70','height'=>'50']);
}
],
'views',
['class' => 'yii\grid\ActionColumn'],
],
'tableOptions' =>['class' => 'table table-striped table-bordered'],
I'm using dataProvider and below is my controller
public function actionIndex()
{
$searchModel = new ProductSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
//$models = $dataProvider->getModels();
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
//'models' => $models,
]);
}
The above code is not working fine no image display only the img alt shown
Any help on how to get this work, thanks
Here is the solution :
[
'attribute' => 'Icon',
'format' => 'html',
'label' => 'Icon',
'value' => function ($data) {
return Html::img(Yii::$app->request->BaseUrl.'/uploads/path/' . $data['Icon'],
['width' => '60px']);
},
],
Check you image path,
You can use
Yii::$app->request->baseUrl
If your index file is on root directory
$url =Yii::$app->request->baseUrl.'/'.$data['image'];
Specify 'format' to 'raw' for image column and $data should be and object, so 'image' field is accessible with $data->image.
[
'attribute'=>'image',
'label'=>'Image',
'format'=>'raw',
'value' => function ($data) {
$url = \Yii::getAlias('#backend/web/').$data->image;
return Html::img($url, ['alt'=>'myImage','width'=>'70','height'=>'50']);
}
],

click yii2 gridview linkpager's page no, jump error

the gridview if on right of the page,left is some menus,when click on page no 2,it dose not only refresh the gridview,but all page including left part are lost——a totally new page come out!help~
there is the debugging Screenshot:
my action is
public function actionList()
{
$model = new Loan();
$dataProvider = new ActiveDataProvider([
'query' => $model->find(),
'pagination' => [
'pagesize' => '1',
],
]);
return $this->renderPartial('list', ['model' => $model, 'dataProvider' => $dataProvider]);
}
my view is:
<?php
use yii\grid\GridView;
use yii\grid\SerialColumn;
use yii\helpers\Html;
use yii\helpers\Url;
use yii\widgets\LinkPager;
?>
<?=GridView::widget([
'dataProvider' => $dataProvider,
'layout'=> '{items}{pager}',
'columns' => [
['attribute' =>'loan_type','label'=>'借款类型','options' => ['width' => '80']],
['attribute' =>'amount','label'=>'金额','options' => ['width' => '80']],
['attribute' =>'rate','label'=>'还款利率','options' => ['width' => '80']],
['attribute' =>'fee','label'=>'手续费','options' => ['width' => '80']],
['attribute' =>'status','label'=>'状态','options' => ['width' => '80'] ],
['attribute' =>'comment','label'=>'审核意见','options' => ['width' => '80']],
['attribute' => 'created_at','value' =>function($model){return date('Y-m-d',strtotime($model->created_at));},'label'=>'申请时间','options' => ['width' => '150']],
[
'class' => 'yii\grid\ActionColumn',
'header' => '操作',
'template' => '{audit}',
'buttons' => [
'audit' => function ($url,$model) {
return Html::a('<span id="xxxx" class="glyphicon glyphicon-user"></span>','#',['title'=>'审核',
'onclick'=>"
$.ajax({
type: 'GET',
dataType: 'text',
url: 'http://182.92.4.87:8000/index.php?r=loan/pj', //目标地址
error: function (XMLHttpRequest, textStatus, errorThrown) {alert(XMLHttpRequest.status + ':' + XMLHttpRequest.statusText); },
success: function (page)
{
$('.ucRight').html(page);
}
});
return false;",
]);},
],
'urlCreator' => function ($action, $model, $key, $index) {
return Yii::$app->getUrlManager()->createUrl(['loan/list','id' => $model->status]);
},
'headerOptions' => ['width' => '80'],
],
],
]);
?>
The reason for your problem is that you haven't prevented the html link from directing to a new page, so your user is clicking on the link, which then loads a new page with the contents returned by the server; in this case a page of information with no layout applied. You need to add event.preventDefault() before the ajax call to stop this behaviour.
However, as #arogachev said, if you simply want to use pagination without a page refresh, then just use pjax. That is what pjax is designed for,