Rendering a diagram in a partial view

[John Adkins]

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]

Hi John, 

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

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/partialviewsample-1844769863 

Regards, 

Shyam G 

[John Adkins]

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]

Hi John, 

 

Please let me know if you need further assistance on this. 

 

Regards, 

Shyam G 

[Phonchai Sakunchinnasee]

Hi John, 

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

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/partialviewsample-1844769863 

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]

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 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PartialViewSample1026578927 

Regards, 

Shyam G 

[Phonchai Sakunchinnasee]

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]

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. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PartialViewSampleModified-1800904775 

 

Regards, 

Shyam G 

[Ajay Gohil]

Try this Script for diagram rendering in partial view

<script type="text/javascript">
        onRowSelected = function (args)
        {
            var id = args.data["ID"];


            $.ajax({
                type: 'GET',
                url: "@Url.Content(call method)",
                data: {
                    Id: id 
                },
                dataType: "html", 
                success: function (result) {
                    $('#Details').html(result);
                }
            });           
    }

<Script>

[Shyam G]

Hi Ajay, 

 

We should call our diagram init method in AJAX success function to render a partial view. Please refer to a modified code example below. Still if you have any issues, please share us more details such as console error in browser or share an error details with screenshot or video. 

 

Code example:  

  

 

<script type="text/javascript">
        onRowSelected = function (args)
        {
            var id = args.data["ID"];


            $.ajax({
                type: 'GET',
                url: "@Url.Content(call method)",
                data: {
                    Id: id 
                },
                dataType: "html", 
                success: function (result) {
                    $('#Details').html(result); 

                //initialize a diagram  

                    ej.widget.init($("#diagramPartialView")); 
                }
            });           
    } 

<Script> 

   

Please refer to a sample below for further reference. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PartialViewSample1026578927  

 

Regards, 

Shyam G 

[Ajay Gohil]

yes i already show this partialview-977395860 this zip after posted it

https://www.syncfusion.com/forums/132211/load-dynamic-partial-view-with-chart-or-grid

[Shyam G]

Hi Ajay, 

  

Okay, Thanks for your update. 

  

Please let us know if you need further assistance on this. 

  

Regards, 

Shyam G