I am using MVC wrappers to create kendo grids and everytime i want to group a row the Title of the column gets ignored. It doesnt matter if the title is set in the grid .Title("") or in the viewmodel [Display(Name="")]. The result is the same. Any opinions on this?
I have added an example how it looks like when i group a column http://prntscr.com/3nm8rk
#(Html.Kendo().Grid(Model)
.Name("GridEkstenzija" + guid)
.Columns(columns =>
{
columns.Template(#<text></text>).ClientTemplate("<img style=' display: block; margin-left: auto; margin-right: auto;'" + "width='24' height='24' src='" + Url.Action("UcitajSlikuEkstenzije") + '/' + "#:data.IdEkstenzija#' />").Title(EkstenzijeDatotekaLanguage.Icon);
columns.Bound(p => p.Ekstenzija);
columns.Bound(p => p.Opis);
columns.Bound(p => p.MimeType);
columns.ForeignKey(f => f.StatusId, (IEnumerable)ViewBag.StatusEkstenzija, "IdStatus", "Naziv").Title("Status");
})
.Selectable(sel => sel.Mode(GridSelectionMode.Single))
.Sortable().Pageable(pg =>
{
pg.PageSizes(new[] { 20, 50, 100, 300 });
pg.Refresh(true).Numeric(true
).Messages(ms => ms.First(Resources.KendoPageableFirst).Last(Resources.KendoPageableLast).Next(Resources.KendoPageableNext).Previous(Resources.KendoPageablePrevious).Empty(Resources.KendoPageableEmpty)
.ItemsPerPage(Resources.KendoItemsPerPage).Display(Resources.KendoPageableDisplay));
})
.DataSource(dataSource => dataSource.Ajax().PageSize(10)
.ServerOperation(false).Model(model => model.Id(p => p.IdEkstenzija))
.Read(read => read.Action("Read", "EkstenzijaDatoteke").Type(HttpVerbs.Post))))
Related
I have a qr-code in my react-native project from react-native-qrcode-svg like this:
<QRCode
value={singleTicketResponse.voucher}
size={width * 0.5}
getRef={(c) => (svg = c)}
/>;
I want to save this QR to the gallery! I use this code for saving it to gallery!
svg.toDataURL((data) => {
RNFS.writeFile(
RNFS.CachesDirectoryPath + `/${tracking_code}.png`,
data,
"base64"
)
.then((success) => {
return CameraRoll.save(
RNFS.CachesDirectoryPath + `/${tracking_code}.png`,
"photo"
);
})
.then(() => {
onClose();
})
.catch((e) => {
console.log("saveToGallery", e);
});
});
Now I want to save this QR with white background in the gallery!
Because now, I save QR to gallery and gallery show this in black background and scanner does not detect QR-code!!! Is there any solution??
In other words, how to combine two images (white background and QR-code) or how to set a background for this image??
You can simply add quietZone props to QRCode component. This props is the margin around the QR-code and when yo save the QR it is shown!!
<QRCode
value={singleTicketResponse.voucher}
size={width * 0.5}
quietZone={10} // this props
getRef={c => (svg = c)}
/>
Hint: Pastebin links have been inserted as shown up in my last comment
Hint: Solution of Muhammad still doesn't work(see a picture of the new tooltip)!
My layout file is coded like this:
<?php
use yii\helpers\Html;
use common\wsl_components\AdminLteAsset;
$js = <<<SCRIPT
$(function () {
$('body').tooltip({
selector: '[data-toggle="tooltip"]',
html:true
});
});
SCRIPT;
// Register tooltip/popover initialization javascript
$this->registerJs($js);
AdminLteAsset::register($this);
$this->beginPage()
?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head(); ?>
</head>
<body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
<?php $this->beginBody(); ?>
<div class="wrapper">
<?=
$this->render(
'header.php'
);
?>
<?=
$this->render(
'left.php'
);
?>
<?=
$this->render(
'content.php', ['content' => $content]
);
?>
</div>
<?php $this->endBody(); ?>
</body>
</html>
<?php $this->endPage(); ?>
My GridView is coded like this:
[
'attribute' => $dummy ,
'label' => Yii::t ( 'app' , 'Charakterisierung' ) ,
'format' => 'html' ,
'value' => function($model) {
if ( !empty ( $model->person->personentypDominant->typ_name )) {
$tag = Html::tag ( 'span' , 'Tooltip-Touch Me!' , [
// html-tags won't be rendered in title
'title' => $model->person->personentypDominant->typ_empfehlung ,
'data-placement' => 'left' ,
'data-toggle'=>'tooltip',
'style' => 'white-space:pre;border:1px solid red;'
] );
return $tag . "<br>" . $model->person->personentypDominant->typ_verhaltensmerkmal_im_team_1 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_bei_stress_3 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_am_arbeitsplatz_4;
}
}
],
Nevertheless, HTML-Tags in Tooltip won't be rendered. They appear, as they are in database, for instance like this:
Verhaltensempfehlung:<br><ul><li>
Kompetenz und Selbstbewusstsein zeigen,</ul></li>
I don't know why, but upper tags won't be interpreted. They are in Tooltip hardcoded. Any ideas, what I do wrong?
Edit: My question having been answered by Muhammad is exactly same, but answer didn't solve my problem!
In order to show my problem, look at attachement,please!
You have 2 mistakes apparently
In this view you provided on the line 149 you are missing the attribute data-toggle="tooltip" on the spans.
change them to
$tag_rot = Html::tag(
'span', 'Typ Rot', [
'title' => $tooltip_rot,
'data-toggle' => 'tooltip',
'data-placement' => 'left',
'style' => 'white-space:pre;border:2px solid red;'
]
);
$tooltip_green = \common\modules\lookup\models\LPersonentyp::findOne(2)->typ_empfehlung;
$tag_green = Html::tag(
'span', 'Typ Grün', [
'title' => $tooltip_green,
'data-toggle' => 'tooltip',
'data-placement' => 'left',
'style' => 'white-space:pre;border:2px solid green;'
]
);
$tooltip_blue = \common\modules\lookup\models\LPersonentyp::findOne(3)->typ_empfehlung;
$tag_blue = Html::tag(
'span', 'Typ Blau', [
'title' => $tooltip_blue,
'data-toggle' => 'tooltip',
'data-placement' => 'left',
'style' => 'white-space:pre;border:2px solid blue;'
]
);
In your Gridview column you are using "format"=>"html" whereas you should be using "format"=>"raw"
change the column definition to the following
[
'attribute' => $dummy ,
'label' => Yii::t ( 'app' , 'Charakterisierung' ) ,
'format' => 'raw' ,
'value' => function($model) {
if ( !empty ( $model->person->personentypDominant->typ_name ) ) {
$tag = Html::tag ( 'span' , 'Tooltip-Touch Me!' , [
'title' => $model->person->personentypDominant->typ_empfehlung ,
'data-placement' => 'left' ,
'data-toggle' => 'tooltip' ,
'style' => 'white-space:pre;border:1px solid red;'
] );
return $tag . "<br>" . $model->person->personentypDominant->typ_verhaltensmerkmal_im_team_1 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_bei_stress_3 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_am_arbeitsplatz_4;
}
}
] ,
The ANSWER i gave previously was more focused towards the tooltip usage with the html::tag() and i used your code for gridview column to copy paste, and forgot to mention it there in case of using inside the gridview, i have updated that answer too.
In case if you still could not achieve a view of HTML inside the tooltip after #Muhammad Omer Aslam's answer.
Try to add 'data-html' => 'true' or with js way $(selector).tooltip({html: true}) NOTE: based on bootstrap official documentation Use text if you're worried about XSS attacks.
Check if you do not include a jquery-ui tooltip widget. Which will overwrite bootstrap's tooltip.
To Fix it add a script like :
$(selector).tooltip({
content: function () {
return this.getAttribute("title");
},
});
In this link you can find other ways fix jQeuer-UI tooltip
Be warned that Bootstrap 4.3.1 and 3.4.1 now comes with an HTML sanitizer and a most of tags are now suppressed by default.
Here the bootstrap blog annuncement and the docs for 3.4.1.
So now you need to whitelist any other tag inside your tooltip (or popover) HTML
var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList
// To allow table elements
myDefaultWhiteList.table = []
// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']
// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)
// initialize your tooltip
$(function () {
$('[data-toggle="tooltip"]').tooltip({
// set your custom whitelist
whiteList: myDefaultWhiteList
});
});
i am using Yii2 with a scroll pager extension: http://kop.github.io/yii2-scroll-pager/
However, when you set the scroll for a div, instead of the whole screen, ajax is not loading any additional items when you scroll down.
Here's my code:
echo ListView::widget([
'dataProvider' => $newsDataProvider,
'itemOptions' => ['class' => 'item'],
'itemView' => '_news_item_view',
'pager' => [
'class' => \kop\y2sp\ScrollPager::className(),
'negativeMargin' => '200',
'triggerText' => 'Load More news',
'triggerOffset' => 3,
'noneLeftText' => '',
],
'summary' => '',
]);
But this is not working. You can see it live mode here: http://188.226.170.133/ on the div with id = w0
here's css i've added to make the scroll happen only on this div:
#w0 {
height: 600px;
overflow-y: scroll;
}
Any suggestions?
Just starting to learn the Yii. I do not know how to change the button and remove the "No files selected" in the widget
"CMultiFileUpload" in Yii framework?
$this->widget('CMultiFileUpload', array(
'model'=>$model,
'attribute'=>'photos',
'accept'=>'jpg|jpeg|gif|png',
'name'=>'photos',
'remove'=>'remove',
'options'=>array(
),
'denied'=>'File is not allowed',
'max'=>4, // max 10 files
));
This is browser dependent. Ex. Mozilla shows the input file type field with "No files selected". In IE it will come defferently.
If you want to hide the message "No files selected", do it with CSS
input[type='file']
{
color: transparent;
}
If you want to customize more, Try this bellow code.
Add this CSS code in your CSS file
#multFileUpload button#fileAlt
{
border: 3px solid #cccccc;
background-color: #FF7B10 !important;
color: #ffffff;
font-size: 14px;
padding: 10px 5px;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#multFileUpload input[type='file']
{
display: none;
}
Add this jQuery code in your javascript file
$(document).ready(function()
{
var maxFiles = 4;
var fileCountStart = 0;
$("#fileAlt").on('click', function()
{
fileCountStart += 1;
if (maxFiles >= fileCountStart)
{
$('#photos').trigger('click');
if (fileCountStart == maxFiles)
$("#fileAlt").attr('disabled', 'disabled');
}
});
});
Now Yii code
<div id="multFileUpload">
<button id="fileAlt">Select an Image</button>
<?php
$this->widget('CMultiFileUpload', array(
'model' => $model,
'id'=>'photos',
'attribute' => 'photos',
'accept' => 'jpg|jpeg|gif|png',
'name' => 'photos',
'remove' => 'remove',
'options' => array(
),
'denied' => 'File is not allowed',
'max' => 4, // max 10 files
));
?>
</div>
I have a yii application and I use themes to manage different styles and layouts. In the default generated contact.php I use the following code to generate a captcha verification for the form:
//webroot/themes/botany/views/site/contact.php
<?php //echo $form->labelEx($model,'verifyCode'); ?>
<div>
<?php $this->widget('CCaptcha', array('showRefreshButton' => true,
'buttonLabel' => 'Refresh',
'buttonOptions' => '',
'buttonType' => 'button',
'clickableImage' => true));
?>
<?php echo $form->textField($model,'verifyCode', array('class' => 'form-control', 'placeholder' => 'Captcha*')); ?>
</div>
<p>Please enter the letters as they are shown in the image above.
<br/>Letters are not case-sensitive.</p>
<?php echo $form->error($model,'verifyCode'); ?>
<?php endif; ?>
Although, I have set showRefreshButton => true I could not able to see the refresh button. The following screen shot demonstrates the absence of refresh button:
After some inspection, I found, what I think, a bug in Yii, in which, different widgets generate HTML elements with the same id.
In my case zii.widgets.CMenu widgets in webroot/themes/botany/views/layouts/main.php generates the same id for the ul of the navigation menu and the Captcha widget image regarded id by the generated jquery by the captcha widget.
I could able to solve this issue by supplying the id option of CMenu
<?php $this->widget('zii.widgets.CMenu',array(
'id' => 'gds',
'htmlOptions' => array('class' => 'nav'),
'items'=>array(
array('label'=>'Home', 'url'=>array('/site/index')),
array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
array('label'=>'Contact', 'url'=>array('/site/contact')),
array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
),
)); ?>
and setting yw0 id for the captcha image.
<?php $this->widget('CCaptcha', array('imageOptions' => array('id' => 'yw0'),'showRefreshButton' => true,'buttonLabel' => 'Refresh', 'buttonOptions' => '', 'buttonType' => 'button')); ?>
What type of render function did you use? If you are using renderPartial, it won't show the refresh button. The easy way is create a new blank layout and use render()
http://www.dukaweb.net/2013/12/why-does-yii-captcha-not-display-get.html