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.

Unable to display Diagram from Ajax call

Thread ID:

Created:

Updated:

Platform:

Replies:

130131 Apr 24,2017 07:47 AM Apr 26,2017 12:13 AM ASP.NET MVC (Classic) 3
loading
Tags: Diagram
Neill
Asked On April 24, 2017 07:47 AM

Hi there,

I am attempting to display a hierarchical diagram from the result of an Ajax call.

If I instantiate and load a diagram directly in the ActionResult method and return the View, it displays the diagram correctly, but nothing is displayed if I make an ajax call and try to return the JSON and use it in a diagram?

As a test I am using the HierarchicalLayout.json as per the samples.

Controller:

public ActionResult Home()
{

            DiagramProperties model = new DiagramProperties();

            model.Layout.Orientation = LayoutOrientations.TopToBottom;

            model.Height = "400px";
            model.PageSettings.ScrollLimit = ScrollLimit.Diagram;
            model.Layout.Type = LayoutTypes.HierarchicalTree;
            model.Layout.HorizontalSpacing = 25;
            model.Layout.VerticalSpacing = 35;
            model.Layout.MarginX = 0;
            model.Layout.MarginY = 10;
            model.DataSourceSettings.Parent = "ReportingPerson";
            model.DataSourceSettings.Id = "Name";
            model.DefaultSettings.Node = new Node()
            {
                Constraints = NodeConstraints.Select,
                FillColor = "#88C65C",
                Width = 115,
                Height = 45,
                BorderWidth = 1,
                BorderColor = "black"
            };
            Label label = new Label() { FontColor = "white", FontSize = 12 };
            model.DefaultSettings.Node.Labels.Add(label);
            model.DefaultSettings.Connector = new Connector()
            {
                LineColor = "#000000",
                Segments = new Collection() { new Segment(Segments.Orthogonal) },
                TargetDecorator = new Decorator() { Shape = DecoratorShapes.Arrow },
                Constraints = ConnectorConstraints.None
            };
            model.SelectedItems.Constraints = ~SelectorConstraints.Rotator;
            model.SelectionChange = "selectionChange";
            model.SnapSettings.SnapConstraints = SnapConstraints.None;
            model.EnableContextMenu = false;
            model.Tool = Tool.SingleSelect;
            model.NodeTemplate = "nodeTemplate";
            ViewData["diagramModel"] = model;



            return View();
}

ActionResult Method:

[HttpGet]
public ActionResult TestDiagram()
{
     string jsonString = JsonConvert.SerializeObject(GetHierarchicalLayout());
     string loadContent = jsonString;
      return Content(loadContent);
}

View

@using Syncfusion.JavaScript.DataVisualization
@{
     Layout = "~/Views/Shared/_Layout.cshtml";
}

 <div class="well">
     @Html.EJ().Diagram("HierarchicalLayout", ViewData["diagramModel"] as Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties)
 </div>


JQuery Ajax:

function testing() {
            $.ajax({
                type: 'GET',
                url: testUrl,
                data: {  },
                success: function (result) {                
                    var diagram = null;
                    var diagram = $("#HierarchicalLayout").ejDiagram("instance");

                    //convert JSON string to JSON object
                    var loadDiagram = JSON.parse(result);

                    //load the diagram using saved json data
                    diagram.load(loadDiagram);

                },
                error: function (ex) {
                    console.log("error: " + ex.error);
                },
                complete: function () {
                }
            });
        }


And nothing is displayed when I call the ajax method.

Please let me know what I am doing wrong.

N. Jamieson



Shyam G [Syncfusion]
Replied On April 25, 2017 02:02 AM

Hi Neill, 
 
We have created a sample in which we have rendered the hierarchical layout using AJAX call. 
 
 
Regards, 
Shyam G 


Neill
Replied On April 25, 2017 09:19 AM

Thank you,After some fiddling I managed to get it working within my project.I'm pretty sure my biggest problem was some or other .js file I wasn't linking to.Regards,Neill

Shyam G [Syncfusion]
Replied On April 26, 2017 12:13 AM

Hi Neill, 
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.

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.

;