I have an example kendo treeList created: http://dojo.telerik.com/akAwe/4
In the example, how do i make child cells of "Protocol names" column clickable?
Thanks.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treelist/local-data-binding">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script type="text/x-kendo-template" id="template">
<a href='https://www.google.com/?test=#: ProtocolName #'>#: ProtocolName #</a>
</script>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.TreeListDataSource({
data: [
{ "id": 61, "parentId": 1, "ProtocolName": "P2", "SeriesDescription": "P2 " },
{ "ExamStart": "9/19/2015 8:00 AM", "id": 1, "ProtocolName": "P2", "SeriesDescription": "P2 ", "parentId": null },
{ "id": 62, "parentId": 2, "ProtocolName": "P1", "SeriesDescription": "P1 " },
{ "id": 63, "parentId": 2, "ProtocolName": "P2", "SeriesDescription": "P2 ", },
{ "ExamStart": "9/19/2015 8:13 AM", "id": 2, "ProtocolName": "P1, P2", "SeriesDescription": "P1 , P2 ", "parentId": null }
],
schema: {
model: {
id: "id",
expanded: true
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
height: 540,
columnMenu: true,
dataBound: onDataBound,
columns: [{
field: 'ExamStart',
title: 'Date/Time'
}, {
field: 'ProtocolName',
title: 'Protocol names',
sortable: false,
template: $("#template").html()
}, {
field: 'SeriesDescription',
title: 'Series descriptions',
sortable: false
}]
});
});
function onDataBound(arg) {
$(".k-treelist-group").each(function (index) {
$(this).find('a').replaceWith($(this).find('a').text());
});
}
</script>
</div>
</body>
</html>
Update 1:
<script type="text/x-kendo-template" id="template">
<a href='localhost:20327/\\#/dose/test'>#: ProtocolName #</a>
</script>
Let me know if any concern.
Related
I am trying to make date column accept two formats using parseformats attribute, but it seems not picking up, please advise.
Scenario: When I input 10/10/19 it is showing inccorect date message. But when I input 10/10/2019, its working as no errors and displays in the format.
$(document).ready(function () {
$("#grid").kendoGrid({
toolbar: ["save"],
columns: [{
field: "name"
},
{
field: "age",
format: "{0:MM/dd/yyyy}",
parseFormats: ["MM/dd/yyyy", "MM/dd/yy"]
}
],
dataSource: {
data: [{
id: 1,
name: "Jane Doe",
age: "11/11/2019"
},
{
id: 2,
name: "John Doe",
age: "10/10/2018"
}
],
schema: {
model: {
id: "id",
fields: {
age: {
type: "date"
}
}
}
}
},
editable: true
});
});
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datepicker/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.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.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/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Try this
$(document).ready(function () {
$("#grid").kendoGrid({
toolbar: ["save"],
columns: [{
field: "name"
},
{
field: "age",
format: "{0:MM/dd/yyyy}",
parseFormats: ["MM/dd/yyyy", "MM/dd/yy"]
}
],
dataSource: {
data: [{
id: 1,
name: "Jane Doe",
age: "11/11/2019"
},
{
id: 2,
name: "John Doe",
age: "10/10/2018"
}
],
schema: {
model: {
id: "id",
fields: {
age: {
parse: function (value) {
var dt = kendo.parseDate(value,["MM/dd/yyyy", "MM/dd/yy"]);
return kendo.toString(dt, "MM/dd/yyyy");
},
validation: {
ageValidation: function (value) {
var dt = kendo.parseDate(value.val(),["MM/dd/yyyy", "MM/dd/yy"]);
value.attr("data-ageValidation-msg", "age is not valid date")
return dt !== null;
}
}
}
}
}
}
},
editable: true
});
});
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datepicker/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.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.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/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
I am trying to get all the selected nodes from KendoTreeView and display a Treeview with only selected values from the previous Tree.
Is this possible to achieve?
Thanks in advance.
Sure it is possible and below there is a rough way to do it, taken from this demo:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treeview/checkboxes">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common-fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.fiori.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Check nodes</h4>
<div id="treeview"></div>
<hr>
<div id="treeview2"></div>
</div>
</div>
<script>
$("#treeview2").kendoTreeView();
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
check: onCheck,
dataSource: [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{
id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "mockup.jpg", spriteCssClass: "image" },
{ id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
]
},
{
id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 10, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 11, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 12, text: "April.pdf", spriteCssClass: "pdf" }
]
}
]
}]
});
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i]);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
function onCheck() {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
let treeView2 = $("#treeview2").data("kendoTreeView");
treeView2.dataSource.data(checkedNodes);
}
</script>
<style>
#treeview .k-sprite,
#treeview2 .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
.rootfolder { background-position: 0 0; }
.folder { background-position: 0 -16px; }
.pdf { background-position: 0 -32px; }
.html { background-position: 0 -48px; }
.image { background-position: 0 -64px; }
</style>
</div>
</body>
</html>
Demo in Dojo
The point is, you have to retrieve the selected nodes(as made with checkedNodeIds()) and then set them to the target treeview dataSource:
$("#treeview2").data("kendoTreeView").dataSource.data(checkedNodes);
I want to use the chart component in kendoui, but I encountered the following problem in the process of using it, the problem prompted me $(...).kendoChart is not a function. I have introduced the required js, I want to know what I should do, here is my code
<head>
<meta charset="utf-8" />
<title></title>
<script src="${base.contextPath}/lib/kendoui/js/jquery.min.js"></script>
<script src="${base.contextPath}/lib/kendoui/js/kendo.all.min.js"></script>
</head>
<body>
<style>
</style>
<div class="row" id="exmple">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
</div>
<script>
var data = [
{
"source": "Hydro",
"percentage": 22,
"explode": true
},
{
"source": "Solar",
"percentage": 2
},
{
"source": "Nuclear",
"percentage": 49
},
{
"source": "Wind",
"percentage": 27
}
];
function createChart() {
$("#chart").kendoChart({
title: {
text: "Break-up of Spain Electricity Production for 2008"
},
legend: {
position: "bottom"
},
dataSource: {
data: data
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
seriesColors: ["#03a9f4", "#ff9800", "#fad84a", "#4caf50"]
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</body>
Uncaught TypeError: $(...).kendoChart is not a function
The problem is caused by a missing kendo library (kendo.dataviz.min.js) essential for the chart. This file doesn't seem to be available unless the product is bought as described in this forum post:
I use ddslick list, and I search how copy opening of classical list.
When I have place to open in down direction then open in classical mode but when i don't have place I want force the opening in up direction.
and I can't say to my ddslick list open up a table like a simple select.
I give a sample code
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
Inherits="Jquery.tableHautMax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script/jquery.ddslick.min.js"></script>
<style type="text/css">
.MaxHeightPopup
{
border-style: solid;
border-color: red;
display: block;
max-height: 100px;
overflow: auto;
}
</style>
<script type="text/javascript">
$(function () {
var ddData = [
{
text: "Facebook",
value: 1,
selected: false,
description: "Description with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
},
{
text: "Twitter",
value: 2,
selected: false,
description: "Description with Twitter",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
},
{
text: "LinkedIn",
value: 3,
selected: true,
description: "Description with LinkedIn",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
},
{
text: "Foursquare",
value: 4,
selected: false,
description: "Description with Foursquare",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
}
];
$("#btnAdd").click(function () {
var row = '<tr height="50"><td>';
row += '<select class="myDropdown"></select></td>';
row += '<td>2</td><td>3</td><td >4</td></tr>';
$('#tbdatas').append(row);
$('.myDropdown').ddslick({
zindex: 200,
data: ddData,
width: 300,
selectText: "Select your preferred social network",
imagePosition: "right"
});
});
$("#btnAdd1").click(function () {
var row = '<tr height="50"><td>';
row += '<select class="myselect1"></select></td>';
row += '<td>2</td><td>3</td><td >4</td></tr>';
$('#tbdatas1').append(row);
});
});
</script>
</head>
<body>
<button id="btnAdd">
Ajouter 1 ligne</button>
<table class="MaxHeightPopup" id="tbdatas">
</table>
<br />
<button id="btnAdd1">
Ajouter 1 ligne</button>
<table class="MaxHeightPopup" id="tbdatas1">
</table>
</body>
</html>
Can someone help me please?
i just see if i add
.dd-container
{
position:static;
}
But after .dd-options not in good position
it's better like that, but not perfect
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="tableHautMax.aspx.vb"
Inherits="Jquery.tableHautMax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script/jquery.ddslick.min.js"></script>
<style type="text/css">
.MaxHeightPopup
{
border-style: solid;
border-color: red;
display: block;
max-height: 100px;
overflow: auto;
}
.dd-container
{
position: static;
}
</style>
<script type="text/javascript">
$(function () {
var mypositions = [];
var ddData = [
{
text: "Facebook",
value: 1,
selected: false,
description: "Description with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
},
{
text: "Twitter",
value: 2,
selected: false,
description: "Description with Twitter",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
},
{
text: "LinkedIn",
value: 3,
selected: true,
description: "Description with LinkedIn",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
},
{
text: "Foursquare",
value: 4,
selected: false,
description: "Description with Foursquare",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
}
];
$("#btnAdd").click(function () {
var nbl = $('#tbdatas tr').length;
var row = '<tr height="50"><td>';
row += '<select class="myDropdown" id="' + nbl + '"></select></td>';
row += '<td>2</td><td>3</td><td >4</td></tr>';
$('#tbdatas').append(row);
$('#' + nbl).ddslick({
zindex: 200,
data: ddData,
width: 300,
selectText: "Select your preferred social network",
imagePosition: "right"
});
var windowpos = $("#tbdatas").scrollTop();
mypositions.push(parseInt($('#' + nbl).position().top) + windowpos);
});
$("#tbdatas").scroll(function () {
var windowpos = $("#tbdatas").scrollTop();
$('.dd-container').each(function () {
$('.dd-options', $(this)).css("top", parseInt(this.clientHeight) + parseInt(mypositions[this.id]) - windowpos);
});
});
});
</script>
</head>
<body>
<button id="btnAdd">
Ajouter 1 ligne</button>
<table class="MaxHeightPopup" id="tbdatas">
</table>
</body>
</html>
How do I toggle a kendo grid's reorder able property for columns on a button click?
I tried
grid.reorderable = true
But it does not work!
Check this demo site. It's same example of the reordering columns. It will help you.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="grid"></div>
index<input type="text" id="txtIndex" value="0" />
<br />
column name
<input type="text" id="txtColName" value="ID" />
<br />
<input type="button" value="reorder" onclick="reordercolumn()" />
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipCity: { type: "string" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShippedDate: { type: "date" }
}
}
},
pageSize: 15
},
height: 550,
sortable: true,
reorderable: true,
resizable: true,
pageable: true,
columns: [
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipCountry",
title: "Ship Country"
},
{
field: "ShipCity",
title: "Ship City"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShippedDate",
title: "Shipped Date",
format: "{0:MM/dd/yyyy}",
width: 200
},
{
field: "OrderID",
title: "ID",
width: 80
}
]
});
});
function reordercolumn() {
var grid = $("#grid").data("kendoGrid");
var columnindex = 0;
for (var i = 0; i < $("#grid").data("kendoGrid").columns.length; i++) {
var col = $("#grid").data("kendoGrid").columns[i];
if (col.title == $("#txtColName").val().trim()) {
columnindex = i;
}
}
grid.reorderColumn($("#txtIndex").val().trim(), grid.columns[columnindex]);
}
</script>
</body>
</html>
Let me know if any concern.