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
