I am using Kendo UI - Editor.
If I click on Show Message link, "Click Success!" message should appear inside Editor
I want to show Custom Text inside Editor on Clicking on "Show Message" link...
Pleae Help !!!
$(document).ready(function(){
$(".importeditor").kendoEditor({
tools: [
"bold",
{
name: "custom",
myText: "Show Message",
template: $("#toolTemplate").html()
},
]
});
});
jQuery('#ClickMe').on('click', function () {
jQuery(".importeditor").data('kendoEditor').val('Click Success!');
});
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.timezones.min.js"></script>
<div class="textedit1">
<textarea rows="10" cols="45" name="textarea" class="txtarea importeditor"></textarea>
</div>
<script id="toolTemplate" type="text/x-kendo-template">
#= myText #
</script>
Use the value method IE
jQuery(".importeditor").data('kendoEditor').value('Click Success!');
Also you might want to fix your href in the a tag
#= myText #
Related
Is it possible to click on an icon/image and then get a kendo dropdown list to appear below he icon/image?
(In other words I only want do use the popup of a dropdownlist, I would like the input editor to be hidden and replace it with an image, when the user clicks the image the popup dropdownlist should appear)
The closest I have come to a solution is to hide the input element
<div style="display:none;"> <input id="dropdownlist"/> </div>
And when image/icons is clicked I open kendo dropdownlist popup
$("#dropdownlist").data("kendoDropDownList").open();
The problem with this is that the popup menu is displayed in the top left corner, I have not found a way to make the popup appear below icon/image.
Here is a little snippet of code that might suite your needs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<div style="position: absolute; visibility: hidden;">
<input id="dropdownlist" style="height: 100px;" />
</div>
<img src="https://cdn2.scratch.mit.edu/get_image/gallery/1778374_200x130.png" style="height: 100px; position: absolute;" onclick="$('#dropdownlist').data('kendoDropDownList').open()" />
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1
});
</script>
</body>
</html>
Notice that the image height and the dropdown height should be the same.
I'm creating a mobile app using KendoUI in the Telerik AppBuilder. I created a blank view to hold my chart and then went in to start adding the code. I cannot get the chart to appear.
These are the scripts referenced in my index.html:
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="app.js"></script>
<script src="lib/progress/progress.all.min.js"></script>
<script src="dataProviders/progressDataProvider.js"></script>
Here is the code of my chart view:
<div data-role="view" data-title="Audit Tracker" data-layout="main" data- model="app.auditTracker" data-show="app.auditTracker.onShow" data-after-show="app.auditTracker.afterShow">
<div id="chart">
</div>
</div>
And here is the code in the associated JavaScript file:
'use strict';
app.auditTracker = kendo.observable({
onShow: function () {},
afterShow: function () {}
});
(function(parent) {
$("#chart").kendoChart({
title: {
text: "Audit Tracker"
},
series: [
{name: "Audits Completed", data: [5,10,15,3]}
],
categoryAxis: {
categories: ["January", "February", "March", "April"]
}
});
})(app.auditTracker);
What am I doing wrong here? This seems like it should be simple!
Thanks in advance for the help.
My problem was that I did not have the correct framework files referenced in my index.html.
Here are the files that I ended up using as far as the framework goes:
<script src="cordova.js"></script>
<script src="jquery.min.js"></script>
<script src="kendo.all.min.js"></script>
<link rel="stylesheet" href="kendo.common.min.css" />
<link rel="stylesheet" href="kendo.default.min.css" />
<link rel="stylesheet" href="kendo.mobile.all.min.css"/>
I am using Kendo UI ListView.
I want to add new <li> item to existing <ul> on clicking of + add link. But it has to open Kendo Popup with editable textfield for "Item Text", and Select box for Item Options with options as Option 01, Option 02.... etc..
Please help as I am new to jQuery and Kendo :(
Online Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
+ Add
<ul id ="listView"></ul>
<script>
var dataSource = new kendo.data.DataSource({
data: [ { itemText: "Default item 1", itemOption: "Option 01" }, { itemText: "Default item 2", itemOption: "Option 02" }]
});
$("#listView").kendoListView({
dataSource: dataSource,
template: "<li>#:itemText# : #:itemOption#</li>",
});
dataSource.read();
</script>
</body>
</html>
One solution can be something like this: Dojo example
Below code has been thankfully provided by machun for toggling between RTL and LTR directions in Kendo UI widgets.
The code consists of:
HTML:
kendo autocomplete form plus a button to activate support for RTL and LTR language.
Script:
k-rtl class container
datasource (json file)
kendo autocomplete widget initializing + template to show image beside data and to open data links in the same tab
k-rtl class
The problem is that links don't open correctly. It shows a 404 Not Found error plus a /undefined at the end of the URL.
Live demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="container">
<input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />
<input id="autocomplete" type="text" />
</div>
</body>
</html>
<script>
/*------k-rtl class container----------*/
function createAutoComplete(){
if($("#autocomplete").data("kendoAutoComplete") != null){
$("#autocomplete").parent().remove();
$("#container").append("<input id='autocomplete' type='text' />")
}
/*------datasource (json file)---------*/
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "json.txt",
dataType: "json",
data: {
q: "javascript"
}
}
},
schema: {
data: "results"
}
});
/*------kendo autocomplete widget initializing + template to show image beside data and to open data links in the same tab----------*/
$("#autocomplete").kendoAutoComplete({
dataSource: dataSource,
dataTextField: "name",
template: '<span><img src="/kendo-autocomplete-test/img/#: id #.jpg" /></span>' + '<span data-href="#:link#">#:name#</span>',
select: function(e) {
var href = e.item.find("span").data("href");
location.assign(href);
}
});
}
/*------k-rtl class----------*/
createAutoComplete();
$('#toggleRTL').on('click', function(event) {
var form = $('#container');
console.log(form);
if (form.hasClass('k-rtl')) {
console.log("test1");
form.removeClass('k-rtl')
} else {
console.log("test2");
form.addClass('k-rtl');
}
createAutoComplete();
})
</script>
I advice to debug your function first then simply check the variable and make sure it contain the right thing. You overlooked a simple thing that your jquery dom selector isn't quite right resulting var href contain "undefined".
Change
var href = e.item.find("span").data("href");
To
var href = e.item.find("span[data-href]").attr("data-href");
Take a look here
I set up video lesson site with moodle. I will share my video with jwplayer my code is shown below.
<p>
<script src="jwplayer/jwplayer.js" type="text/javascript"></script>
<script type="text/javascript"> jwplayer.key="KEY";</script>
</p>
<div id='player'>
<img src='jwplayer/preview.jpg' alt='RTSP Link' /><br />
</div>
<script type="text/javascript">
jwplayer('player').setup({
id : 'playerID',
fallback: false,
width: '920', height: '518',
image: 'jwplayer/preview.jpg',
sources: [{
file: "http://WowzaAdress:1935/vod/smil:Lesson1.smil/jwplayer.smil?protocol=rtmpe"
},{
file: "http://WowzaAdress:1935/vod/Lesson1.mp4/playlist.m3u8"
}],
rtmp: {
bufferlength: 3
},
});
</script>
I want to hide this code when users view with right click "Page source".
How can I do it?
I would use a tool like - http://www.dynamicdrive.com/dynamicindex9/encrypter.htm
So then you get:
<script>
<!--
document.write(unescape("%3Cp%3E%0A%20%20%3Cscript%20src%3D%22jwplayer/jwplayer.js%22%20type%3D%22text/javascript%22%3E%3C/script%3E%0A%20%20%3Cscript%20type%3D%22text/javascript%22%3E%20jwplayer.key%3D%22KEY%22%3B%3C/script%3E%0A%3C/p%3E%0A%3Cdiv%20id%3D%27player%27%3E%0A%20%20%3Ca%20href%3D%22rtsp%3A//WowzaAdress%3A554/vod/mp4%3ALesson1.mp4%22%3E%3Cimg%20src%3D%27jwplayer/preview.jpg%27%20alt%3D%27RTSP%20Link%27%20/%3E%3Cbr%20/%3E%3C/a%3E%0A%3C/div%3E%0A%3Cscript%20type%3D%22text/javascript%22%3E%0Ajwplayer%28%27player%27%29.setup%28%7B%0Aid%20%20%3A%20%27playerID%27%2C%0Afallback%3A%20false%2C%0Awidth%3A%20%27920%27%2C%20height%3A%20%27518%27%2C%0Aimage%3A%20%27jwplayer/preview.jpg%27%2C%0Asources%3A%20%5B%7B%0Afile%3A%20%22http%3A//WowzaAdress%3A1935/vod/smil%3ALesson1.smil/jwplayer.smil%3Fprotocol%3Drtmpe%22%0A%7D%2C%7B%0Afile%3A%20%22http%3A//WowzaAdress%3A1935/vod/Lesson1.mp4/playlist.m3u8%22%0A%7D%5D%2C%0Artmp%3A%20%7B%0Abufferlength%3A%203%0A%7D%2C%0A%7D%29%3B%0A%3C/script%3E"));
//-->
</script>