I put together a minimal working Cytoscape example. I can get the graph to display, but I am mostly interested in handling events, and that's where I'm having difficulty.
The problem is that instead of being able to access individual elements' properties, I can see that the target of any event is undefined.
Below is my entire html file. Please note - I am only interested in the line
cy.nodes().bind('mouseover', (e) => console.log(e.target));
When I'm looking at the console, I can only see "undefined" whenever I move the mouse pointer over a node. As I said above, I want to eventually be able to access element properties.
<!doctype html>
<html>
<head>
<title>Tutorial 1: Getting Started</title>
<script src="cytoscape.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="cy"></div><script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}]
});
cy.unbind("tap");
cy.bind("tap", "edge",function(evt) {
var tgt=this;
alert(tgt);
});
cy.nodes().bind('mouseover', (e) => console.log(e.target));
</script>
</body>
</html>
You can see a working example in the snippet below, I really just changed the import, nothing else:
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [{
data: {
id: 'a'
}
},
{
data: {
id: 'b'
}
},
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}
]
});
cy.unbind("tap");
cy.bind("click", "node, edge", function(evt) {
var tgt = evt.target.data();
console.log(tgt);
});
cy.nodes().bind('mouseover', (e) => console.log(e.target.data()));
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
<html>
<head>
<title>Tutorial 1: Getting Started</title>
<script src="https://cdn.jsdelivr.net/npm/cytoscape#3.11.0/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Related
I want to make checkbox mode single in kendo treeview / ui for jquery.
But there is no official option for jquery. I found solution to scan all treeview and uncheck others one by one. But it puts me in trouble because i have 3-4 depth and over +500 items in my treeview. When i select 2nd time, it takes around 1-2 seconds and freeze all treeview for a while.
This is a demo for dummy solution that i use. But it's not smooth for my actual treeview.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treeview/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section wide k-content">
<div id="demo-section-title" class="treeview-flex">
<div>
<h3>
Select nodes, folders and drag them between the TreeViews
</h3>
</div>
</div>
<div class="treeview-flex">
<div id="treeview-kendo"></div>
</div>
<div class="treeview-flex">
<div>
<h4>Drag and Drop</h4>
</div>
</div>
<div class="treeview-flex">
<div id="treeview-telerik"></div>
</div>
</div>
<script id="treeview" type="text/kendo-ui-template">
# if (!item.items && item.spriteCssClass) { #
#: item.text #
<span class='k-icon k-i-close kendo-icon'></span>
# } else if(!item.items && !item.spriteCssClass) { #
<span class="k-sprite pdf"></span>
#: item.text #
<span class='k-icon k-i-close telerik-icon'></span>
# } else if (item.items && item.spriteCssClass){ #
#: item.text #
# } else { #
<span class="k-sprite folder"></span>
#: item.text #
# } #
</script>
<script>
function traverse(nodes, callback) {
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var children = node.hasChildren && node.children.data();
callback(node);
if (children) {
traverse(children, callback);
}
}
}
function onCheck(e) {
var dataItem = this.dataItem(e.node);
var rootNodes = $("#treeview-kendo").getKendoTreeView().dataSource.data();
traverse(rootNodes, function(node) {
if (node != dataItem) {
node.set("checked", false);
}
});
}
$("#treeview-kendo").kendoTreeView({
template: kendo.template($("#treeview").html()),
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: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 8, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 9, text: "April.pdf", spriteCssClass: "pdf" }
]
}
]
}],
//dragAndDrop: true,
checkboxes: {
checkChildren: true
},
check: onCheck,
loadOnDemand: true
});
</script>
<style>
#media screen and (max-width: 680px) {
.treeview-flex {
flex: auto !important;
width: 100%;
}
}
#demo-section-title h3 {
margin-bottom: 2em;
text-align: center;
}
.treeview-flex h4 {
color: #656565;
margin-bottom: 1em;
text-align: center;
}
#demo-section-title {
width: 100%;
flex: auto;
}
.treeview-flex {
flex: 1;
-ms-flex: 1 0 auto;
}
.k-treeview {
max-width: 240px;
margin: 0 auto;
}
#treeview-kendo .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
#treeview-telerik .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
.demo-section {
margin-bottom: 5px;
overflow: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.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>
There is an option mode:"single" for Angular.
single mode checkbox for treeview in kendo ui for Angular
But i'm looking same kendo ui for Jquery.
You don't need to manually traverse the nodes. You can leverage JQuery to get the appropriate selector and let it do it for you in the check event (documentation).
Basically what you'd do is:
Handle the check event
Get the inputs by selecting the treeview's k-checkbox-wrapper class' input
Set the checked property to false
Set the node that was checked back to true
Example:
check: function(e) {
$("#treeview .k-checkbox-wrapper input").prop("checked", false);
$(e.node).find("input").prop("checked", true);
}
Fiddle: https://dojo.telerik.com/ALEJetoD
When I changed the size of line chart title, it's overlapped, and the x and y property can't work. But according to this pull request, it should work.
I found it was because it's in the SVG of the chart. And the size of SVG was controlled by the config but change the size of chart can't solve it.
// Code goes here
(function(){
var chart = c3.generate({
title: {
text: 'My Line Chart',
y: 100
},
data: {
columns: [
['data', 30, 200, 100, 400, 150, 250]
]
},
legend: {
position: 'inset'
},
grid: {
y: {
show: true
}
},
axis: {
y: {
label: {
text: 'Y Axis Label',
position: 'outer-top'
}
}
}
});
d3.select('#chart .c3-title')
.style('font-size', '4em')
})();
/* Styles go here */
#chart {
margin: 40px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/c3#0.4.14/c3.css">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/d3#3.5.6/d3.js"></script>
<script src="https://unpkg.com/c3#0.4.14/c3.js"></script>
</head>
<body>
<div id="chart"></div>
<script src="script.js"></script>
</body>
</html>
Any suggestion would be appreciated.
Just add a padding at the top...
padding: {
top: 20
}
... and set the dominant-baseline of the text to central:
.style("dominant-baseline", "central")
Alternatively, just translate it down.
Here is the code with that change:
// Code goes here
(function(){
var chart = c3.generate({
padding: {
top: 20
},
title: {
text: 'My Line Chart',
y: 100
},
data: {
columns: [
['data', 30, 200, 100, 400, 150, 250]
]
},
legend: {
position: 'inset'
},
grid: {
y: {
show: true
}
},
axis: {
y: {
label: {
text: 'Y Axis Label',
position: 'outer-top'
}
}
}
});
d3.select('#chart .c3-title')
.style('font-size', '4em')
.style("dominant-baseline", "central")
})();
/* Styles go here */
#chart {
margin: 40px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/c3#0.4.14/c3.css">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/d3#3.5.6/d3.js"></script>
<script src="https://unpkg.com/c3#0.4.14/c3.js"></script>
</head>
<body>
<div id="chart"></div>
<script src="script.js"></script>
</body>
</html>
The documentation says the default value of observeChanges is false. But it seems to be setting the value to true. Is the default value applicable only when the sort plugin is disabled?
We are the noticing the rendering is invoked multiple times due to this and are wondering if it can be set to false explicitly.
Here is the jsfiddle:
$(document).ready(function() {
var container = document.getElementById('basic_example');
var data = function() {
return Handsontable.helper.createSpreadsheetData(10, 10);
};
var hot = new Handsontable(container, {
data: data(),
colHeaders: true,
rowHeaders: true,
stretchH: 'all',
columnSorting: true,
contextMenu: true
});
if (container.clientHeight < 500) {
container.height = container.clientHeight;
hot.updateSettings({
height: container.clientHeigh
});
hot.render();
}
setTimeout(function() {
var output = document.getElementById('output').innerHTML = hot.getSettings().observeChanges;
}, 1000);
});
</style> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <link href="http://handsontable.com//styles/main.css" rel="stylesheet"> <link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet"> <script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.js"></script> <style type="text/css"> body {
background: white;
margin: 20px;
}
h2 {
margin: 20px 0;
}
div#basic_example {
border: 5px solid #ccc;
}
<span>Default value for observe changes</span>
<div id="basic_example"></div>
<span id="output">Output</span>
Click here for jsfiddle: http://jsfiddle.net/mpusarla/nva6b8e8/1/
Below is my KendoUI tree view, I am using templates to show edit link on each node, but I am getting this error: "Uncaught TypeError: Cannot read property 'replace' of undefined "
#section scripts{
<script src="~/scripts/kendo.all.min.js"></script>
<script type="text/javascript">
var territory = new kendo.data.HierarchicalDataSource({
transport: {
read: {
type:'POST',
url: rootURL + "Territory/AllTerritories",
dataType: "json"
}
},
schema: {
model: {
id: "ID",
hasChildren: "HasChildren",
children: territory
}
}
});
$("#treeview").kendoTreeView({
dataSource: territory,
dataTextField: "Name",
dataValueField: "ID",
template: kendo.template($("#treeview-template").html())
});
</script>
}
<script id="treeview-template" type="text/kendo-ui-template">
#
<a class='show-link' href='\#'><image src="/Content/images/select2.png"></a> #
</script>
<style scoped>
#territoryTree {
text-align: center;
}
#treeview .k-sprite {
background-image: url("../content/default/coloricons-sprite.png");
}
.rootfolder {
background-position: 0 0;
}
.demo-section {
display: inline-block;
vertical-align: text-bottom;
min-width: 320px;
min-height: 300px;
text-align: left;
margin: 0 2em;
}
</style>
Any solutions?? Please help
jquery can't find the element with Id #treeview-template when you say
kendo.template($("#treeview-template").html())
then first it will try to find the html element with the Id #treeview-template and then it will move forward. Try the F12 and the console by writing $("#treeview-template").html() in the console see if it can or cannot find the element
Hi I am trying to convert a cytoscape-web 1 application to a cytoscape-web 2 application.
I have a trivial example using a fixed set of elements created as the element: portion of the initial call to cytoscape web. I then want to add more elements to the existing graph. I have tried using add and load.
add does nothing there is no failure but also no change to my existing graph
load gets and error:
[19:29:52.005] json is undefined # http://127.0.0.1:8020/LifeScience/jquery.cytoscapeweb.all.js:1918
The code is pretty trivial to reproduce
<!DOCTYPE html>
<html>
<head>
<title>Test Cyto</title>
<style>
* {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, Verdana, sans-serif;
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
line-height: 1.5;
color: #000000;
font-size: 14px;
}
/* The Cytoscape Web container must have its dimensions set. */
#cy {
width: 100%;
height: 50%;
}
#note {
width: 100%;
height: 25%;
background-color: #f0f0f0;
overflow: auto;
}
p {
padding: 0 0.5em;
margin: 0;
}
p:first-child {
padding-top: 0.5em;
}
</style>
</head>
<body>
<p id="demo">
Test Demo
</p>
<button id="runQ2">
Do display
</button>
<div>
<p>
Graph Image
</p>
</div>
<div id="cy" style="width:1200px;height:500px;">
</div>
<div id="note">
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.cytoscapeweb.all.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("button#runQ2").click(function() {
draw_graph();
});
});
function draw_graph() {
$("#cy").cytoscapeweb({
elements : {
nodes : [{
data : {
id : "a"
}
}, {
data : {
id : "b"
}
}, {
data : {
id : "c"
}
}],
edges : [{
data : {
id : "ab",
source : "a",
target : "b"
}
}, {
data : {
id : "bc",
source : "b",
target : "c"
}
}, {
data : {
id : "ca",
source : "c",
target : "a"
}
}, {
data : {
id : "ac",
source : "a",
target : "c"
}
}]
},
ready : function(cth) {
//cth.add({ group: "nodes", data: { id: "n0" } });
cth.load([{
data : {
id : "n1"
},
group : "nodes"
}, {
data : {
id : "n2"
},
group : "nodes"
}, {
data : {
id : "e1",
source : "n1",
target : "n2"
},
group : "edges"
}]);
alert("in ready function" + graphArray);
}
})
}
</script>
</html>
Would really appreciate any opinions on what I am doing wrong or perhaps my example corrected.
Thanks
Much Appreciated
(1) cy.load() loads a new graph, replacing what's already there.
(2) cy.add() adds elements, but your elements can not be displayed without specifying any position.