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

Load dynamic Partial View with Chart OR Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

132211 Aug 21,2017 09:17 AM UTC May 6,2019 11:14 AM UTC ASP.NET Core 3
loading
Tags: Chart
tamil
Asked On August 21, 2017 09:17 AM UTC

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 [Syncfusion]
Replied On August 23, 2017 01:52 PM UTC

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. 

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

Dharani. 



Rodrigo
Replied On May 4, 2019 06:40 AM UTC

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 [Syncfusion]
Replied On May 6, 2019 11:14 AM UTC

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> 
 
 
 
Kindly check the above sample and code snippet and revert us still you have faced any problems. 
 
Regards, 
Baby.

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

;