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.

Diagram Tutorial

Thread ID:





119501 Jun 30,2015 07:21 PM Jul 27,2015 04:52 AM ASP.NET MVC 3
Tags: Diagram
Nicola Crawford
Asked On June 30, 2015 07:21 PM


I have been attempting to follow your tutorial for creating a diagram and I have run into a number of problems:

The following code (copied and pasted from the tutorial) does not work in the controller - it looks like it may be JavaScript

  model.DefaultSettings.Node = new Node() {

        Width = 70,

        Height = 30,

        shape: { type: "rectangle","cornerRadius": 5 },


There is no code in the GetOrgChartData method - I would assume this should be getting some JSON from a file and converting it into the correct format for model.DataSourceSettings.DataSource, though I'm not sure what the format should be. I have tried using the JSON that is under the "Initialize Data Source" section but I can't work out how to load this correctly.

Is there a complete project for this tutorial?

Finally I tried using the JavaScript tutorial and adding that code to the .cshtml file which seems to work except when I scroll or click on the diagram it gets smaller and smaller until it is only a few pixels high.

Any help with the tutorial would be appreciated.


Shyam G [Syncfusion]
Replied On July 1, 2015 05:30 AM

Hi Nichola

Thanks for using Syncfusion products.

We have modified the “Create your first diagram in MVC” document and it is not refreshed in online. We have provided the drafted version of the document in the below link. However we request you to check our website periodically for the changes in the documentation.


Please let me know if any concerns.

Shyam G

Nicola Crawford
Replied On July 23, 2015 05:47 AM

Thank you for your help. I have managed to get the tutorial code working.

However I am still seeing the scrolling issue - whenever I scroll the mouse wheel in the diagram canvas or click on it when the scroll bar is visible, the canvas gets smaller and smaller until it is almost not visible. I tried using the code from the diagram demo (http://mvc.syncfusion.com/demos/web/diagram/drawingtools) and had the same issue.

Are you able to shed any light on why this might be happening?

Shyam G [Syncfusion]
Replied On July 27, 2015 04:52 AM

Hi Nichola

Thanks for your update.

We have checked your reported issue in our sample and we are unable to reproduce the reported issue at our end. could you please include the latest css files in your sample and check at your end. Still if you are facing issues at your end, please get back to us we will be happy to help you. please refer the cdn link for css file below.

Css link: <link rel='nofollow' href= "http://cdn.syncfusion.com/" rel="stylesheet" />

Sample: http://www.syncfusion.com/downloads/support/forum/119501/ze/drawingtools27july-654805980

Please let me know if any concerns.

Shyam G


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.

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.