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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Need Help on Diagram Type

Thread ID:

Created:

Updated:

Platform:

Replies:

132396 Aug 30,2017 12:55 PM UTC Sep 14,2017 03:52 AM UTC ASP.NET MVC 12
loading
Tags: Diagram
Karthick
Asked On August 30, 2017 12:55 PM UTC

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 [Syncfusion]
Replied On September 1, 2017 12:25 AM UTC

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. 
 
 
Regards, 
Shyam G 


Karthick
Replied On September 1, 2017 05:14 AM UTC

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 [Syncfusion]
Replied On September 4, 2017 12:07 PM UTC

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. 



Regards, 
Shyam G 



Karthick
Replied On September 5, 2017 06:09 AM UTC

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 [Syncfusion]
Replied On September 6, 2017 11:16 AM UTC

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
Replied On September 6, 2017 11:50 AM UTC

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 [Syncfusion]
Replied On September 7, 2017 01:00 PM UTC

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. 
 
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); 
 
 
 
 
Regards, 
Shyam G 


Karthick
Replied On September 11, 2017 12:21 PM UTC

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 [Syncfusion]
Replied On September 12, 2017 09:58 AM UTC

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 [Syncfusion]
Replied On September 12, 2017 10:08 AM UTC

Hi Karthick, 
 
Additional to our previous update, please refer to the help documentation for more details. 
 
 
Regards, 
Shyam G 


Karthick
Replied On September 13, 2017 11:17 AM UTC

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

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

Thanks,

Karthick


Shyam G [Syncfusion]
Replied On September 14, 2017 03:52 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;