Custom button inside a node template

[Benjamin MALBREL]

Hello,

I'm asked to add a collapsable option on my diagram. I tried with the collapsable option you offer out of the box, but the behaviour I want is not what you coded.

I have a main line of node, and need to open the subtree of the node when it's clicked, with a some custom trigger and/or button I could do what is needed. My node template is a stackpanel (as the node itself is something kinda full of many things).

Regards,
Benjamin

[Aravind Ravi]

Hi Benjamin, 

 

We have created a sample to expand node while click on node. To perform the Expand and collapse of nodes in the layout, set isExpanded as false to the nodes. At the time of every node render node defaults call back method gets trigger. In the node defaults method set isExpanded as false to the nodes. So, for every node isExpaned is set as false. Please refer to below code example for how to set in the node defaults method. 

 

  public nodeDefaults(obj: NodeModel): NodeModel { 

        obj.height = 50; 

        obj.style = { fill: 'transparent', strokeWidth: 2 }; 

        obj.isExpanded = false; 

        return obj; 

    }; 

 

When we clicked on node in the diagram , click event gets triggered. By using the click event element args we can identify in which element we have clicked. In click event checked if element is an instance of the node. If element is Node means then we can get the node instance, so by using that node set node isExpanded as true. So on the node click sub tree of the node gets expanded. Please refer below code example and sample below  

 

public clicked(args: IClickEventArgs) { 

      if(args.element instanceof Node) { 

        args.element.isExpanded = true; 

        this.diagram.dataBind(); 

        this.diagram.doLayout(); 

        this.diagram.fitToPage(); 

      } 

    } 

 

Sample: https://stackblitz.com/edit/angular-scbein 

 

We have attached a video demonstration of how expand and collapse gets work in the sample. Please refer to below video link 

 

Video: https://www.syncfusion.com/downloads/support/forum/157636/ze/Node-Expand-788961811 

 

Regards 

Aravind Ravi 

[Benjamin MALBREL]

Thank you for your answer, we are close to what I need to do, but it's not exactly what I want to achieve.

As I have several interactions with the diagram, I need to be able to have an action that will select the node (a simple left click) and another action that expand the node , preferably a button inside the node, but a mouse wheel click or double click could be ok.

Regards,

Benjamin

[Aravind Ravi]

Hi Benjamin, 

 

We have modified a sample to open subtree of node, when double click on node. When we do double click on node or diagram, doubleClick event gets triggered. In that event through args.source we can get in which element gets clicked. If we double click on node, in args.source node gets returned. In double click event check if args.source is instance of node. If it is node means  then set node isExpanded as true. So on the node double click sub tree of the node gets expanded. Please refer below code example and sample below   

 

public clicked(args: IDoubleClickEventArgs) { 

      if(args.source instanceof Node) { 

        args.source.isExpanded = true; 

        this.diagram.dataBind(); 

        this.diagram.doLayout(); 

        this.diagram.fitToPage(); 

      } 

    } 

 

Sample: https://stackblitz.com/edit/angular-scbein-o9wdwf 

 

Regards 

Aravind Ravi 

[Benjamin MALBREL]

Thank you ! that's what I was looking for. thank you very much and have a great day :)

Regards,
Benjamin

[Benjamin MALBREL]

After a little test : 

First thing the single click is triggered 2 times when I double click on a node (not a real problem but maybe something you could look into).

Second thing, when I do the double click I have this weird editable field that  appears in the middle of the node. (see screen below, the white rectangle that I circled in red)

Regards,
Benjamin

[Aravind Ravi]

Hi Benjamin, 

By default, in the diagram, if you double click on the node, text box gets opened to add annotation for the node. To restrict the open of the text box set Annotation constraints as ReadOnly in the node defaults method. At the time of every node render nodedefaults call back method gets trigger. In the node defaults method set annotation constraints as ReadOnly. So, for every node’s annotation constraint is set as ReadOnly. If you double click on the node, text box does not gets opened. Please refer to below code example for how to set annotation constraints in the node defaults method. 

//TS   

public nodeDefaults(obj: NodeModel): NodeModel { 

        obj.height = 100; 

        obj.annotations = [{constraints: AnnotationConstraints.ReadOnly}]; 

        obj.style = { fill: 'transparent', strokeWidth: 2 }; 

        obj.isExpanded = false; 

        return obj; 

    }; 

//HTML 

<ejs-diagram #diagram id="diagram" width="100%" height="590px" [scrollSettings]='scrollSettings' [getConnectorDefaults]='connDefaults' 

                [getNodeDefaults]='nodeDefaults' [layout]='layout' [dataSourceSettings]='data' [setNodeTemplate]='setNodeTemplate' 

                [snapSettings]='snapSettings' (doubleClick)="clicked($event)" (created)="created($event)"> 

            </ejs-diagram> 

Regards 

Aravind Ravi 

[Benjamin MALBREL]

Thank you very much. Everything looks good now. 

Have a great day

[Aravind Ravi]

Hi Benjamin, 

Most welcome. 

Regards 

Aravind Ravi