We Keep Coding

Tippy.js custom theme not being applied

I want to change the style of a tooltip (from tippy.js) and am doing exactly as being told in the docs here:
Themes are created by including a class on the tippy-tooltip element as part of a selector in the form .tippy-tooltip.x-theme. Let's demonstrate this by creating our own theme called tomato:
.tippy-tooltip.tomato-theme {
background-color: tomato;
color: yellow;
}
To apply the theme, specify a theme prop without the -theme suffix:
tippy('button', {
theme: 'tomato',
});
But for some reason my tooltip stays the default color, why?
I added this style:
.tippy-tooltip.tomato-theme {
background-color: tomato;
color: yellow;
}
.infosvg {
width: 20px;
}
tooltippy {
position: absolute;
top: 150px;
left: 300px;
}
My html
<span class="tooltippy">
<img class="infosvg" src="assets/images/custom/icon_info.svg">
<div class="tooltipcontent darktext">Test</div>
</span>
My js:
$( ".tooltippy" ).each(function( i ) {
tippy(this, {
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
theme: 'tomato',
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
What is going wrong? I've tried different colors in hex or in text like above but it stays the default tooltip.

According to the documentation you need to change this line:
.tippy-tooltip.tomato-theme {
to:
.tippy-box[data-theme~='tomato'] {
And, in order to add the style to the arrow you need also:
.tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before {
The snippet:
$( ".tooltippy" ).each(function( i ) {
tippy(this, {
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
theme: 'tomato',
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
.tippy-box[data-theme~='tomato'] {
background-color: tomato;
color: yellow;
}
.tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before {
border-right-color: tomato;
}
.infosvg {
width: 20px;
}
.tooltippy {
position: relative;
top: 150px;
left: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/#popperjs/core#2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js#6/dist/tippy-bundle.umd.js"></script>
<div>
<span class="tooltippy">
<img class="infosvg" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Infobox_info_icon.svg">
<div class="tooltipcontent darktext">Test</div>
</span>
</div>

How to convert this jQuery code to ReactJS code (React, jQuery, HTML, CSS)

I have been trying to convert this code into ReactJS code, but I have never go through any of jQuery so I have try to convert most of the parts into ReactJS and this is what I get:
(This is what I have been trying to convert to ReactJS)
import React, {Component} from 'react';
import $ from "jquery";
import jQuery from 'query';
import jQuery-ui from 'jquery-ui';
import './TestChart.css';
class TestChart extends Component{
render(){
const options = {
animationEnabled: true,
title: {
text: "GDP Growth Rate - 2016"
},
axisY: {
title: "Growth Rate (in %)",
suffix: "%",
includeZero: false
},
axisX: {
title: "Countries"
},
data: [{
type: "column",
yValueFormatString: "#,##0.0#"%"",
dataPoints: [
{ label: "Iraq", y: 10.09 },
{ label: "T & C Islands", y: 9.40 },
{ label: "Nauru", y: 8.50 },
{ label: "Ethiopia", y: 7.96 },
{ label: "Uzbekistan", y: 7.80 },
{ label: "Nepal", y: 7.56 },
{ label: "Iceland", y: 7.20 }
]
}]
};
return(
<div id="container">
<button id="showChart">Click to Show Chart in a Pop-up</button>
</div>,
<div id="dialogBox" style="display: none;">
<div id="chartContainer" class="dialog" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
</div>
);
}
}
export default TestChart;
This is the jQuery part which I don't know how to convert it into ReactJS code:
(I want to convert this part into ReactJS code)
$("#showChart").click(function() {
$("#dialogBox").dialog({
open: function(event,ui) {
$(".ui-widget-overlay").bind("click", function(event,ui) {
$("#dialogBox").dialog("close");
});
},
closeOnEscape: true,
draggable: false,
resizable: false,
title: "GDP Growth Rate",
width: 700,
modal: true,
show: 500
});
$(".ui-widget-overlay").css({"background-color": "#111111"});
$("#chartContainer").CanvasJSChart(options);
});
(This is the original code)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
window.onload = function () {
var options = {
animationEnabled: true,
title: {
text: "GDP Growth Rate - 2016"
},
axisY: {
title: "Growth Rate (in %)",
suffix: "%",
includeZero: false
},
axisX: {
title: "Countries"
},
data: [{
type: "column",
yValueFormatString: "#,##0.0#"%"",
dataPoints: [
{ label: "Iraq", y: 10.09 },
{ label: "T & C Islands", y: 9.40 },
{ label: "Nauru", y: 8.50 },
{ label: "Ethiopia", y: 7.96 },
{ label: "Uzbekistan", y: 7.80 },
{ label: "Nepal", y: 7.56 },
{ label: "Iceland", y: 7.20 }
]
}]
};
$("#showChart").click(function() {
$("#dialogBox").dialog({
open: function(event,ui) {
$(".ui-widget-overlay").bind("click", function(event,ui) {
$("#dialogBox").dialog("close");
});
},
closeOnEscape: true,
draggable: false,
resizable: false,
title: "GDP Growth Rate",
width: 700,
modal: true,
show: 500
});
$(".ui-widget-overlay").css({"background-color": "#111111"});
$("#chartContainer").CanvasJSChart(options);
});
}
</script>
<style>
#showChart{
background-color: #5bb85b;
color: #ffffff;
padding: 10px;
border: 0px;
border-radius: 8px;
font-size: 18px;
outline: none;
cursor: pointer;
}
#container{
position: fixed;
top: 50%;
width:100%;
text-align: center;
margin-top: -41px;
}
</style>
</head>
<body>
<div id="container">
<button id="showChart">Click to Show Chart in a Pop-up</button>
</div>
<div id="dialogBox" style="display: none;">
<div id="chartContainer" class="dialog" style="height: 250px; width: 100%;"></div>
</div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>

I wouldn't import any jQuery and do pure React:
import React from 'react';
import './TestChart.css';
class TextChart extends React.Component {
constructor(props) {
super(props);
this.toggleDialogBox = this.toggleDialogBox.bind(this);
this.state = {
isDialogueShown: false;
}
}
toggleDialogBox(event) {
const { isDialogueShown } = this.state;
this.setState({isDialogueShown: !isDialogueShown});
}
render() {
const { isDialogueShown } = this.state;
const dialogueText = isDialogueShown ? "Click to Show Chart in a Pop-up" : "Click to Close Chart";
return (
<div>
<div id="container">
<button id="showChart" onClick={this.toggleDialogBox}>{dialogueText}</button>
</div>
<div class={`dialogBox ${isDialogueShown ? 'visible' : 'hidden'}`}>
<div id="chartContainer" class="dialog"></div>
</div>
</div>
);
}
}
This would be in css file:
.dialogBox.hidden {
display: none;
}
#chartContainer.dialog {
height: 250px;
width: 100%;
}

VueJS: Property or method ... is not defined on the instance but referenced during render

VueJS course Robot Builder: https://app.pluralsight.com/player?course=vuejs-fundamentals&author=jim-cooper&name=c8f8ef67-c67b-4a52-b109-9dbf2caae028&clip=3&mode=live
My VueJS-RobotBuilder repo:
https://github.com/leongaban/VueJS-RobotBuilder
I'm currently doing a simple tutorial on VueJS, however getting an error on an imported data object availableParts.
What I don't understand is that I have the json object from parts.js imported correctly in the data object. And I can log it out, however I get an error in the template area I assume?
Full code:
<template>
<div>
<div class="top-row">
<div class="top part">
<img v-bind:src="availableParts.heads[0].src" title="head"/>
<button class="prev-selector">◄</button>
<button class="next-selector">►</button>
</div>
</div>
<div class="middle-row">
<div class="left part">
<img v-bind:src="availableParts.arms[0].src" title="left arm"/>
<button class="prev-selector">▲</button>
<button class="next-selector">▼</button>
</div>
<div class="center part">
<img v-bind:src="availableParts.torso[0].src" title="torso"/>
<button class="prev-selector">◄</button>
<button class="next-selector">►</button>
</div>
<div class="right part">
<img v-bind:src="availableParts.arms[0].src" title="right arm"/>
<button class="prev-selector">▲</button>
<button class="next-selector">▼</button>
</div>
</div>
<div class="bottom-row">
<div class="bottom part">
<img v-bind:src="availableParts.bases[0].src" title="base"/>
<button class="prev-selector">◄</button>
<button class="next-selector">►</button>
</div>
</div>
</div>
</template>
<script>
import availableParts from '../../data/parts';
console.log('availableParts', availableParts);
export default {
name: 'RobotBuilder',
data() {
return availableParts;
},
};
</script>
<style>
.part {
position: relative;
width:165px;
height:165px;
border: 3px solid #aaa;
}
.part img {
width:165px;
}
.top-row {
display:flex;
justify-content: space-around;
}
.middle-row {
display:flex;
justify-content: center;
}
.bottom-row {
display:flex;
justify-content: space-around;
border-top: none;
}
.head {
border-bottom: none;
}
.left {
border-right: none;
}
.right {
border-left: none;
}
.left img {
transform: rotate(-90deg);
}
.right img {
transform: rotate(90deg);
}
.bottom {
border-top: none;
}
.prev-selector {
position: absolute;
z-index:1;
top: -3px;
left: -28px;
width: 25px;
height: 171px;
}
.next-selector {
position: absolute;
z-index:1;
top: -3px;
right: -28px;
width: 25px;
height: 171px;
}
.center .prev-selector, .center .next-selector {
opacity:0.8;
}
.left .prev-selector {
top: -28px;
left: -3px;
width: 144px;
height: 25px;
}
.left .next-selector {
top: auto;
bottom: -28px;
left: -3px;
width: 144px;
height: 25px;
}
.right .prev-selector {
top: -28px;
left: 24px;
width: 144px;
height: 25px;
}
.right .next-selector {
top: auto;
bottom: -28px;
left: 24px;
width: 144px;
height: 25px;
}
.right .next-selector {
right: -3px;
}
</style>
parts.js
const images = require.context('./images', true, /\.png$/);
const parts = {
heads: [
{
id: 1,
description:
'A robot head with an unusually large eye and teloscpic neck -- excellent for exploring high spaces.',
title: 'Large Cyclops',
src: images('./head-big-eye.png'),
type: 'heads',
cost: 1225.5,
},
{
id: 2,
description: 'A friendly robot head with two eyes and a smile -- great for domestic use.',
title: 'Friendly Bot',
src: images('./head-friendly.png'),
cost: 945.0,
type: 'heads',
onSale: true,
},
{
id: 3,
description:
'A large three-eyed head with a shredder for a mouth -- great for crushing light medals or shredding documents.',
title: 'Shredder',
src: images('./head-shredder.png'),
type: 'heads',
cost: 1275.5,
},
{
id: 4,
description:
'A simple single-eyed head -- simple and inexpensive.',
title: 'Small Cyclops',
src: images('./head-single-eye.png'),
type: 'heads',
cost: 750.0,
},
{
id: 5,
description:
'A robot head with three oscillating eyes -- excellent for surveillance.',
title: 'Surveillance Bot',
src: images('./head-surveillance.png'),
type: 'heads',
cost: 1255.5,
},
],
arms: [
{
id: 1,
description: 'An articulated arm with a claw -- great for reaching around corners or working in tight spaces.',
title: 'Articulated',
src: images('./arm-articulated-claw.png'),
type: 'arms',
cost: 275,
},
{
id: 2,
description: 'An arm with two independent claws -- great when you need an extra hand. Need four hands? Equip your bot with two of these arms.',
title: 'Two Clawed',
src: images('./arm-dual-claw.png'),
type: 'arms',
cost: 285,
},
{
id: 3,
description: 'A telescoping arm with a grabber.',
title: 'Grabber',
src: images('./arm-grabber.png'),
type: 'arms',
cost: 205.5,
},
{
id: 4,
description: 'An arm with a propeller -- good for propulsion or as a cooling fan.',
title: 'Propeller',
src: images('./arm-propeller.png'),
type: 'arms',
cost: 230,
onSale: true,
},
{
id: 5,
description: 'A short and stubby arm with a claw -- simple, but cheap.',
title: 'Stubby Claw',
src: images('./arm-stubby-claw.png'),
type: 'arms',
cost: 125,
},
],
torsos: [
{
id: 1,
description: 'A torso that can bend slightly at the waist and equiped with a heat guage.',
title: 'Flexible Gauged',
src: images('./torso-flexible-gauged.png'),
type: 'torsos',
cost: 1575,
},
{
id: 2,
description: 'A less flexible torso with a battery gauge.',
title: 'Gauged',
src: images('./torso-gauged.png'),
type: 'torsos',
cost: 1385,
},
{
id: 2,
description: 'A simple torso with a pouch for carrying items.',
title: 'Gauged',
src: images('./torso-pouch.png'),
type: 'torsos',
cost: 785,
onSale: true,
},
],
bases: [
{
id: 1,
description: 'A two wheeled base with an accelerometer for stability.',
title: 'Double Wheeled',
src: images('./base-double-wheel.png'),
type: 'bases',
cost: 895,
},
{
id: 2,
description: 'A rocket base capable of high speed, controlled flight.',
title: 'Rocket',
src: images('./base-rocket.png'),
type: 'bases',
cost: 1520.5,
},
{
id: 3,
description: 'A single-wheeled base with an accelerometer capable of higher speeds and navigating rougher terrain than the two-wheeled variety.',
title: 'Single Wheeled',
src: images('./base-single-wheel.png'),
type: 'bases',
cost: 1190.5,
},
{
id: 4,
description: 'A spring base - great for reaching high places.',
title: 'Spring',
src: images('./base-spring.png'),
type: 'bases',
cost: 1190.5,
},
{
id: 5,
description: 'An inexpensive three-wheeled base. only capable of slow speeds and can only function on smooth surfaces.',
title: 'Triple Wheeled',
src: images('./base-triple-wheel.png'),
type: 'bases',
cost: 700.5,
},
],
};
export default parts;

You are currently returning the whole availableParts object from data which does not have an availableParts property so vue.js gives you this error.
One way to fix it to return an object with an availableParts property which contains your data:
export default {
name: 'RobotBuilder',
data() {
return { availableParts: availableParts };
},
};
The other way to fix this to directly reference the arms, torsos, etc. arrays in your bindings, e.g:
v-bind:src="heads[0].src"

yea I changed the import name to allAvailableParts and then returned the availableParts pointing to that data. Very strange that it works for him but then maybe this is something newer introduced.
import allAvailableParts from '../../data/parts';
export default {
name: 'RobotBuilder',
data() {
return { availableParts: allAvailableParts };
},
};

Export to PDF using Kendo UI (issue with RTL languages)

I am using given code to export html page to pdf by using drawDom method:
$(function(){
$('#ExportToPdf').on("click", function (e) {
var selectedTab = $('.selected-tab').attr("id");
selectedTab = selectedTab.replace("tab-", "#");
var fileName = $(selectedTab).find($('.report-title')).text().replace(' ', '_');
kendo.drawing.drawDOM($(selectedTab))
.then(function (group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
});
})
.done(function (data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: fileName + ".pdf"
});
});
});
});
But result is given below for Arabic characters
I want this result:
I tried every thing what I get on internet.
Adding different types of fonts for unicode and kendo builtin fonts but all in vein.

This question is 8 months old, so you might have found a solution by now.
I just wanted to share my own solution, which is a bit of a hack, but at least it works for me.
Basically, you want to flip the text in the html using the special command: ‭
For example - ‭ grid.client.name (grid.client.name is just an example, replace with where you store the arabic names. Repeat for each cell that contains arabic text).
You will notice now that the text in the pdf is no longer shrinked - but it actually has the wrong direction now. How to fix this? - well,
you simply reverse the arabic text in the code (so basically we reverse the text twice). An example method to reverse a string:
function reverseString(str) {
var newString = "";
for (var i = str.length - 1; i >= 0; i--) {
newString += str[i];
}
return newString;
}
Apply this to all of your data that contains arabic text.
If you've done both of these things, it should now appear correctly after exporting to pdf.
Good Luck.

Here is KENDO UI tutorial and it works fine for me.Can you rewrite your code by analyze this code? If the problem is still continue then we try to find solution again.
<script>
// Import DejaVu Sans font for embedding
// NOTE: Only required if the Kendo UI stylesheets are loaded
// from a different origin, e.g. cdn.kendostatic.com
kendo.pdf.defineFont({
"DejaVu Sans" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"WebComponentsIcons" : "https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf"
});
</script>
<!-- Load Pako ZLIB library to enable PDF compression -->
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/pako_deflate.min.js"></script>
<script>
$(document).ready(function() {
$(".export-pdf").click(function() {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM($(".content-wrapper"))
.then(function(group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
});
})
.done(function(data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "HR-Dashboard.pdf",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
});
});
});
$(".export-img").click(function() {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM($(".content-wrapper"))
.then(function(group) {
// Render the result as a PNG image
return kendo.drawing.exportImage(group);
})
.done(function(data) {
// Save the image file
kendo.saveAs({
dataURI: data,
fileName: "HR-Dashboard.png",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
});
});
});
$(".export-svg").click(function() {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM($(".content-wrapper"))
.then(function(group) {
// Render the result as a SVG document
return kendo.drawing.exportSVG(group);
})
.done(function(data) {
// Save the SVG document
kendo.saveAs({
dataURI: data,
fileName: "HR-Dashboard.svg",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
});
});
});
var data = [{
"source": "Approved",
"percentage": 237
}, {
"source": "Rejected",
"percentage": 112
}];
var refs = [{
"source": "Dev",
"percentage": 42
}, {
"source": "Sales",
"percentage": 18
}, {
"source": "Finance",
"percentage": 29
}, {
"source": "Legal",
"percentage": 11
}];
$("#applications").kendoChart({
legend: {
position: "bottom"
},
dataSource: {
data: data
},
series: [{
type: "donut",
field: "percentage",
categoryField: "source"
}],
chartArea: {
background: "none"
},
tooltip: {
visible: true,
template: "${ category } - ${ value } applications"
}
});
$("#users").kendoChart({
legend: {
visible: false
},
seriesDefaults: {
type: "column"
},
series: [{
name: "Users Reached",
data: [340, 894, 1345, 1012, 3043, 2013, 2561, 2018, 2435, 3012]
}, {
name: "Applications",
data: [50, 80, 120, 203, 324, 297, 176, 354, 401, 349]
}],
valueAxis: {
labels: {
visible: false
},
line: {
visible: false
},
majorGridLines: {
visible: false
}
},
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
line: {
visible: false
},
majorGridLines: {
visible: false
}
},
chartArea: {
background: "none"
},
tooltip: {
visible: true,
format: "{0}",
template: "#= series.name #: #= value #"
}
});
$("#referrals").kendoChart({
legend: {
position: "bottom"
},
dataSource: {
data: refs
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source"
}],
chartArea: {
background: "none"
},
tooltip: {
visible: true,
template: "${ category } - ${ value }%"
}
});
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 15,
group: { field: "ContactTitle" }
},
height: 450,
groupable: true,
sortable: true,
selectable: "multiple",
reorderable: true,
resizable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "ContactName",
template: "<div class=\'customer-name\'>#: ContactName #</div>",
title: "Contact",
width: 200
},{
field: "ContactTitle",
title: "Contact Title",
width: 220
},{
field: "Phone",
title: "Phone",
width: 160
},{
field: "CompanyName",
title: "Company Name"
},{
field: "City",
title: "City",
width: 160
}
]
});
});
</script>
<style>
/*
Use the DejaVu Sans font for display and embedding in the PDF file.
The standard PDF fonts have no support for Unicode characters.
*/
.k-widget {
font-family: "DejaVu Sans", "Arial", sans-serif;
font-size: .9em;
}
</style>
<style>
.export-app {
display: table;
width: 100%;
height: 750px;
padding: 0;
}
.export-app .demo-section {
margin: 0 auto;
border: 0;
}
.content-wrapper {
display: table-cell;
vertical-align: top;
}
.charts-wrapper {
height: 250px;
padding: 0 0 20px;
}
#applications,
#users,
#referrals {
display: inline-block;
width: 50%;
height: 240px;
vertical-align: top;
}
#applications,
#referrals {
width: 24%;
height: 250px;
}
.customer-photo {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background-size: 40px 44px;
background-position: center center;
vertical-align: middle;
line-height: 41px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 41px;
padding-left: 10px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/pdf-export/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="box wide hidden-on-narrow">
<h4>Export page content</h4>
<div class="box-col">
<button class='export-pdf k-button'>Export as PDF</button>
</div>
<div class="box-col">
<button class='export-img k-button'>Export as Image</button>
</div>
<div class="box-col">
<button class='export-svg k-button'>Export as SVG</button>
</div>
</div>
<div class="demo-section k-content export-app wide hidden-on-narrow">
<div class="demo-section content-wrapper wide">
<div class="demo-section charts-wrapper wide">
<div id="users"></div>
<div id="applications"></div>
<div id="referrals"></div>
</div>
<div id="grid"></div>
</div>
</div>
<div class="responsive-message"></div>
</div>
</body>
</html>

I made temporary solution that I convert the report into canvas then I exported to pdf. I html2canvas to export html in to canvas. if any one find another solution please let me know.
$('#ExportToPdf').on("click", function (e) {
html2canvas(document.querySelector("#widget-47")).then(canvas => {
$("#widget-47").hide();
$("#widget-47").parent().append(canvas);
});
setTimeout(function () {
kendo.drawing.drawDOM($('#kendo-wrapper'))
.then(function (group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
});
})
.done(function (data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "report.pdf"
});
$("#widget-47").siblings().remove();
$("#widget-47").show();
});
}, 3000);
});

input title overlapping loading div

I got a input title overlapping a loading div and I don´t know how to solve this bug.
The input:
<p></p>
<p></p>
<table id="clientesGrid" cellpadding="0" cellspacing="0"></table>
<div id="clientesPager">
</div>
<p></p>
$('#clientesGrid').jqGrid({
//...
}).navGrid('#clientesPager', { view: false, del: false, add: false, edit: false, search: false },
{ width: 400 }, // default settings for edit
{}, // default settings for add
{}, // delete instead that del:false we need this
{ multipleSearch: true }, // search options
{} /* view parameters*/
).navButtonAdd('#clientesPager', {
id: "addClienteJuridicoButton",
caption: paramFromViewClientes.AddClienteJuridicoText,
title: paramFromViewClientes.AddClienteJuridicoText,
buttonicon: "ui-icon-plus",
onClickButton: function () {
addClienteToExpedienteForm($("#idSolicitudHidden").val(), 2);
},
position: "first"
})
.navButtonAdd('#clientesPager', {
id: "addClienteFisicoButton",
caption: paramFromViewClientes.AddClienteFisicoText,
title: paramFromViewClientes.AddClienteFisicoText,
buttonicon: "ui-icon-plus",
onClickButton: function () {
addClienteToExpedienteForm($("#idSolicitudHidden").val(), 1);
},
position: "first"
});
So as you can see its a jqgrid with 2 buttons to add new customers and in these 2 buttons I got the bug with the loading div.
Loading div bug:
Loading div css:
.divModalDialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; /*! important !*/
display: none; /* last attribute set darkness on scale: 0...1.0 */
/*background-color: rgba(0,0,0,0.7);*/
opacity: 0.7;
text-align: center;
z-index: 999;
/*FOR IE*/
background-color: black;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}