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.
Related
At the core, I am trying to generate a table with links that can be clicked on a reload of a PartialView. Everything is working except I cannot get the page to stop refreshing. What I would like to do is only load the PartialView inside of the researchDiv. I do have <add key="UnobtrusiveJavaScriptEnabled" value="true" /> in the web.config.
I've changed the view and partialview to now use ajax, but the same issue is occurring and I'm not entirely sure of what to do. If I click a link the entire page refreshes instead of just the htmlContainer.
In my _LayoutDashboard I do have the unobtrusive jscripts, and when the page renders there are 0 Console errors.
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript">
This is the view
#model Stocks.BLL.ExecutingTrades.Model.WatchList.ExeTradesWatchList
#{
ViewBag.Title = "WatchList";
Layout = "~/Views/Shared/_LayoutDashboard.cshtml";
}
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 20%;
border: 1px solid black;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-childsmall {
float: left;
}
.float-child {
width: 80%;
float: left;
height: 1000px;
}
</style>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<p>Last Update: #Html.Label(DateTime.UtcNow.ToString()) - Time in UTC</p>
<div class="float-container">
<div class="float-childsmall">
#foreach (var watchList in Model.ViewExecutingTradesUserWatchListFollowShort)
{
<table id="customers">
<caption class="text-center"><h2>#watchList.WatchListName</h2></caption>
<caption class="text-center"><p style="font:10px;">#watchList.WatchListDescription</p></caption>
<tr>
<th>Ticker</th>
</tr>
#foreach (var ticker in Model.ViewUserWatchListTickerModel.Where(y => y.UserWatchListId == watchList.UserWatchListId).ToList())
{
<tr>
<td><a target="_blank" href="https://finviz.com/quote.ashx?t=#ticker.Ticker">#ticker.Ticker </a></td>
<!--<td>
#{
<button type="button" class="btn" id='wlButton_#watchList.WatchListName+#watchList.UserWatchListId+#ticker.Ticker'>
#Html.DisplayFor(modelItem => #ticker.Ticker)
</button>
}
</td>-->
<div class="btnB" id='div_#watchList.WatchListName+#watchList.UserWatchListId+#ticker.Ticker'>
<p class="category-title">#ticker.Ticker</p>
</div>
</tr>
}
</table>
}
</div>
<div class="float-child" id="researchDiv">
<div id="htmlContainer">
#Html.Partial("_Research", new ExecutingTrades.Models.TickerInMem() { Ticker = "META" });
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".btnB").click(function () {
$.ajax({
url: '#Url.Action("_Research", "Dashboard")',
type: "GET",
data: { ticker: this.id.substring(this.id.lastIndexOf('+')) },
cache: false,
async: true,
success: function (data) {
$("#htmlContainer").html(data);
}
});
});
})
</script>
_Research which is the partialview
#model ExecutingTrades.Models.TickerInMem
<!-- TradingView Widget BEGIN -->
<style>
.tradingview-widget-container {
border: 3px solid #fff;
padding: 20px;
height: 650px;
}
</style>
<div class="tradingview-widget-container">
<div class="tradingview-widget-copyright"><span class="blue-text">#Model.Ticker</span> by TradingView</div>
<script type="text/javascript">
alert(#Model.Ticker);
</script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "NASDAQ:#Model.Ticker",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_37810"
}
);
</script>
</div>
And the Controller
public ActionResult _Research(string ticker)
{
if (string.IsNullOrWhiteSpace(ticker))
return View();
var model = new TickerInMem();
model.Ticker = ticker.Split('+').Last();
model.Exchange = "NASDAQ";
return PartialView("_Research", model);
}
When I debug - everything works, i can hit the partial view being called and the model is correct.
When the page loads:
When clicking on a link:
All I really want to do is load the 2nd graph which I click it to where the partial view in rendered on the view.
So my MVC and Ajax are correct, the real issue was inside of the tradingview control, I had removed the div it was referencing in the container.
"container_id": "tradingview_37810"
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
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>
I have Laravel 5.4 project with Vue.js. I wont to use CSS Modules feature that provides by vue-loader. I have vue.js file with code:
<template lang="pug">
.LAYOUT
.SIDE-NAVBAR
.MAIN
</template>
<style module>
.LAYOUT{
height: 100%;
width: 100%;
border: 1px solid red;
}
</style>
<script>
export default {
methods:{
test(){
console.log(this.$style.LAYOUT)
}
},
mounted(){
this.test();
}
}
</script>
When I'm trying to see some information about "this.$style.LAYOUT" in console, it shows that the variable is undefined. May be I should do some settings? How to fix it?
When I'm trying to get value of "this.$style", it returns object:
It may be undefined because you not using that class.
Below is a working example.It also includes how to set dynamic css module class:
<template>
<div>
<button :class="[className1, className2, dynamicClass]" #click="showStyleObject">Click Me</button>
</div>
</template>
<script>
export default {
name: 'example',
props: {
'type-of-button': {
validator: function (value) {
return ['primary', 'secondary', 'default'].indexOf(value) !== -1
}
}
},
data() {
return {
className1: this.$style.button,
className2: this.$style.button2,
}
},
created() {
console.log(this.$style.button)
console.log(this.$style.button2)
},
computed: {
dynamicClass() {
return this.$style[this.typeOfButton]
}
},
methods: {
showStyleObject() {
console.log(this.$style)
}
},
}
</script>
<style module>
.button {
background: red;
}
.button2 {
padding: 8px 10px;
}
.primary {
padding: 8px 10px;
background: blue;
color: white;
border-radius: 10px;
}
.secondary {
padding: 8px 15px;
background: darkslategrey;
color: aliceblue;
border: none;
}
.default {
background: aliceblue;
}
</style>
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