Got blank space when set height in dashboard layout card
3 Replies
Hi Nikita,
Greetings from Syncfusion support.
Query 1- Is there any props to set card height according to its content in dashboard layout ?
We would you like to let you know that DashboardLayout is a grid structure component. It splits the panels based on the Columns property of DashboardLayout component. When you set the Column property as 4, it splits the entire width of Dashboard Layout into 4 and creates cells which will separates as 4 rows and 4 columns. So, It has no option to set the user given width and height for the panels of DashboardLayout component.
Each panel occupies any of the cell position within the available rows and columns based on the row , column, sizeX, sizeY values defined in dashboard panel settings.
Refer the below link to know more about the pane property.
Query2- if I set height in "data-sizey", the height doesn't set according to content, we get blank space.
By default, DashboardLayout adapt the content within the panel when setting the height and width of the content as 100 percent. Based on your shared code, we see that you are using inline rendering of DashboardLayout component.
Note: If you are using inline rendering, it is mandatory to refresh the inner components (like chart) during created() event for dashboard layout. Or else you have use panels property to define the panels and its inner components. In that case, there is no need for calling the refresh() method.
For your reference, we have rendered a chart component and adapt the component within the panel.
Refer the below code snippet.
|
<DashboardLayoutComponent id="default_dashboard" created={this.created.bind(this)} columns={5} ref={(scope) => { this.dashboardObj = scope; }} cellSpacing={this.cellSpacing}>
<div id="one" className="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
<div className="e-panel-content">
<ChartComponent ref={(scope) => { this.chartObj = scope; }} height="100%" width="100%" id="charts" primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Tooltip, LineSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='month' yName='sales' name='Sales'/>
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
</DashboardLayoutComponent>
created() {
// Refresh the chart component.
this.chartObj.refresh();
}
<style>
.e-chart {
height:100%;
width:100%;
}
</style>
|
Refer the sample link for Inline rendering.
Query3- particular card gets out of the place at the bottom.
We suspect that you may have not properly defined the row and column property of the DashboardLayout component. So, your reported issue occurs.
Refer the your issue replicated sample.
When you set the Column property as a 5, and then set the first panel property as below.
|
<div id="one" className="e-panel" data-row="0" data-col="0" data-sizeX="5" data-sizeY="2">
<div className="e-panel-container">
<div className="text-align">0</div>
</div>
</div> |
It align the panel in first row and first column of DashboardLayout component. And then assign the next panel settings as ( row as 1 and col as 0 ). DashboardLayout tries to position the panel on first row. But the first panel is already occupied that position. So, it floats the first panel downwards and position the second panel in that position.
Refer the below screenshot.
Refer the below sample link.
So, you need position the panels in the correct positions. When you set the second panel value as (row as 2 , col as 0). It occupies the position below the first panel.
Refer the below screenshot.
Refer the sample link which may help you resolve your reported problem.
Query 4 Please also suggest me to how to define minimum & maximum height of dashboard layout cards in data-minsizey and data-maxsizey
When resizing the DashboardPanel, you can’t able to minimize and maximize the panel after the declared minsizey and maxsizey value. And also, when you resize the panel, content of the panel will not adapt to the DashboardLayout panel. Because, we have not handled the content resize in our component side. Since, content within the panels will vary based on the different user’s need and it might be any HTML elements regardless of Syncfusion controls, we cannot determine the content inside the dashboard panels and their respective configurations. So, we have no in-built functionality in Dashboard Layout to handle the content inside the panels.
So, when resizing you need to manually refresh the content control or elements to adapt within the DashboardLayout panel.
Refer the below code snippet.
|
<DashboardLayoutComponent id="default_dashboard" created={this.created.bind(this)} columns={5} allowResizing={true} ref={(scope) => { this.dashboardObj = scope; }}
resizeStop ={this.resizeStop.bind(this)} cellSpacing={this.cellSpacing}>
<div id="one" className="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
<div className="e-panel-content">
<ChartComponent ref={(scope) => { this.chartObj = scope; }} height="100%" width="100%" id="charts" primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Tooltip, LineSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='month' yName='sales' name='Sales'/>
</SeriesCollectionDirective>
</ChartComponent>
</div>
</div>
</DashboardLayoutComponent>
resizeStop(){
// Refresh the chart component.
this.chartObj.refresh();
}
|
Refer the sample link below.
Refer the below links to know more about the DashboardLayout component.
Please let us know, if you need any further assistance.
Regards,
Sowmiya.P
SIGN IN To post a reply.
