Related
As the title suggests, I am using a Kendo UI Grid in a View within an MVC application.
Now, on the click of a particular cell I need to pass the row index and column header (which that cell belongs to) to a function written in a .cs file in the application.
Any help is appreciated.
Thanks :)
P.S.: If you think that I am not providing sufficient information please let me know since I am a newbie programmer!
You can achieve this by using ondatabound event for reference please check the below code snippet.
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
$(grid.tbody).on("click", "td", function (e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colname = grid.columns[$("td", row).index(this)].title;
alert('row index is :- ' + rowIdx + ' and column name is:- ' + colname);
});
}
Full code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
var products = [{
ProductID: 1,
ProductName: "Chai",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "10 boxes x 20 bags",
UnitPrice: 18.0000,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 2,
ProductName: "Chang",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "24 - 12 oz bottles",
UnitPrice: 19.0000,
UnitsInStock: 17,
UnitsOnOrder: 40,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 3,
ProductName: "Aniseed Syrup",
SupplierID: 1,
CategoryID: 2,
QuantityPerUnit: "12 - 550 ml bottles",
UnitPrice: 10.0000,
UnitsInStock: 13,
UnitsOnOrder: 70,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "48 - 6 oz jars",
UnitPrice: 22.0000,
UnitsInStock: 53,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "36 boxes",
UnitPrice: 21.3500,
UnitsInStock: 0,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: true,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}];
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: 'number' },
UnitsInStock: { type: 'number' },
ProductName: { type: 'string' },
QuantityPerUnit: { type: 'string' },
UnitPrice: { type: 'number' },
}
}
},
},
dataBound: onDataBound,
columns: [
{ field: "ProductName", title: "ProductName" },
{ field: "UnitsInStock", title: "UnitsInStock" },
{ field: "QuantityPerUnit", title: "QuantityPerUnit" },
{ field: "UnitPrice", title: "UnitPrice" },
]
});
});
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
$(grid.tbody).on("click", "td", function (e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colname = grid.columns[$("td", row).index(this)].title;
alert('row index is :- ' + rowIdx + ' and column name is:- ' + colname);
});
}
</script>
</body>
</html>
Let me know if any concern.
I have a scheduler (timeline view) set up that produces an interface that looks like the attached image.
[![scheduler_screenshot][1]][1]
The resources part of the scheduler code looks like this:
, resources: [
{
field: "loca_ky"
, name: "Locations"
, dataSource: [
{text:"CHAR above entrance doors", value:1},
{text:"BELLIARD Passerelle", value:2},
{text:"BERL Schuman", value:3}
]
, title: "Location"
}
]
I want the users to be able to find out more about the locations (eg. 'CHAR above entrance doors', etc) and therefore want to provide either a hyperlink around the text, or maybe add an icon with a hyperlink.
How do I do this?
Response to answers
Hi Jayesh
Re. Method 1. Adding the new function afterthe script fails to work because I am already using the 'databound' node of the scheduler as a function. See code below:
, dataBound: function(e) {
// hide the times row from the date/time header:
var view = this.view();
view.datesHeader.find("tr:last").prev().hide();
view.timesHeader.find("tr:last").prev().hide();
// Switch the colour of the reservation depending on stat_ky
$('div.k-event').removeClass('special-event'); // Remove the widget default colour.
$('div.k-event').addClass('eventRequested'); // Add back the eventRequested colour, which we use for every stage up to BOOKED.
e.sender._data.forEach(function(eventDetails) {
if (eventDetails['stat_ky'] == 5) {
// Switch the colour to eventAccepted for BOOKED requests (stat_ky=5).
$('div.k-event[data-uid="'+eventDetails['uid']+'"]').addClass('eventAccepted');
}
});
}
Should I place your code inside this function?
Response to answers, 2
Hi Jayesh
Yes, this works well indeed!
One final snag. In your example here is the datasource of the resource:
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
And you get the 'text' using element.html() like this:
element.html("<a href='http://google.com/" + element.html() + "'>" + element.html() + "</a>");
How do I reference the 'value' of the resource?
You can achieve this thing by using below two different methods.
Method 1: Manually converting resources text into hyperlink
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler"></div>
</div>
<script>
$(function () {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda",
"timeline"
],
timezone: "Etc/UTC",
dataBound: scheduler_dataBound,
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Rooms", "Attendees"],
orientation: "vertical"
},
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
title: "Room"
}
]
});
});
// Below function is converting text into hyperlink
function scheduler_dataBound(e) {
$("#scheduler").find(".k-slot-cell").each(function () {
var element = $(this);
if (element != null) {
if (element.context.textContent.length > 2) {
element.html("<a href='http://google.com/" + element.html() + "'>" + element.html() + "</a>");
}
}
});
}
</script>
</body>
</html>
Method 2: By using template
Demo
Let me know if any concern.
enter image description hereI´m trying to use a treeview with checkboxes for definition User Rights. (2 actions - enabled/disabled right)
How can I to get value (id) from parent node ?
Kendo tree view
This example will return the parent id for the selected node.
treeView.select().parentNode().id;
If you need to find the parent for a specific node, you must specify a selector in the select() function: treeView.select($("search criteria"))
If you want to loop in the parent, you can do this
var parentNode = treeView.select().parentNode();
while (parentNode) {
//Add your parent logic here
//...
parentNode = parent.parentNode();
}
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</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.default.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/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeview"></div>
<p id="result">No nodes checked.</p>
<script>
$(document).ready(function () {
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
check: onCheck,
dataSource: [{
id: 1, text: "1", expanded: true, items: [
{
id: 2, text: "2", expanded: true, items: [
{ id: 3, text: "3" },
{ id: 4, text: "4" },
{ id: 5, text: "5" }
]
},
{
id: 6, text: "6", expanded: true, items: [
{ id: 7, text: "7" },
{ id: 8, text: "8" },
]
},
{
id: 9, text: "9", expanded: true, items: [
{ id: 10, text: "10" },
{ id: 11, text: "11" },
{ id: 12, text: "12", expanded: true, items: [{ id: 13, text: "13", expanded: true, items: [{ id: 14, text: "14" }, { id: 15, text: "15" }] }] }
]
}
]
}]
});
});
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
getParentIds(nodes[i], checkedNodes);
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
function getParentIds(node, checkedNodes) {
if (node.parent() && node.parent().parent() && checkedNodes.indexOf(node.parent().parent().id) == -1) {
getParentIds(node.parent().parent(), checkedNodes);
checkedNodes.push(node.parent().parent().id);
}
}
// show checked node IDs on datasource change
function onCheck() {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
}
</script>
</body>
</html>
Let me know if any concern.
I have a kendo grid with a column template. I try to pass a value from the current row as a parameter for my javascript function. My code:
{
field: "CrmTaskId",
title: "Crm ",
template: '<a href="javascript:hrefTest(#=CrmTaskId#);" ># if( CrmTaskId==null) {#<span><span># } else {#<span>#: CrmTaskId#<span>#} #</a>'
}
hrefTest is javascript function with one param. But it's not working. Any ideas?
It can be done like this
.ClientTemplate("<a href='javascript: void(0);'
onclick=\"return YourJSFunction('#= OpportunityUrl #');\">#= OpportunityName #</a>")
This is part of the column definition, so what it is saying is...Make the OpportunityName
clickable and pass in the OpportunityUrl. #= Field # is the syntax for pulling values off of the Model.
I have tried with your code but not able to reproduce this issue. Please create new HTML/CSHTML page and check it.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var movies = [
{ "CrmTaskId": 1, "rating": 9.2, "year": 1994, "title": "The Shawshank Redemption"},
{ "CrmTaskId": 2, "rating": 9.2, "year": 1972, "title": "The Godfather"},
{ "CrmTaskId": null, "rating": 9, "year": 1974, "title": "The Godfather: Part II" },
{ "CrmTaskId": '', "rating": 9.9, "year": 1874, "title": "The Godmother: Part III" }
];
function hrefTest(CrmTaskId)
{
alert("CrmTaskId is: " + CrmTaskId);
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: movies,
pageSize: 10
},
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [{
field: "CrmTaskId",
title: "Crm"
}, {
field: "title",
title: "title"
},
{
template: '<a href="javascript:hrefTest(#=CrmTaskId#);" ># if( CrmTaskId==null) {#<span><span># } else {#<span>#: CrmTaskId#<span>#} #</a>'
}
]
});
});
</script>
</body>
</html>
Please try with the below code snippet.
Use this :
{
field: "Field",
editable: true,
title: "Title",
template: showRelatedLink,
allownull: true,
width: 100
}
and then in your function :
function showRelatedLink(container, options)
{
var yourVariable = container.YourField;
}
You can pass a field to a function like this too:
Grid:
columns: [
{ field: "ProductTypeID", title: "Type", template: "#=product_type_to_name(ProductTypeID)#" },
]
Function:
function product_type_to_name(product_type_id) {
console.log(product_type_id);
var name = "";
// convert ID to name
return name;
}
I have tried this
{
field: "DisplayChangedFrom",
title: "From",
template:"#=generateTemplate(DisplayChangedFrom)#
},
Then the function
function generateTemplate(items) {
var html = "<ul>";
if (items !== null && items.length > 0) {
for (var x = 0; x < items.length; x++) {
html += "<li>";
html += items[x];
html += "</li>";
}
}
html += "</ul>";
return html;
};
I have a requirement i.e based on the tree view check box selection the value axis need to update.I am using 4 check boxes with 4 value axis.when ever I check the first item corresponding value axis should be changed .3 other axis should in invisible state.
Here I tried with some of the code and updated .
Code:
<div id="treeview"></div>
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>
var valueAxes = [
{ name: "KM",visible:false,
title: { text: "KM" ,visible:false}
},
{ name: "Miles Per Gallon",
title: { text: "Miles Per Gallon" }
},
{
name: "Miles",
title: { text: "Miles " }
},
{
name: "liters per 100km",
title: { text: "liters per 100km" }
}
];
function createChart() {
$("#chart").kendoChart({
legend: {
position: "top"
},
series: [{
type: "column",
data: [20, 40, 45, 30, 50],
stack: true,
name: "on battery",
color: "#003c72"
}, {
type: "column",
data: [20, 30, 35, 35, 40],
stack: true,
name: "on gas",
color: "#0399d4"
}, {
type: "area",
data: [30, 38, 40, 32, 42],
name: "mpg",
color: "#642381"
}, {
type: "area",
data: [7.8, 6.2, 5.9, 7.4, 5.6],
name: "l/100 km",
color: "#e5388a"
}],
valueAxes:valueAxes,
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
}
});
}
$(document).ready(function() {
createChart();
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1,
text: "Value axis",
expanded: true,
items: [{
id: 2,
text: "KM"
},
{
id: 3,
text: "Miles Per Gallon"
},
{
id: 4,
text: "Miles "
},
{
id: 5,
text: "liters per 100km"
}]
}]
}).data("kendoTreeView");
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
$("#treeview").find(":checked").each(function() {
var nodeText =$(this).parent().parent().text();
$.each(valueAxes, function(index, valueAxes) {
if (valueAxes.name == nodeText) {
checkedSeries.push(valueAxes);
checkedSeries.visible==="true";
checkedSeries.title.visible===true;
}
});
});
chart.options.valueAxes = checkedSeries;
chart.refresh();
});
});
jsbin: Value axis change
Yes , it is possible to bind and unbind value axis and series at a time.
Change your scripts like below
var valueAxes = [
{
name: "KM", labels: {
format: "{0}"
}, min: 0,
max: 9,
title: { text: "KM" }
},
{
name: "Miles Per Gallon", labels: {
format: "{0}%"
}, min: 0,
max: 5,
title: { text: "Miles Per Gallon" }
},
{
name: "Miles", labels: {
format: "{0}%"
},
title: { text: "Miles " }
},
{
name: "liters per 100km", min: 0,
max: 1,
title: { text: "liters per 100km" }
}];
var series = [{
type: "column",
axis: "KM",
data: [20, 40, 45, 30, 50],
stack: true,
name: "KM",
color: "#003c72"
}, {
type: "column",
data: [20, 30, 35, 35, 40],
axis: "Miles Per Gallon",
stack: true,
name: "Miles Per Gallon",
color: "#0399d4"
}, {
type: "column",
data: [30, 38, 40, 32, 42],
axis: "Miles",
name: "Miles",
color: "#642381"
}, {
type: "column",
axis: "liters per 100km",
data: [7.8, 6.2, 5.9, 7.4, 5.6],
name: "liters per 100km",
color: "#e5388a"
}];
function createChart(inputValueAxes, inputSeries) {
$("#chart").kendoChart({
legend: {
position: "top"
},
series: inputSeries,
valueAxes: inputValueAxes,
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
}
});
}
$(document).ready(function () {
createChart(valueAxes, series);
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1,
text: "Value axis",
expanded: true,
items: [{
id: 2,
text: "KM"
},
{
id: 3,
text: "Miles Per Gallon"
},
{
id: 4,
text: "Miles "
},
{
id: 5,
text: "liters per 100km"
}]
}]
}).data("kendoTreeView");
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
var checkedAxes = [];
if ($("#treeview").find(":checked").length !== 0) {
$("#treeview").find(":checked").each(function () {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function (index, valueAxes) {
if (valueAxes.name == nodeText.trim()) {
checkedAxes.push(valueAxes);
checkedAxes.visible = true;
}
});
$.each(series, function (index, series) {
if (series.name == nodeText.trim()) {
checkedSeries.push(series);
}
});
});
createChart(checkedAxes, checkedSeries);
}
else {
createChart(checkedAxes, checkedSeries);
}
});
});
Refer this http://jsbin.com/eyibar/49/edit
For convenience, Intially i load all the chart axeses. Its working as you asked....
jsbin: http://jsbin.com/eyibar/37/edit
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<style>
#chart { width: 600px; }
</style>
</head>
<body>
<div id="treeview"></div>
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>
<script type="text/javascript">
var valueAxes = [
{
name: "KM",
title: { text: "KM" }
},
{
name: "Miles Per Gallon",
title: { text: "Miles Per Gallon" }
},
{
name: "Miles",
title: { text: "Miles " }
},
{
name: "liters per 100km",
title: { text: "liters per 100km" }
}];
function createChart(valueAxes) {
$("#chart").kendoChart({
legend: {
position: "top"
},
series: [{
type: "column",
data: [20, 40, 45, 30, 50],
stack: true,
name: "on battery",
color: "#003c72"
}, {
type: "column",
data: [20, 30, 35, 35, 40],
stack: true,
name: "on gas",
color: "#0399d4"
}, {
type: "area",
data: [30, 38, 40, 32, 42],
name: "mpg",
color: "#642381"
}, {
type: "area",
data: [7.8, 6.2, 5.9, 7.4, 5.6],
name: "l/100 km",
color: "#e5388a"
}],
valueAxes: valueAxes,
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
}
});
}
$(document).ready(function () {
createChart(valueAxes);
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1,
text: "Value axis",
expanded: true,
items: [{
id: 2,
text: "KM"
},
{
id: 3,
text: "Miles Per Gallon"
},
{
id: 4,
text: "Miles "
},
{
id: 5,
text: "liters per 100km"
}]
}]
}).data("kendoTreeView");
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
if ($("#treeview").find(":checked").length != 0) {
$("#treeview").find(":checked").each(function () {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function (index, valueAxes) {
if (valueAxes.name == nodeText.trim()) {
checkedSeries.push(valueAxes);
checkedSeries["visible"] = true;
}
});
});
createChart(checkedSeries);
}
else {
createChart(checkedSeries);
}
});
});
</script>
</body>
</html>
I edited your code in that I can able to bind and unbind the valueaxis by calling the creatChart(checkedAxes) function in if condition with length==-1,at that time the series is not updated.
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
var checkedAxes = [];
if ($("#treeview").find(":checked").length !== -1){
$("#treeview").find(":checked").each(function () {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function (index, valueAxes) {
if (valueAxes.name == nodeText) {
checkedAxes.push(valueAxes);
checkedAxes.visible = true;
}
});
$.each(series, function (index, series) {
if (series.name == nodeText) {
checkedSeries.push(series);
}
});
});
chart.options.series = checkedSeries;
chart.options.valeAxes = checkedAxes;
chart.refresh();
}
createChart(checkedAxes);
});
but if I tried by without calling the creatChart(checkedAxes) function,the series binded to the chart are updated.
$("#treeview").on("change", function (e) {
var chart = $("#chart").data("kendoChart");
var checkedSeries = [];
var checkedAxes = [];
if ($("#treeview").find(":checked").length !== -1){
$("#treeview").find(":checked").each(function () {
var nodeText = $(this).parent().parent().text();
$.each(valueAxes, function (index, valueAxes) {
if (valueAxes.name == nodeText) {
checkedAxes.push(valueAxes);
checkedAxes.visible = true;
}
});
$.each(series, function (index, series) {
if (series.name == nodeText) {
checkedSeries.push(series);
}
});
});
chart.options.series = checkedSeries;
chart.options.valeAxes = checkedAxes;
chart.refresh();
}
});
I didn't get the both scenarios at a time.sorry,hope you find the solution.
Cheers,
Happy Coding...