Menu
I'm able to decode graph xml model successfully but the cell is not visible until the drag
below GIF shows my problem
Question: I want to load the graph fully for the 1st(now showing only div) time also without need for drag
Here is how I'm doing decoding and rendering xml
var graphXmlStr = ''//xmldata
var doc = mxUtils.parseXml(graphXmlStr)
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
I'm using below code for html graph.htmlLabels below code I need
graph.convertValueToString = function(cell) {
return cell.value;
}
Below is my full code
<html>
<head>
<title>Toolbar example for mxGraph</title>
<style>
#graph-wrapper {
background: #333;
width: 100%;
height: 528px;
}
</style>
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
</script>
<script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
</head>
<body onload="initCanvas()">
<h4>find div text and drag it , as you drag it will become visible</h4>
<div id="graph-wrapper">
</div>
<script>
var graph;
function initCanvas() {
//This function is called onload of body itself and it will make the mxgraph canvas
graph = new mxGraph(document.getElementById('graph-wrapper'));
graph.htmlLabels = true;
graph.cellsEditable = false;
graph.model.beginUpdate();
var graphXmlStr = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><div xmlns="http://www.w3.org/1999/xhtml" id="2" style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
 Pipe
 <mxCell xmlns="" style="fillColor=none;strokeColor=none" vertex="1" parent="1"><mxGeometry x="150" y="50" width="100" height="100" as="geometry"/></mxCell></div></root></mxGraphModel>`;
var doc = mxUtils.parseXml(graphXmlStr);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
graph.model.endUpdate();
// render as HTML node always. You probably won't want that in real world though
graph.convertValueToString = function(cell) {
return cell.value;
}
}
</script>
</body>
</html>Please help me thanks in advance!!!
950
I found it you have to call graph.refresh();.
<html>
<head>
<title>Toolbar example for mxGraph</title>
<style>
#graph-wrapper {
background: #333;
width: 100%;
height: 528px;
}
</style>
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
</script>
<script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
</head>
<body onload="initCanvas()">
<h4>find div text and drag it , as you drag it will become visible</h4>
<div id="graph-wrapper">
</div>
<script>
var graph;
function initCanvas() {
//This function is called onload of body itself and it will make the mxgraph canvas
debugger
graph = new mxGraph(document.getElementById('graph-wrapper'));
graph.htmlLabels = true;
graph.cellsEditable = false;
graph.model.beginUpdate();
var graphXmlStr = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><div xmlns="http://www.w3.org/1999/xhtml" id="2" style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
 Pipe
 <mxCell xmlns="" style="fillColor=none;strokeColor=none" vertex="1" parent="1"><mxGeometry x="150" y="50" width="100" height="100" as="geometry"/></mxCell></div></root></mxGraphModel>`;
var doc = mxUtils.parseXml(graphXmlStr);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
graph.model.endUpdate();
//graph.graphModelChanged([])
// render as HTML node always. You probably won't want that in real world though
graph.convertValueToString = function(cell) {
return cell.value;
}
graph.refresh();
}
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
