Unable to display Diagram from Ajax call

[Neill]

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]

Hi Neill, 

 

We have created a sample in which we have rendered the hierarchical layout using AJAX call. 

 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/partialviewajaxsample-697824153 

 

Regards, 

Shyam G 

[Neill]

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]

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