Render in partial view and refresh data by a dropdown in main page

[Alper Özgür]

Hi;

Is there any sample that has a main page and a partial view. StockChart in partial view. I want to refresh the data of stock chart by change of selected item in dropdown... Could you provide a sample?

Thanks

[Durga Gopalakrishnan]

Hi Alper, 

Greetings from Syncfusion. 

We have prepared sample based on your requirement. We have rendered stock chart in partial view and refreshed the stock chart datasource in main page using dropdown list. Please check with below snippet and sample. 

_IndexPartial.cshtml 

<ejs-stockchart height="90%" width="100%" id="container" title="AAPL Stock Price"> 

</ejs-stockchart> 

 

Index.cshtml 

<div> 

    <div style="width: 20%"> 

        <ejs-dropdownlist id="dropdown" dataSource="@ViewBag.Data" change="changeData" ></ejs-dropdownlist> 

    </div> 

    <partial name="_IndexPartial" /> 

</div> 

<script> 

    function changeData(args) { 

        var value = args.value; 

        var stockObj = document.getElementById('container').ej2_instances[0]; 

        if (value == "Data1") { 

            stockObj.series[0].dataSource =  [ 

                           { x: new Date(2009, 1, 12), high : 145, low : 70,  open : 115, close : 90 , volume : 10000  }, 

                           { x: new Date(2010, 1, 12), high : 170, low : 60,  open : 120, close : 70 , volume : 35000  } 

                           //… 

          ]; 

      } 

      stockObj.refresh(); 

   } 

</script> 

Before data change 

 

After data change 

 

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

Please let us know if you have any concerns. 

Regards, 

Durga G