Need Help on Diagram Type

[Karthick]

Hello,

I am trying to create a diagram like the attached image. Currently, i am just creating it as a diagram. Is there any other feature available to create something like this? I looked at panel also and I am not sure if boxes can be added inside that. I will not draw this to diagram viewer instead my requirement is to create a diagram like this dynamically based on the values. Please suggest if there are options.

Thanks,

Karthick

Attachment: ModelImage_e929c802.zip

[Shyam G]

Hi Karthick, 

 

On analyzing your screenshot, we found that your requirement can achieved using swimlane. So please look into the below video in which we have shown how to add swimlane/group node at runtime and how to place it in the swimlane. Please confirm whether it satisfies your requirement. if yes, we will create a sample with swimlane and place group node in it at code behind. 

 

Video:http://www.syncfusion.com/downloads/support/directtrac/general/ze/swimlanegroup1488409831 

 

Regards, 

Shyam G 

[Karthick]

Hi Shyam,

Thanks again. This swimlane and group node exactly suits my need. Can you please share the sample code which populates from code behind?

Thanks,

Karthick

[Shyam G]

Hi Karthick, 

We have created a swimlane sample in which we have rendered group nodes in the lanes. Also we have rendered the palette with group nodes. Please refer to the sample below. Also please refer to the video below in which we have shown how to add phases at runtime. 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/swimlanegroupnodes810856126 

Video:http://www.syncfusion.com/downloads/support/directtrac/general/ze/addphasesruntime-1045173435 

Regards, 

Shyam G 

[Karthick]

Thank you Shyam for the code and the video sample. I also tried to create a diagram without the group based on the samples given. Now I am stuck with one issue on this. I get scroll bar If I add more horizontal swimlanes or if I add more phases. I tried adjusting the width and height of diagram_section, control_section styles. Also, adjusted the diagram height, width, scroll settings in code behind but still getting the vertical scroll bar. I faced issues with the width as well but i tried adjusting the offset values and it worked. Can you please hep on this?

[Shyam G]

Hi Karthick, 

 

• By default, if an diagram content exceeds the diagram viewport width/height, the scrollbar appears. So you need to scroll it to view the content outside the viewport.
• If you need to fit the diagram content within the viewport, you can use diagram fitToPage method.
• Also when the diagram size exceeds the browser window size, the native scroll bar occurs. At that time, you can use fitToPage method.
• Please refer to the code example below in which we have used fitToPage method in the nodeCollectionChange event. So when you drag the lane and drop it onto the diagram, the nodeCollectionChange event triggers and in this event we have called fitToPage method to fit the diagram within the viewport only if the swimlane size exceeds the viewport. At initial rendering if the lane size exceeds the viewport, you can call fitToPage method in the create event. Also we have shown how to update the diagram size at runtime.

 

Code example: 

 

DiagramProperties diagram = new DiagramProperties(); 

//define nodeCollectionChange event 

 diagram.NodeCollectionChange = "nodecollectionchange"; 

 

function nodecollectionchange(args) {        

        var diagram = $("#DiagramContent").ejDiagram("instance");         

        if (args.state === "changed") {           

            if (args.element.isSwimlane) { 

                //get the swimlane bounds 

                var bounds = ej.datavisualization.Diagram.Util.bounds(args.element); 

                if ((bounds.width > diagram.model.scrollSettings.viewPortWidth) || (bounds.height > diagram.model.scrollSettings.viewPortHeight)) { 

                    diagram.fitToPage(); 

                } 

            } 

        } 

    } 

 

DiagramProperties diagram = new DiagramProperties(); 

//define nodeCollectionChange event 

diagram.Create = "create"; 

 

function create(args) {   

     //use the same logic defined in nodecollectionchange event 

} 

 

  //update diagram size at runtime 

        $("#diagram").ejDiagram({ 

            width: "600px", 

            height:"600px" 

        }) 

 

Regards, 

Shyam G 

[Karthick]

Hi Shyam, Thanks for your help. I have the below code but getting the vertical scroll bar next to the diagram if the diagram size exceeds the browser page limit. Is it possible to avoid that since the page doesn't look nice if there are 2 scroll bars. Also, Is it possible to bind this diagram like treemap or chart, so that i cannot edit text, delete or rotate boxes?

function create(args) {

        var diagram = $("#DiagramContent").ejDiagram("instance");

                    diagram.fitToPage();

    } 

[Shyam G]

Hi Karthick, 

 

Query	Response
Thanks for your help. I have the below code but getting the vertical scroll bar next to the diagram if the diagram size exceeds the browser page limit. Is it possible to avoid that since the page doesn't look nice if there are 2 scroll bars.	We have modified the sample in which we have rendered the diagram scrollbars alone. Please refer to the sample below.    Sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/swimlanechart-951142011
Also, Is it possible to bind this diagram like treemap or chart, so that i cannot edit text, delete or rotate boxes?	Could you please confirm us whether you need to bind chart/treemap control in our diagram and could not be edited at runtime? If yes, please use Html node to achieve your requirement. please refer to the code example below. Also please refer to the sample attached above.    Code example:    <script id="Htmltemplate" type="text/x-jsrender">      <div id="container" style="width: 200px; height: 200px;"></div>  </script>    HtmlNode node = new HtmlNode();              node.Name = "html";              node.Width = 200;              node.Height = 200;              node.TemplateId = "Htmltemplate";              node.Constraints = NodeConstraints.PointerEvents;              node.OffsetX = 200;              node.OffsetY = 200;              diagram.Nodes.Add(node);    help documentation: https://help.syncfusion.com/aspnetmvc/diagram/shapes#html

 

 

Regards, 

Shyam G 

[Karthick]

Hi Shyam,

I was not clear with my last question regarding binding the chart. sorry. I dont need to bind treemap or chart in the diagram. Right now, If i bind the diagram and run the application, I am able to edit the shape text or delete a shape etc from the browser. I dont want to do that. My diagram should not be editable in the browser.

Thanks,

Karthick

[Shyam G]

Hi Karthick, 

 

Please remove the DiagramConstraints PageEditable from the DiagramConstraints Default to enable the read Only/non-editable diagram. please refer to the code example below. 

 

Code example: 

 

  DiagramProperties model = new DiagramProperties(); 

  //read only diagram 

  model.Constraints = DiagramConstraints.Default & ~DiagramConstraints.PageEditable; 

 

Regards, 

Shyam G 

[Shyam G]

Hi Karthick, 

 

Additional to our previous update, please refer to the help documentation for more details. 

 

Help documentation: https://help.syncfusion.com/aspnetmvc/diagram/constraints#diagramconstraints 

 

Regards, 

Shyam G 

[Karthick]

Thanks Shyam. Below line resolved my issue. Thanks a lot for your help.

model.Constraints = DiagramConstraints.Default & ~DiagramConstraints.PageEditable; 

Thanks,

Karthick

[Shyam G]

HI Karthick, 

We are happy to hear that your problem is resolved. Please let us know if you need further assistance on this. 

Regards, 

Shyam G