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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Update Chart Based On Grid Update

Thread ID:

Created:

Updated:

Platform:

Replies:

146704 Aug 14,2019 08:04 PM UTC Aug 15,2019 11:54 AM UTC ASP.NET Core - EJ 2 1
loading
Tags: Charts
Mark Tannehill
Asked On August 14, 2019 08:04 PM UTC

Our grid displays data for a session. We need to update the 'Count' on the top grid but want to signify on the bottom graph that the numbers have been altered. Our approach is to make the grid lines dashed after editing.


Here's the desired result after update.



Is there a way to access the Chart and change the line style when the Update button has been clicked?
Thanks

Kalaimathi Chellaiah [Syncfusion]
Replied On August 15, 2019 11:54 AM UTC

Hi Mark, 
 
Greetings from Syncfusion. 
 
We have analyzed your query. We can achieve your requirement using actionComplete event of the grid. By using grid dataBound method, you can create the chart based on grid data. Then using actionComplete method you can change the rendered chart styles based on the request type. We have prepared a simple sample for your reference. Please find below, 
 
Code Snippet: 
   <ejs-grid id="Grid" dataSource="ViewBag.dataSource" dataBound="dataBound"  
    toolbar="@(new List<string>() { "Update", "Cancel" })" allowPaging="true"  
     allowFiltering="true" actionComplete="actionComplete"> 
    </ejs-grid> 
<div id="Chart"></div> 
<script> 
    var chart; 
    function dataBound(args) { 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        chart = new ej.charts.Chart({ 
            //Initializing Primary X Axis 
            primaryXAxis: { 
                
            }, 
            series: [ 
                { 
                    type: 'Line', 
                    dataSource: grid.getCurrentViewRecords(), 
                    xName: 'OrderID', width: 2, marker: { 
                        visible: true, 
                        width: 10, 
                        height: 10 
                    }, 
                    yName: 'Freight', name: 'Germany', 
                }, 
            ], 
 
        }); 
        chart.appendTo('#Chart'); 
    } 
    function actionComplete(args) { 
        if (args.requestType === 'save') { 
            chart.series[0].dashArray = '5,5'; 
            chart.refresh(); 
        } 
    } 
</script> 
 
Screenshot: 
Initial Rendering 
After Update Button Clicked 
 
 
 
 
Kindly revert us, if you have any queries. 
 
Regards, 
Kalai. 


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

Live Chat Icon For mobile
Live Chat Icon