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. Image for the cookie policy date

Diagram Tutorial


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.


3 Replies

SG Shyam G Syncfusion Team July 1, 2015 09:30 AM UTC

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

NC Nicola Crawford July 23, 2015 09:47 AM UTC

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?

SG Shyam G Syncfusion Team July 27, 2015 08:52 AM UTC

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

Live Chat Icon For mobile
Up arrow icon