Dashboard layout card height width changes on window resize
1 Reply
Hi Prachi Jain,
Greetings from Syncfusion support.
Query1- I want to have a click function on header attribute and want reflection in data of content attribute. With the onClick function, the state is updating but can't see reflection on content data.
We have already logged this a feature from our DashboardLayout component (DashboardLayout content template is not updated while using useState ) which is planned to include in our Volume 3 release, 2020 which is expected to be rolled out at the end of September 2020.
You can track the following link to know the status of this feature implementation.
Query2- This is quite similar to the above one but the difference is Here, I used multiple graphs and tables in dashboard layout and want to change content when select or change date.
You can change the content of the panel using UpdatePanel method. We will prepare a sample based on your requirement and update the sample within five business days on 7th September 2020.
Query3- Is there any option in dashboard layout to set a minimum height of a card
If you want to prevent the DashboardLayout resize for particular panel, when it reaches it resize till particular row and column values, then you can use MinSizeX and MinSizeY properties of DashboardLayout. By default, DashboardLayout component does not resize the panels, if the resized dimension reaches the minSizeX and minSizeY value.
Refer the sample link.
Query4- when we resize window dashboard layout card height width reflect but I want when we resize window dashboard layout width changes not height changes
By default, DashboardLayout is rendered based on the parent dimension. On window resizing, DashboardLayout parent size changes, so, panels are rendered based on parent element dimension. Height and width of the panel is rendered based on the column property of DashboardLayout component. You can’t able to change only the width of the panel.
Query5- I am unable to add extra div with syncfusion charts into the same card and getting height issue when height set 100% ?
In your sample, you have added chart height as 100%. So, your reported problem occurs. You need to adjust the height of content of DashboardLayout to adapt within in its parent element based on your requirement. Refer the below code snippet.
|
return (<div className="template">
<div style={{ "height": "20%", "margin":0 }}>
<div> Hello</div>
<div className="h1"> 1244</div>
</div>
<AccumulationChartComponent style={{ "height": "80%", "width": "100%" }} legendSettings={{ visible: false }} enableSmartLabels={true} enableAnimation={true} center={{ x: '50%', y: '50%' }} tooltip={{ enable: true, header: '<b>${point.x}</b>', format: 'Composition : <b>${point.y}%</b>' }}>
<Inject services={[AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pieData} name='Earnings' xName='x' yName='y' dataLabel={{ visible: true, position: 'Inside', name: 'value', font: { fontWeight: '600' } }} radius='100%' innerRadius="40%" palettes={['#00bdae', '#357cd2', '#e56691']}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
</div>); |
Refer the below screenshot.
Refer the sample link below.
To know more about the DashboardLayout component, refer the below links.
Please let us know, if you need any further assistance.
Regards,
Sowmiya.P
SIGN IN To post a reply.
