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.
Related
I want to add html table inside a tooltip for each cell without any server request.
Kendo provides this feature with api calling.
$(document).ready(function() {
var tooltip = $("#target").kendoTooltip({
iframe: false,
content: {
url: "*http://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html*"
},
width: 220,
height: 280
}).data("kendoTooltip");
});
Is there any way to add html without making any request?
The content configuration of the tooltip can accept not only a URL, but also a string. This string can contain HTML, like this:
td {
background: red;
width: 10px;
height: 10px;
}
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<body>
<span id="target">
Some content
</span>
<script>
$(document).ready(function() {
$("#target").kendoTooltip({
content: "<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>"
});
});
</script>
</body>
The content option can also be set as a function that exposes event data, containing the target element, so you can return a dynamic string (including HTML elements, as previously mentioned), based on the content of the target element, e.g.:
Example
I want to open kendo windows in maximize as default when click on button.
i have achieve using
$("#window").data("kendoWindow").maximize().open();
with actions: [ "Maximize", "Close"] and when i click on close button of kendo window and reopen the kendo window then it duplicates the restore button.
I know this question was asked 11 months ago but for those who came to this page looking for a solution, you simply need to open the window first and then maximize it.
$("#window").data("kendoWindow").open().maximize();
That simple!
I'm using UI for ASP.NET MVC, v.2016.2.714 and it works for me.
I'm posting this sample that is working here. Please try in this Kendo release.
$("#dialog").kendoWindow({
actions: [ "Maximize", "Close"],
draggable: false,
height: "300px",
modal: true,
pinned: false,
position: {
top: 100,
left: 100
},
resizable: false,
title: "Modal Window",
width: "500px"
});
$( "#target" ).click(function() {
$("#dialog").data("kendoWindow").maximize().open();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/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/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="dialog"></div>
<div id="target">
Click here
</div>
</body>
</html>
var dialog= $("#dialog").data("kendoWindow");
dialog.maximize();
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
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 #
I use kendoui window to create a dialog
in first time that i click on some button the kendo window open end of my page
in other time it's work good
my window div is below the body tag
plz help
$('#myModal').html(response);
var accessWindow = $("#myModal").kendoWindow({
actions: ["Maximize", "Close"], /*from Vlad's answer*/
draggable: false,
resizable: false,
title: "ویرایش سوال",
width: "90%",
visible: true
}).data("kendoWindow").center().open();
Your example seems to work fine to me (http://jsfiddle.net/OnaBai/uspmW/) and it should not happened that your window ends placed outside body tag since you are explicitly saying where it should be.
Your full HTML should be something like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link href="/styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="/styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/kendo.all.min.js" type="text/javascript"></script>
</head>
<body>
Type the text to add as response here : <input type="text" id="response" class="k-widget k-textbox"/></br>
<button id="button" class="k-button">Show response</button>
<div id="myModal"></div>
<script>
$("#button").on("click", function () {
var response = $("#response").val();
$('#myModal').html(response);
var accessWindow = $("#myModal").kendoWindow({
actions : ["Maximize", "Close"], /*from Vlad's answer*/
draggable: false,
resizable: false,
title : "ویرایش سوال",
width : "90%",
visible : true
}).data("kendoWindow").center().open();
});
</script>
</body>
</html>
As a recommendation, try not creating a new window each time you want to display it. Consider creating it at the beginning or the first time that you need it and then open it each time that you need it.