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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Rendering a diagram in a partial view

Thread ID:

Created:

Updated:

Platform:

Replies:

125539 Aug 23,2016 09:12 PM UTC Aug 23,2019 11:21 AM UTC ASP.NET MVC 7
loading
Tags: Diagram
John Adkins
Asked On August 23, 2016 09:12 PM UTC

My UI consist of mostly partial views, most of it by Ajax requests.  I would like to render a diagram in a partial view either by ajax or by the controller return a partial view with viewdata model.  everything I tried my diagram is always blank but the model has data.  I'm missing something simple. Any suggestions? What is the best approach?  Any samples out there?

Shyam G [Syncfusion]
Replied On August 24, 2016 05:36 AM UTC

Hi John, 

We have created a sample with the partial view which renders diagram initially and at the runtime. 


Regards, 
Shyam G 


John Adkins
Replied On August 24, 2016 03:44 PM UTC

I believe I figured it out ... it was something very simple.

It seems I have to call  ej.widget.init after an ajax call or after a Html.RenderPartial

<script type="text/javascript"> 

    $(document).ready(function () {
      
        ej.widget.init($("#Diagram1"));

    });

</script>


Shyam G [Syncfusion]
Replied On August 25, 2016 04:13 AM UTC

Hi John, 
 
Please let me know if you need further assistance on this. 
 
Regards, 
Shyam G 


Phonchai Sakunchinnasee
Replied On August 9, 2019 05:28 AM UTC

Hi John, 

We have created a sample with the partial view which renders diagram initially and at the runtime. 


Regards, 
Shyam G 


Ask for suggestions. Click the button and let the data show in PartialView with Ajax.


 var pass = args.value;
        $.ajax({
            url: '@Url.Action("DiagramPartialView", "Diagram")?pass=' + pass,
            dataType: "html",
            type: "GET",
            contentType: "application/html; charset=utf-8",
            success: function (result) {
                alert("success");
                 $('#diagramPartialView').append(result);   
                //$("#diagramPartialView").html(result);
            },
            error: function (xhr) {
                alert("error");
            }
        });

Show Error

Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties

Partial View



Shyam G [Syncfusion]
Replied On August 13, 2019 10:16 AM UTC

Hi Phonchai, 

On analyzing your code example, we found that you have not called our diagram init method in AJAX success function. Please refer to a modified code example below to resolve your issue. 

Code example: 
var pass = args.value; 
        $.ajax({ 
            url: '@Url.Action("DiagramPartialView", "Diagram")?pass=' + pass, 
            dataType: "html", 
            type: "GET", 
            contentType: "application/html; charset=utf-8", 
            success: function (result) { 
                alert("success");  
                $("#diagramPartialView").html(result); 
                //initialize a diagram 
                    ej.widget.init($("#diagramPartialView")); 
            }, 
            error: function (xhr) { 
                alert("error"); 
            } 
        }); 
  
We have created a sample to achieve your requirement. Please refer to a sample below 


Regards, 
Shyam G 


Phonchai Sakunchinnasee
Replied On August 22, 2019 09:54 AM UTC

Have already followed the instructions
But still does not show chart.

Showing the alert ("success");

View Index

<div class="row" style="padding:10px;">
    <button id="Button1" type="button" class="btn btn-primary">OneX</button>
........

<div id="DiagramPartialView" style="width:600px;height:400px;">

</div>

......

<script type="text/javascript">
        $(document).ready(function () {
            $("#Button1").click(function () {
                $.ajax({
                    url: '@Url.Action("DiagramPartialView", "Diagram")',
                    dataType: "html",
                    type: "GET",
                    contentType: "application/html; charset=utf-8",
                    success: function (result) {
                        //alert("success");
                        //$("#partialView").html(result);
                        alert("success");  
                        $("#DiagramPartialView").html(result); 
                        //initialize a diagram 
                        ej.widget.init($("#DiagramPartialView")); 
                    },
                    error: function (xhr) {
                        alert("error");
                    }
                });
            });

------------------
Controller
 public ActionResult DiagramPartialView(string pass = "")
        {
            DiagramProperties model = new DiagramProperties();

            model.Height = "350px";
            model.Width = "100%";
            model.PageSettings.ScrollLimit = ScrollLimit.Diagram;
            model.PageSettings.MultiplePage = false;
            model.Layout.Type = LayoutTypes.OrganizationalChart;
            model.Layout.HorizontalSpacing = 30;
            model.Layout.VerticalSpacing = 30;
            model.Layout.Margin.Top = 15;
            model.Layout.Margin.Left = 0;
            model.Layout.GetLayoutInfo = "getLayoutInfo";
            model.DataSourceSettings.DataSource = GetOrganizationChart();
            model.DataSourceSettings.Parent = "Phase";
            model.DataSourceSettings.Id = "Id";
            model.Create = "create";
            Dictionary<string, object> addInfo = new Dictionary<string, object>();
            addInfo.Add("orientation", "vertical");
            addInfo.Add("type", "alternate");
            model.DefaultSettings.Node = new Node()
            {
                Constraints = NodeConstraints.Select | NodeConstraints.PointerEvents,
                Width = 110,
                Height = 40,
                BorderColor = "black",
                AddInfo = addInfo
            };
            Label label = new Label() { FontColor = "#ffffff", Margin = new LabelMargin() { Left = 10, Right = 10 } };
            model.DefaultSettings.Node.Labels.Add(label);
            model.DefaultSettings.Connector = new Connector()
            {
                Constraints = ConnectorConstraints.None,
                LineColor = "#000000",
                Segments = new Collection() { new Segment(Segments.Orthogonal) },
                TargetDecorator = new Decorator() { Shape = DecoratorShapes.None }
            };
            model.SelectedItems.Constraints = ~SelectorConstraints.Rotator;
            model.SelectionChange = "selectionChanged";
            model.Click = "diagramClick";
            model.Tool = Tool.SingleSelect | Tool.ZoomPan;
            model.SnapSettings.SnapConstraints = SnapConstraints.None;
            model.EnableContextMenu = false;
            model.Tool = Tool.SingleSelect;
            model.NodeTemplate = "nodeTemplate";
            ViewData["diagramModelP"] = model;
            return PartialView();
        }
------------------------------------------------
DiagramPartialView


<div>
    <h1>Partial View</h1>
</div>
<div class="row">
    @Html.EJ().Diagram("PartialView", ViewData["diagramModelP"] as Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties)
</div>
-------------------------

Thank you
MJ.


Shyam G [Syncfusion]
Replied On August 23, 2019 11:21 AM UTC

Hi Phonchai, 
 
In our sample, we used your code and it works fine at our end. We are unable to replicate an issue at our end. Could you please share us more details such as modify the below sample. 
 
 
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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

;