Update Chart Based On Grid Update

[Unknown]

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]

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

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/updatechart-47494130.zip 

 

Kindly revert us, if you have any queries. 

 

Regards, 

Kalai.