I have two kendo windows one below the other in the page with minimize and maximize options. When I close or minimize the first window the window below should come up. Could you please help me achieve this?
<div id="dialog"></div>
<div id="dialog1"></div>
<script>
$("#dialog").kendoWindow({
animation: {
close: false
}
});
$("#dialog1").kendoWindow({
animation: {
close: false
}
});
</script>
Try:
<script>
$("#dialog").kendoWindow({
animation: {
close: false
},
close: function(e) {
var d1 = $("#dialog1").data("kendoWindow");
d1.open();
},
minimize: function(e) {
var d1 = $("#dialog1").data("kendoWindow");
d1.open();
}
});
$("#dialog1").kendoWindow({
animation: {
close: false
}
});
</script>
http://docs.telerik.com/kendo-ui/api/javascript/ui/window#methods-open
Use the toFront() method
$("#dialog1").kendoWindow({
animation: {
close: false
},
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
minimize: function(e) {
var d1 = $("#dialog").data("kendoWindow");
d1.toFront();
},
close: function(e) {
var d1 = $("#dialog").data("kendoWindow");
d1.toFront();
}
});
DEMO
Related
I used full calendar in my CodeIgniter project to manage events. All other parts of the project are working properly. But the calendar output is look like this :
The dates are collapsed in the output. Relevant JavaScript for calendar as follows :
<Script>
$(document).on('click', '.month_select', function() {
var month = $(this).data('month');
var moment = $('#calendar').fullCalendar('getDate');
var currentMonth = moment.format('YYYY') + '-' + month + '-' + 10;
$('#calendar').fullCalendar('gotoDate', currentMonth);
});
$(function() {
$('#viewed,#new,#issued,#recieved,#request,#return, #requestProofs').on('ifChanged', function(event) {
$('#calendar').fullCalendar('refetchEvents');
});
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$('#calendar').fullCalendar({
aspectRatio: 1.7,
firstDay: 1,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
allDay: true,
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
events: {
url: "<?= site_url('document/getImprestDocuments') ?>",
data: function() {
return {
viewed: $('#viewed').is(':checked'),
new: $('#new').is(':checked'),
issued: $('#issued').is(':checked'),
recieved: $('#recieved').is(':checked'),
request: $('#request').is(':checked'),
requestProofs: $('#requestProofs').is(':checked'),
return: $('#return').is(':checked'),
};
},
error: function() {
$('#script-warning').show();
}
},
eventClick: function(event) {
if (event.url) {
window.open(event.url);
event.color = event.default_color;
$('#calendar').fullCalendar('updateEvent', event);
return false;
}
},
eventRender: function(event, element) {
},
loading: function(bool) {
if (bool) {
$(this).block({
message: '<div class="loading-message"><h3 style="margin: 5px;"><img style="width:35px;" src="<?= base_url() ?>public/dist/img/ring-alt.gif" > Processing...</h3></div>',
cenrerY: true,
css: {
border: '3px solid rgb(221, 75, 57)'
}
});
} else {
$(this).unblock();
}
}
});
});
$(document).ready(function() {
var table = $("#request_imprest").DataTable({
"order": [
[1, "desc"]
],
columnDefs: [{
sortable: false,
"class": "index",
targets: 0
}]
})
table.on('order.dt search.dt', function() {
table.column(0, {
search: 'applied',
order: 'applied',
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
})
</script>
url: "<?= site_url('document/getImprestDocuments') ?>" is also working fine. What may be going wrong ? Can anyone help ?
I use kendo grid and want to show kendo tooltip for icon in header cells.
I have the following code:
<div id="grid"></div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("List", "i3screenResult"))",
type: "POST",
dataType: "json",
data: function () {
var data = {
};
addAntiForgeryToken(data);
return data;
}
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
},
dataBinding: function (e) {
$('.questionmark').on("hover", function () {
var tooltip = $(this).kendoTooltip({
content: $(this).attr('tooltip'),
width: 120,
position: "top",
animation: {
open: {
effects: "zoom",
duration: 150
}
}
}).data("kendoTooltip");
});
},
scrollable: false,
columns: [
{
field: "BackgroundReportAccount",
headerTemplate: "#T("DrugConsortium.i3screen.Fields.BackgroundReportAccount") <img src='/images/question-mark-icon.png' class='questionmark' tooltip='#T("DrugConsortium.i3screen.Fields.BackgroundReportAccount.Details")' />",
width: 150
},
{
field: "ProviderReferenceId",
headerTemplate: "#T("DrugConsortium.i3screen.Fields.ProviderReferenceId") <img src='/images/question-mark-icon.png' class='questionmark' tooltip='#T("DrugConsortium.i3screen.Fields.ProviderReferenceId.Details")' />",
width: 150
},
//....
]
});
});
</script>
It works, but only since second hover event for img.
Why so and how to fix?
Try this AFTER grid initialization:
$('#grid').kendoTooltip({
content: function(e) {
return $(e.target).attr('tooltip');
},
filter: 'img.questionmark',
width: 120,
position: "top",
animation: {
open: {
effects: "zoom",
duration: 150
}
}
});
Also, you should change the attribute name from tooltip to data-tooltip since tooltip is not a standard HTML attribute. Then you can get it's value with $(e.target).data('tooltip');
Demo
)
I am using KENDO UI with IFRAME and I want to display an alert when the user clicks to close his WEB browser when the IFRAME is active with KENDO.
So I specify that I want to see the alert is triggered only if the IFRAME is active
Here is my code :
<button id="refresh" class="k-button k-primary" title="START">START</button>
<div id="messageDialog"></div>
<script>
var isClosed = false;
$("#refresh").click(function(e) {
e.preventDefault();
var id = "target_iframe";
var dialog = $("<div><iframe class='k-content-frame' name='" + id + "'></div>").kendoWindow({
title: "test",
close: function() { this.destroy() },
iframe: true,
close: function(e) {
if(!isClosed) {
$("#messageDialog").kendoDialog({
title: "test",
content: "Exit ?",
visible: false,
show: function() {
e.preventDefault();
},
actions: [{
text: "Exit",
action: function(e){
setTimeout(function() {
isClosed = true;
$("#target_iframe").data("kendoWindow").close();
}, 200);
},
primary: true
},{
text: "Cancel"
}]
}).data("kendoDialog").open();
}
},
deactivate: function() {
isClosed = false;
}
});
dialog.data("kendoWindow").center().open();
$("<form />", {
action: "https://www.mywebsite.com/",
method: "post",
target: id
})
.hide().appendTo("body")
// add any data
.append("<input name='foo' />").find("[name=foo]").val("bar").end()
.submit().remove();
});
</script>
Thank you in advance :)
I am a student studying vue.
I used Vue-chartjs to draw a graph, and I'd like to display the value on a pie graph.
But I don't know what to do.
Please help me...
the current situation (image) : enter image description here
My wish (image) : enter image description here
Vue.component('pie-chart', {
extends : VueChartJs.Pie,
props: ['data', 'options'],
mounted(){
this.renderPieChart();
},
computed: {
attendanceData : function(){
return this.data
}
},
methods : {
renderPieChart : function(){
this.renderChart(
{
labels: ['a','b','c','d'],
datasets: [{
backgroundColor: ['#10a236', '#f9cd41', '#fe7272', '#5c7add'],
data: [10,20,30,40]
}]
},
{
responsive: true,
maintainAspectRatio: false,
pieceLabel: {
render: 'value',
precision: 1,
}
}
)
}
},
watch : {
attendanceData : function(){
this.$data._chart.destroy();
this.renderPieChart();
}
}
});
As The dicusstion on tooltip of chart.js at Stackoverflow, uses plugin is one solution.
then as Vue chart.js guide said,
in mounted(), uses this.addPlugin to add your plugin like below demo:
Vue.config.productionTip = false
//below plugin is copied from https://stackoverflow.com/a/37989832/5665870
let pluginConfig = {
id: 'my-plugin',
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
}
Vue.component('pie-chart', {
extends : VueChartJs.Pie,
props: ['data', 'options'],
mounted(){
this.addPlugin(pluginConfig);
this.renderPieChart();
},
computed: {
attendanceData : function(){
return this.data
}
},
methods : {
renderPieChart : function(){
this.renderChart(
{
labels: ['a','b','c','d'],
datasets: [{
backgroundColor: ['#10a236', '#f9cd41', '#fe7272', '#5c7add'],
data: [10,20,30,40]
}]
},
{
responsive: true,
maintainAspectRatio: false,
pieceLabel: {
render: 'value',
precision: 1
},
showAllTooltips: true
}
)
}
},
watch : {
attendanceData : function(){
//this.$data._chart.destroy();
//this.renderPieChart();
}
}
})
var vm = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
<div id="app">
<pie-chart></pie-chart>
</div>
Please, help me!
This is my code:
this.rez[str].each(
function(v){
var li = new Element('li', {
'html': v[1],
'cl_id': v[0],
styles: {
backgroundColor: 'white',
},
events: {
'mousemove': function(){this.focus(li)}.bind(this),
'click' : function(){
alert('click);
}.bind(this),
'keydown' : function(event){
alert('keydown');
}.bind(this)
}
}).inject(this.blockul);
}, this
);
The event "keydown" doed not work. How to fix it?