I'm new to use Kendoui, HTML 5 for web , i have create one small Demo app in html 5,in this i need to change the Theme by dynamically , means when i select the color from Combo-box or Drop-down it should be apply for entire page. I searched in Google but i did not get right solution , please guide me how to do .
Here is the code what fallow sample .
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet" typ e="text/css" />
<script src="Scripts/kendo/2013.2.716/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/kendo/2013.2.716/kendo.all.min.js" type="text/javascript"></script>
<style>
html, body
{
margin: 0;
padding: 0;
}
body
{
font: 12px/1.5 Tahoma,sans-serif;
padding: 2em;
}
span.themeChooser
{
float: right;
}
#tree
{
height: 9em;
}
</style>
</head>
<body class="k-content">
<div id="example" class="k-content">
<input class="themeChooser" value="default" />
<div id="tree">
</div>
<p>
Note: in order for the whole page to be styled, the <body> element has a <code>
k-content</code> class.</p>
</div>
<script>
$(function () {
$("#themeChooser").kendoDropDownList({
dataSource: [
{ text: "Black", value: "black" },
{ text: "Blue Opal", value: "blueopal" },
{ text: "Default", value: "default" },
{ text: "Metro", value: "metro" },
{ text: "Silver", value: "silver" }
],
change: function (e) {
var theme = (this.value() || "default").toLowerCase();
changeTheme(theme);
}
});
// sample widget on the page
$("#tree").kendoTreeView({
dataSource: [
{ text: "foo", expanded: true, items: [
{ text: "bar", selected: true }
]
},
{ text: "baz" }
]
});
// loads new stylesheet
function changeTheme(skinName, animate) {
var doc = document,
kendoLinks = $("link[href*='kendo.']", doc.getElementsByTagName("head")[0]),
commonLink = kendoLinks.filter("[href*='kendo.common']"),
skinLink = kendoLinks.filter(":not([href*='kendo.common'])"),
href = location.href,
skinRegex = /kendo\.\w+(\.min)?\.css/i,
extension = skinLink.attr("rel") === "stylesheet" ? ".css" : ".less",
url = commonLink.attr("href").replace(skinRegex, "kendo." + skinName + "$1" + extension),
exampleElement = $("#example");
function preloadStylesheet(file, callback) {
var element = $("<link rel='stylesheet' media='print' href='" + file + "'").appendTo("head");
setTimeout(function () {
callback();
element.remove();
}, 100);
}
function replaceTheme() {
var oldSkinName = $(doc).data("kendoSkin"),
newLink;
if ($.browser.msie) {
newLink = doc.createStyleSheet(url);
} else {
newLink = skinLink.eq(0).clone().attr("href", url);
}
newLink.insertBefore(skinLink[0]);
skinLink.remove();
$(doc.documentElement).removeClass("k-" + oldSkinName).addClass("k-" + skinName);
}
if (animate) {
preloadStylesheet(url, replaceTheme);
} else {
replaceTheme();
}
}
});
</script>
Thank you .
Related
How can we add tinymce editor in the place of editor present in the cell of ag-grid?
In order to customize ag-grid's cell's you need to create a custom Cell Renderer component.
You can pretty much put anything you want in that custom component, including tinyMCE.
More info: https://www.ag-grid.com/javascript-grid-cell-rendering-components/
Please see Cell Renderer
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>var __basePath = './';</script>
<style media="only screen">
html, body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
<script src="https://unpkg.com/#ag-grid-community/all-modules#24.1.0/dist/ag-grid-community.min.js"></script>
</head>
<body>
<div id="myGrid" style="height: 100%;width: 100%" class="ag-theme-alpine"></div>
<script src="main.js"></script>
</body>
</html>
main.js
var columnDefs = [
{ field: 'athlete' },
{ field: 'country' },
{ field: 'year', width: 100 },
{ field: 'gold', width: 100, cellRenderer: 'medalCellRenderer' },
{ field: 'silver', width: 100, cellRenderer: 'medalCellRenderer' },
{ field: 'bronze', width: 100, cellRenderer: 'medalCellRenderer' },
{ field: 'total', width: 100 }
];
var gridOptions = {
columnDefs: columnDefs,
components: {
'medalCellRenderer': MedalCellRenderer
},
defaultColDef: {
editable: true,
sortable: true,
flex: 1,
minWidth: 100,
filter: true,
resizable: true
}
};
// cell renderer class
function MedalCellRenderer() {
}
// init method gets the details of the cell to be renderer
MedalCellRenderer.prototype.init = function(params) {
this.eGui = document.createElement('span');
var text = '';
// one star for each medal
for (var i = 0; i < params.value; i++) {
text += '#';
}
this.eGui.innerHTML = text;
};
MedalCellRenderer.prototype.getGui = function() {
return this.eGui;
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
agGrid.simpleHttpRequest({ url: 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json' })
.then(function(data) {
gridOptions.api.setRowData(data);
});
});
This is my HTML with a custom web component.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Advanced ToDo App with Web Components</title>
</head>
<body>
<todo-item todo="Walk the dog" data-id="1"></todo-item>
<script src="../static/listItems.js"></script>
</body>
</html>
This is my JS file where I set up the component.
const template = document.createElement("template");
template.innerHTML = `<style>
h4 {
color: white;
font-size: 14px;
display: block;
padding: 10px 5px;
background: orange;
}
</style>
<div class="todo-item">
<h4></h4>
</div>
`;
class TodoItem extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
this.shadowRoot.querySelector("h4").innerText = this.getAttribute("todo");
}
connectedCallback() {
this.shadowRoot
.querySelector(".todo-item")
.addEventListener("click", () => {
console.log(this.getAttribute("data-id"));
});
}
}
window.customElements.define("todo-item", TodoItem);
// Über Daten iterieren
const body = document.querySelector("body");
const dummydata = [
{ id: 1, description: "Walk the dog" },
{ id: 2, description: "Play football" }
];
for (item of dummydata) {
console.log(item.description);
todoItem = document.createElement("todo-item");
todoItem.setAttribute("todo", item.description); # Does not work!
todoItem.setAttribute("data-id", item.id);
body.appendChild(todoItem);
}
The component in the HTML works perfectly fine, but when I try to create them dynamically with JavaScript setting the attributes seem not to work. The "todo"-text does not get displayed. Is setting this "todo" attribute invalid?
Got it - the attribute has to be set inside the connectedCallBack function. When doing it before the attribute valu will be null
connectedCallback() {
this.shadowRoot
.querySelector(".todo-item")
.addEventListener("click", () => {
console.log(this.getAttribute("data-id"));
});
this.shadowRoot.querySelector("h4").innerText = this.getAttribute("todo");
}
I am trying to remove the colored label square from the chart tool tip. How can I make that happen in this code with all the other code in tact?
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Title
</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js">
</script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="600" height="200">
</canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [], //start empty backgroundColor: '#e8ebf8', borderColor: '#615BD4', borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { display: false, beginAtZero: true } }], xAxes: [{ ticks: { stepSize: 2, maxTicksLimit: 90 } }] }, legend: { display: false }, tooltips: { intersect: false, showTooltips: true, tooltipEvents: ["mousemove", "touchstart", "touchmove"], tooltipFillColor: "rgba(0,0,0,0.8)" } } }); window.onmessage = function(event) { myChart.data.datasets[0].data = event.data.data; myChart.data.labels = event.data.labels; myChart.update(); }; function handleClick(e) { var activeBars = myChart.getElementAtEvent(e); var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index]; var label = activeBars[0]._model.label; window.parent.postMessage({ "type": "click", // "label":label, "value": value }, "*"); } function ready() { window.parent.postMessage({ "type": "ready" }, "*"); }
</script>
</body>
</html>
Use the callbacks feature to remove the label:
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
I am working on a pdf viewer in angular and I want to display a div on top of a dynamic object. The div displays above the object in every browser but IE. To see this in action here is a plunker : http://plnkr.co/edit/MVzMvS4IwYPC8rEx5M4J?p=preview .
You'll see that it works fine in Chrome, and FireFox but not in IE. Any help would be nice. or even a point in the right direction.
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$sce) {
$scope.name = 'World';
$scope.documentSrc = "http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf";
$scope.frameSrc = $sce.trustAsHtml($scope.documentSrc);
$scope.frameCode = $sce.trustAsHtml('<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" type="application/pdf"></object>');
$scope.display = false;
$scope.changeDoc = function(){
$scope.documentSrc = 'https://media.amazonwebservices.com/AWS_Web_Hosting_Best_Practices.pdf';
};
$scope.changeDocAgain = function (){
$scope.documentSrc = 'http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf';
};
$scope.displayDiv = function (){
if ( $scope.display == false){
$scope.display = true;
} else{
$scope.display = false;
}
}})
.directive('embedSrc', function () {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch(
function() {
return attrs.embedSrc;
},
function() {
element.attr('src', attrs.embedSrc);
}
);
}
};
})
.directive('dynamicObject', function($parse) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.$watch(function() {
return $parse(attrs.data)(scope);
}, function(newValue) {
element.html('<object data="' + newValue + '" type="application/pdf"></object>');
});
}
};
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="changeDoc()">Change Doc</button>
<button ng-click="changeDocAgain()">Change Again Doc</button>
<br/><br/>
<button ng-click="displayDiv()" class="mp-float-left mp-more_options_button">
Search Options
</button>
<div ng-if="display" class="displayDiv">displayMe!</div>
<br/>
<dynamic-object data="documentSrc"></dynamic-object>
style.css
.displayDiv{
position: absolute;
background: red;
width: 280px !important;
z-index: 1000;
padding:10px 10px 0px !important;
height: 50px;
}
.pdfView{
height: 710px;
width :100%;
z-index : 50;
}
Above is the demo code used in plunker as an example. The below code is what i have in my project.
.directive('objectReloadable', function ($rootScope) {
var link = function (scope, element, attrs) {
var currentElement = element;
var watchFunction = function () {
return scope.searchCriteriaService.documentSrc;
};
var updateHTML = function (newValue) {
scope.searchCriteriaService.documentSrc = newValue;
var html = '';
if (attrs.datatype == 'pdf') {
html = '<iframe type="application/pdf" src="' + newValue + '" class="mp-document-size" ></iframe>';
} else if (attrs.datatype == 'html') {
html = '<object data="' + newValue + '" type="text/html" class="mp-document-size"></object>';
} else {
html = '<img src="' + newValue + '" width="100%" style="overflow:scroll"/>'
}
var replacementElement = angular.element(html);
currentElement.replaceWith(replacementElement);
currentElement = replacementElement;
};
scope.$watch(watchFunction, function (newValue, oldValue) {
if (newValue !== oldValue) {
updateHTML(newValue);
}
});
if (scope.searchCriteriaService.documentSrc) {
updateHTML(scope.searchCriteriaService.documentSrc);
}
};
return {
restrict: 'E',
scope: false,
link: link
};
})
The following is the smallest working app.js I could make. It uses an iframe and Google Docs viewer to work, found here and here.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$sce) {
$scope.name = 'World';
$scope.iframeSrc = "http://docs.google.com/gview?url=http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf&embedded=true";
$scope.display = false;
$scope.changeDoc = function(){
$scope.iframeSrc = 'http://docs.google.com/gview?url=https://media.amazonwebservices.com/AWS_Web_Hosting_Best_Practices.pdf&embedded=true';
};
$scope.changeDocAgain = function (){
$scope.iframeSrc = 'http://docs.google.com/gview?url=http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf&embedded=true';
};
$scope.displayDiv = function (){
if ( $scope.display == false){
$scope.display = true;
} else{
$scope.display = false;
}
}
})
.directive('iframeSrc', function () {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch(
function() {
return attrs.iframeSrc;
},
function() {
element.attr('src', attrs.iframeSrc);
}
);
}
};
})
.directive('dynamicObject', function($parse) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.$watch(function() {
return $parse(attrs.data)(scope);
}, function(newValue) {
element.html('<iframe src="' + newValue + '" type="application/pdf"></iframe>');
});
}
};
});
.displayDiv{
position: absolute;
background: red;
width: 280px !important;
z-index: 1000;
padding:10px 10px 0px !important;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="changeDoc()">Change Doc</button>
<button ng-click="changeDocAgain()">Change Again Doc</button>
<br/><br/>
<button ng-click="displayDiv()" class="mp-float-left mp-more_options_button">
Search Options
</button>
<div ng-if="display" class="displayDiv">displayMe!</div>
<br/>
<dynamic-object data="iframeSrc"></dynamic-object>
</body>
</html>
now that I got a progress bar, I need to know how to make the bar vanish after it's finished loading. If possible, I want it to vanish and then redirect to another website. Thanks for all of the help guys.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Initializing...</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.progress-label {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label">Initializing...</div></div>
</body>
</html>
complete: function() {
this.hide();
window.location.href = "http://stackoverflow.com";
}