We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Error using virtualization

I tried enabling virtualization and the diagram keeps throwing an error.. 

here is the error..

(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/rendering/svg-renderer.js:124
121 | 'id': id,
122 | 'x': options.x.toString(),
123 | 'y': options.y.toString(),
> 124 | 'width': options.width.toString(),
| ^ 125 | 'height': options.height.toString(),
126 | 'visibility': options.visible ? 'visible' : 'hidden',
127 | 'transform': 'rotate(' + options.angle + ',' + (options.x + options.width * options.pivotX) + ',' + (options.y + options.height * options.pivotY) + ')',
(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/rendering/renderer.js:1093
1090 | options.y = options.y + (options.height - this.groupElement.actualSize.height) / 2;
1091 | }
1092 |
> 1093 | this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);
| ^ 1094 | this.renderer.drawText(canvas, options, parentSvg, ariaLabel, this.diagramId, element.isExport && Math.min(element.exportScaleValue.x || element.exportScaleValue.y), this.groupElement);
1095 |
1096 | if (this.isSvgMode) {
(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/rendering/renderer.js:164
161 | } else if (element instanceof PathElement) {
162 | this.renderPathElement(element, canvas, transform, parentSvg, fromPalette);
163 | } else if (element instanceof TextElement) {
> 164 | this.renderTextElement(element, canvas, transform, parentSvg, fromPalette);
| ^ 165 | } else if (element instanceof DiagramNativeElement) {
166 | this.renderNativeElement(element, canvas, transform, parentSvg, fromPalette);
167 | } else if (element instanceof DiagramHtmlElement) {
(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/rendering/renderer.js:1279
1276 | child.flip = group.flip;
1277 | }
1278 |
> 1279 | this.renderElement(child, parentG || canvas, htmlLayer, transform, parentSvg, true, fromPalette, indexValue);
| ^ 1280 |
1281 | if (child instanceof TextElement && parentG && !(group.elementActions & ElementAction.ElementIsGroup)) {
1282 | flip = child.flip && child.flip !== 'None' ? child.flip : group.flip;



here is the code.. 

<DiagramComponent
id="diagram"
ref={diagram => (diagramInstance = diagram)}
constraints={DiagramConstraints.Default | DiagramConstraints.Virtualization}
width={1000} height={1000}
nodes={nodes}
connectors={connectors}
layout={{
type: 'HierarchicalTree',
// orientation: 'LeftToRight',
horizontalSpacing: 110,
verticalSpacing: 110,
}}
getNodeDefaults={(node) => {
node.height = 100;
node.width = 140;
// node.offsetX = 1000;
return node;
}}

click={(e) => { self.diagramSelected(e) }}

//Sets the default values of connector
getConnectorDefaults={(obj) => {
obj.type = "Bezier";
obj.style.strokeColor = "#6f409f";
obj.style.strokeWidth = 2;
obj.targetDecorator = {
style: {
strokeColor: "#6f409f",
fill: "#6f409f"
}
};
}}
>



4 Replies

SG Shyam G Syncfusion Team November 6, 2019 07:33 AM UTC

Hi Raphael, 
 
We have created a layout sample and enabled virtualization and it is working fine at our end. Could you please check in the below sample? Still if you face any issues, please share us more details such as modify the below sample. 
 
 
Regards, 
Shyam G 



RC raphael chancey November 7, 2019 11:34 PM UTC

Ok... so the issue I am seeing is related to the other issue I posted.. if I take this example and add a button and then add a node programmatically.. I get the exact same: 

Error occurred:
undefined is not an object (evaluating 'e.width.toString')

So somehow adding a node programmatically with constraints enabled seems to be causing some internal issue.. can you just add a node programmatically and see what you get?

Also.. what would be nice is a simple example of adding two new nodes and then connecting them by finding the nodes by their  Id.. that is what I do.. this way I can see your best practice to find node.. I have been using diagramInstance.getNodeObject since getObject seems to take a name but nodes don't have name.. so not sure the best way to find nodes to create the source and target. 


SG Shyam G Syncfusion Team November 8, 2019 04:39 PM UTC

Hi Raphael, 
 
We have logged “Exception raised while adding node at runtime by enabling virtualization” as a defect. The fix for this issue is estimated to be available on 27th November, 2019. 
 
You can track the status of the issue from the below feedback link. 
 
 
Regards, 
Shyam G 



SG Shyam G Syncfusion Team November 27, 2019 05:42 AM UTC

Hi Raphael,  
  
Reported Issue : Exception raised while adding node at runtime by enabling virtualization. 
  
We are glad to announce that our patch release (v17.3.29) is rolled out successfully and In that release, we have added the fix for reported issue.      
       
Please upgrade to the latest version packages to resolve this issue.       
 
Regards,  
Shyam G  


Loader.
Live Chat Icon For mobile
Up arrow icon