bug on javascript/documentation/diagram/group/

[Luigi Grasso]

hi there is a bug in the code below

please check picture in attachment

____________________________________________________________

ref to https://ej2.syncfusion.com/javascript/documentation/diagram/group/

>>> Stack

• Stack panel is used to arrange its children in a single line or stack order, either vertically or horizontally.
• It controls spacing by setting margin properties of child and padding properties of group. By default, a stack panel’s orientation is vertical.

The following code illustrates how to add a stack panel.

Source

Preview

index.js

index.html

var nodes = [{
    id: 'node5',
    width: 100,
    height: 100,
    offsetX: 100,
    offsetY: 100,
    style: {
        strokeColor: '#6BA5D7',
        fill: '#6BA5D7'
    },
    annotations: [{
        content: 'Custom Template',
        offset: {
            y: 1
        },
        verticalAlignment: 'Top'
    }]
}, ];
var getTextElement = function(text) {
    var textElement = new ej.diagrams.TextElement();
    textElement.width = 50;
    textElement.height = 20;
    textElement.content = text;
    return textElement;
};
var addRows = function(column) {
    column.children.push(getTextElement('Row1'));
    column.children.push(getTextElement('Row2'));
    column.children.push(getTextElement('Row3'));
    column.children.push(getTextElement('Row4'));
};
var diagram = new ej.diagrams.Diagram({
    width: 900,
    height: 900,
    nodes: nodes,
    setNodeTemplate: function(obj, diagram) {
        if (obj.id.indexOf('node5') !== -1) {
            var table = new ej.diagrams.StackPanel();
            table.orientation = 'Horizontal';
            var column1 = new ej.diagrams.StackPanel();
            column1.children = [];
            column1.children.push(getTextElement('Column1'));
            addRows(column1);
            var column2 = new ej.diagrams.StackPanel();
            column2.children = [];
            column2.children.push(getTextElement('Column2'));
            addRows(column2);
            table.children = [column1, column2];
            return table;
        }
        return null;
    },
}, '#element');

Attachment: Untitled_dd6747ce.zip

[Gowtham Gunashekar]

Hi Luigi, 

 

We can able to replicate the reported issue at our end. However we have added a sample link to demonstrate how to render a stack panel. We have logged a documentation improvement task to fix reported issue and We will include the documentation changes on 13^th  April 2021.We will let you know once the documentation gets refreshed in live.  

 

Stack blitz Sample link: https://stackblitz.com/edit/fahvqf-stmt55?file=index.js 

JS sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Stack_panel_(2)-998495719.zip 

 

Regards   

Gowtham 

 

[Gowtham Gunashekar]

Hi Luigi,  

 

We have made the changes in documentation and the documentation has been refreshed and published in live site. Please find the published documentation changes in below link. 

 

Documentation Link:  https://ej2.syncfusion.com/javascript/documentation/diagram/group/ 

 

Regards,  

Gowtham