Hello,
When you do "rowSelected", you configure the screen with the value of "select row" on each tab
If you watch the video '1' and select 'row' from another tab and move on to another tab, the area of the chart will be small.
If you look at the video '2', the width is different every time you make 'sidebar' visible and invisible.
<ejs-grid id="D_PiperackGrid" gridLines="Both" rowHeight="30" height="760px" toolbar="@(new List<string>() { "Search" })" created="GridDataBinding" rowSelected="rowSelected" dataBound="dataBound">
<e-grid-selectionsettings type="Single"></e-grid-selectionsettings>
<e-grid-columns>
<e-grid-column field="ITEM_NM" width="50" textAlign="Left"></e-grid-column>
</e-grid-columns>
</ejs-grid>
If I do "Low Select" here,
<ejs-grid id="RackSuppgrid" gridLines="Both" rowHeight="30" height="250px" actionComplete="createChart">
<e-grid-selectionsettings type="Single"></e-grid-selectionsettings>
<e-grid-columns>
<e-grid-column field="IN_DATE" headerText="Date" type="date" Format="yy/MM/dd" width="50" textAlign="Left"></e-grid-column>
<e-grid-column field="N" headerText="New" width="50" textAlign="Left"></e-grid-column>
<e-grid-column field="C" headerText="NoChange" width="50" textAlign="Left"></e-grid-column>
<e-grid-column field="U" headerText="Update" width="50" textAlign="Left"></e-grid-column>
<e-grid-column field="D" headerText="Deleted" width="50" textAlign="Left"></e-grid-column>
<e-grid-column field="C_SUPP" headerText="Changed Support" width="50" textAlign="Left"></e-grid-column>
<e-grid-column field="T_SUPP" headerText="Total Support" width="50" textAlign="Left"></e-grid-column>
<e-grid-column field="C_RATE" headerText="Change Rate (%)" width="50" textAlign="Left"></e-grid-column>
</e-grid-columns>
</ejs-grid>
The values are specified in each tab
function createChart(grid) {
var chartData = new Array();
var chart = null;
if (grid.rows != null) {
for (var i = 0; i < grid.rows.length; i++) {
var data = new Object();
var date = grid.rows[i].data.IN_DATE;
date = formatDate(date);
date = date.split("-");
date = date[1] + "/" + date[0];
data.IN_DATE = date;
data.T_SUPP = grid.rows[i].data.T_SUPP;
data.C_RATE = grid.rows[i].data.C_RATE;
chartData.push(data);
}
chart = new ej.charts.Chart({
id: 'supportChart',
width: '98%',
hidden: false,
palettes: ["red", "green"],
tooltip: {
enable: true
},
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category',
},
primaryYAxis:
{
title: 'Total support',
rangePadding: 'None',
minimum: 0,
maximum: 1500,
interval: 300,
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
},
axes:
[
{
title: 'Change rate (%)',
majorGridLines: { width: 0 },
rowIndex: 0, opposedPosition: true,
lineStyle: { width: 0 }, majorTickLines: { width: 0 },
minimum: 0, maximum: 30, interval: 5,
name: 'yAxis', minorTickLines: { width: 0 },
labelFormat: '{value}%'
}
],
series: [
{
type: 'Line',
dataSource: chartData,
xName: 'IN_DATE', width: 2, marker: {
visible: false,
width: 10,
height: 10
},
yName: 'T_SUPP', name: 'Support',
},
{
type: 'Line',
dataSource: chartData,
xName: 'IN_DATE', width: 2, marker: {
visible: false,
width: 10,
height: 10
},
yName: 'C_RATE', name: 'Change rate',
yAxisName: 'yAxis',
}
],
}, '#chartContainer');
}
else {
chartData = null;
chart = new ej.charts.Chart({
id: 'supportChart',
width: '98%',
series: [
{
type: 'Line',
dataSource: null,
},
],
}, '#chartContainer');
}
Hi TaeWook,
We suggest you to re-render the chart control in change event of side bar control and selected event of tab control using chart refresh method. Please check with the below snippet.
<ejs-chart id="container"> </ejs-chart> <script type="text/javascript"> // tab event function selected() { var chart = document.getElementById('container').ej2_instances[0]; chart.refresh(); } // sidebar event function change() { var chart = document.getElementById('container').ej2_instances[0]; chart.refresh(); } </script> |
API Reference
https://ej2.syncfusion.com/documentation/api/tab/#selected
https://ej2.syncfusion.com/documentation/api/sidebar/#change
Please let us know if you have any concerns.
Regards,
Durga Gopalakrishnan.
I checked the answer well, but there is still a problem.
It made 'refresh' possible when you clicked 'button' in 'layout'.
Still, the size of the chart remains unchanged.
//Layout의 sidebar toggle button click event
document.getElementById('toggle').addEventListener('click', function () {
var chart = document.getElementsByClassName('e-chart')[0].ej2_instances[0];
chart.refresh();
});
Hi Taewook,
We are validating your reported scenario. We will update the status within two business days(15th November 2022). We appreciate your patience until then.
Regards,
Durga Gopalakrishnan.
Hi Taewook,
Thanks for being patience. Please check with the below suggestions.
# 1 : The width is different every time you make 'sidebar' visible and invisible.
We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our weekly patch release which is scheduled to be rolled out on 29th November 2022. We appreciate your patience until then. You can keep track of the bug from the below feedback link.
Feedback Link : https://www.syncfusion.com/feedback/39112/chart-is-not-resized-properly-when-toggling-sidebar
If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.
# 2 : Select 'row' from another tab and move on to another tab, the area of the chart will be small.
We have prepared sample with tab control and used selected event to refresh the chart while choosing the tab. Please check with the below snippet and screenshot.
<ejs-tab id="defaultTab" selected="onTabSelect"> </ejs-tab> <script> function onTabSelect(args) { var chartObj = document.getElementById("container").ej2_instances[0]; chartObj.refresh(); var chartObj1 = document.getElementById("container1").ej2_instances[0]; chartObj1.refresh(); } </script> |
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabResize1936389216.zip
Kindly revert us if you have any concerns.
Regards,
Durga Gopalakrishnan.
Hi Taewook,
We have resolved the reported problem in sample level itself. We suggest you to call chart refresh method to overcome the reported scenario. Please check with the below snippet and sample.
<ejs-toolbar id="resToolbar" clicked="toolbarCliked"> </ejs-toolbar> <script> function toolbarCliked(args) { if (args.item.tooltipText == "Menu") { sidebarObj.toggle(); var lineObj = document.getElementById('container').ej2_instances[0]; lineObj.refresh(); } } </script> |
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartSidebar-1916210975.zip
Kindly revert us if you have any concerns.
Regards,
Durga Gopalakrishnan.