Load dynamic Partial View with Chart OR Grid

[tamil]

hi,

      Here, i have to create  chart as a view component but , it should  not load dynamically. here i attached my sample.

layout.html

controller

partial view(_testPartial.cshtml)

index.cshtml

ajax

.0

[Dharanidharan Dharmasivam]

Hi Tamil, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We would like to let you know that in the layout page we have specified script manager and other scripts which are required to render the chart control. In the partial view this will not be referred, so the chart will not render. So, in the partial view you need to specify the _Layout.cshtml page as highlighted below. We have prepared a sample for depicting this scenario. Find the code snippet below to achieve this requirement. 

ASP.NET Core: 

Partial View page(chart.cshtml) 

@{ 

    Layout = "~/Views/Shared/_Layout.cshtml"; 

} 

<ej-chart id="container"></ej-chart> 

 

Index.cshtml: 

<button onclick="changeDataSource()">Ajax</button> 

 

function changeDataSource() { 

        $.ajax({ 

            //... 

        }); 

 

    } 

Controller: 

 public ActionResult ChartData() 

        { 

            //... 

            return PartialView("chart"); 

        } 

In the above code example in the ajax request we have returned to partial view where we have rendered simple chart. Also kindly refer the ej.web.all file locally, if you have referred online link, then specify some time delay to render chart control. You can change this with respect to your scenario. 

Screenshot: 

 

Sample for reference can be find from below link. 

http://www.syncfusion.com/downloads/support/forum/132211/ze/WebApplication1_(2)1547758329  

If your query is misunderstood at our end, kindly revert us with more information on your query. 

Thanks, 

Dharani. 

[Rodrigo]

Hi,

What if you don't want to add the Layout page since it has other text/menu that you don't want to add to your partial view. Is there a way to do it without adding the layout on the partial view?

[Baby Palanidurai]

Hi Rodrigo, 

 

Thanks for the update. 

 

We have analysed your query. We can achieve your requirement by adding script manager in partial view page. In this case, you don’t need to add _layout in partial view page. We have created a sample based on your requirement. In that we have created a partial view page, then added script manager in that to render a basic chart dynamically using a partial view. Now chart is working fine. Please find below code snippet, 

 

Code snippet: 

_partialView(chart.cshtml): 

 

<div> 

    <ej-chart id="container"></ej-chart> 

</div> 

<ej-script-manager></ej-script-manager> 

 

Index.cshtml: 

button onclick="changeDataSource()">Ajax</button> 

<div id="partialPage"></div> 

 

<script> 

    function changeDataSource() { 

        $.ajax({ 

            url: '@Url.Action("ChartData", "Home")', 

            async: false, 

            success: function (data) { 

                $("#partialPage").html(data); 

             } 

        }); 

        } 

</script> 

 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/partialview-977395860.zip 

 

Kindly check the above sample and code snippet and revert us still you have faced any problems. 

 

Regards, 

Baby.