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
});
});
Related
I am using the built in functionality of KendoUi Grid to export the grid data in pdf http://demos.telerik.com/kendo-ui/grid/pdf-export. It is working properly when data language is English. But when data language is right to left such as persian or arabic, in pdf export show letters separately and contrariwise.
for example show "مان" instead of "نام".
How can Solve it.
My Code:
#(Html.Kendo().Grid<MyModel>()
.Name("GridName")
.ToolBar(toolbar =>
{
toolbar.Pdf().Text(" ").HtmlAttributes(new { #class = "excel-pdf-btn fa fa-file-pdf" });
})
.Pdf(pdf => pdf.AllPages().FileName("MyFileName.pdf").PaperSize("A4").ProxyURL(Url.Action("Pdf_Export_Save", "Grid")))
.Columns(columns =>
{
columns.Bound(t=> t.Id).Visible(false);
columns.Bound(t => t.Name).Title("نام");
.DataSource(t => t
.Ajax()
.Model(m => m.Id(i => i.Id))
.PageSize(15)
.Read(r => r.Action("FillGrid", "MyController"))
)
)
Update:
I embed ttf font. but problem not solved.
<script>
kendo.pdf.defineFont({
'serif': 'MyFont',
'serif|bold': 'MyFont',
'serif|italic': 'MyFont',
'serif|bold|italic': 'MyFont',
'sans-serif': 'MyFont',
'sans-serif|bold': 'MyFont',
'sans-serif|italic': 'MyFont',
'sans-serif|bold|italic': 'MyFont',
'monospace': 'MyFont',
'monospace|bold': 'MyFont',
'monospace|italic': 'MyFont',
'monospace|bold|italic': 'MyFont',
"MyFont" : "#Url.Content("~/Content/fonts/MyFont.ttf")"
});
</script>
Unfortunately - according to this: https://feedback.telerik.com/kendo-jquery-ui/1359291-add-right-to-left-pdf-support it doesn't look like it is supported in the PDF export as of yet.
There are some possible options listed here - no idea if they work though. Export to PDF using Kendo UI (issue with RTL languages)
I've started working on a board game prototype and decided to go with Vue.js. I have some experience with JavaScript and everything was going fine ... until I tried to access a property passed with 'props' in a component.
Here's the whole code:
<!DOCTYPE HTML>
<html>
<head>
<title>Board</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
#board {
width: 600px;
}
.square { width: 100px; height: 100px; margin: 1px; border: 1px solid grey; display: inline-block; float: left; }
</style>
</head>
<body>
<div id="board">
<square v-for="square in squares"></square>
</div>
<script>
var app = new Vue({
el: '#board',
data: {
squares: []
}
})
const rows = 5
const cols = 5
const reservedLocation = { row: 2, col: 2 }
Vue.component('square', {
props: [
'row',
'col',
'type',
],
template: '<div class="square" v-on:click="logLocation"></div>',
methods: {
logLocation: function() {
console.log(this)
console.log("Location: " + this.col + "x" + this.row )
},
},
})
for (var row=0; row<rows; row++) {
for (var col=0; col<cols; col++) {
const type = (row == reservedLocation.row && col == reservedLocation.col) ? 'reserved' : 'empty'
app.squares.push({ row: row, col: col, type: type })
}
}
</script>
</body>
</html>
What's happening there is the "board" div is filled with the "square" components. Each square component has the 'row', 'col' and 'type' properties, passed to it as 'props'. When the user click on a square, the 'logLocation' function of the corresponding component is called and all that function does is, it logs the 'row' and 'col' properties.
Everything works fine except the message logged is: "Location: undefinedxundefined", in other words, both this.col and this.row seems to be undefined. I've checked 'this', and it seems to be the correct component.
I'm sure it's something obvious but I couldn't find an answer in either the official documentation, in tutorials or even here, on Stack Overflow itself – perhaps I'm not using the correct terms.
A bit of new info: the 'row' and 'col' properties are set on the component object and in the '$props' property but the value they return in 'undefined'. Am I, somehow, passing the parameters incorrectly?
Solution
Turns out, there is a section in the Vue.js documentation dedicated specifically to using 'v-for' with components: "v-for with a Component" and here's the relevant portion of the code:
<div id="board">
<square
v-for="square in squares"
:key="square.id"
:row="square.row"
:col="square.col"
:type="square.type"
></square>
</div>
Huge thanks to Stephen Thomas for pointing me in the right direction!
You've defined the props correctly, and you're accessing the props correctly, but you haven't actually set them to any value. The markup:
<square v-for="square in squares"></square>
doesn't pass the props to the component. Perhaps you want something like
<div v-for="row in rows" :key="row">
<div v-for="col in cols" :key="col">
<square :row="row" :col="col"></square>
</div>
</div>
Try to use
console.log("Location: " + this.$props.col + " x " + this.$props.row )
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?
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))))
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