The Dashboard Layout component is also provided with the panel resizing functionality which can be enabled or disabled using the allowResizing
property. This functionality allows you to resize the panels dynamically through UI interactions using the resizing handlers which controls the panel resizing in various directions.
Initially, the panels can be resized only in south-east direction. However, panels can also be resized in east, west, north, south and south-west directions by defining the required directions with the resizableHandles
property.
On resizing a panel in Dashboard layout the following events will be triggered,
The following sample demonstrates how to enable and disable the resizing of panels in the Dashboard Layout component in different directions.
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
const cellSpacing = [10, 10];
let resize = ['e-south-east', 'e-east', 'e-west', 'e-north', 'e-south'];
let panels = [
{ 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, content: '<div class="content">0</div>' },
{ 'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 1, content: '<div class="content">1</div>' },
{ 'sizeX': 1, 'sizeY': 3, 'row': 0, 'col': 4, content: '<div class="content">2</div>' },
{ 'sizeX': 1, 'sizeY': 1, 'row': 1, 'col': 0, content: '<div class="content">3</div>' },
{ 'sizeX': 2, 'sizeY': 1, 'row': 2, 'col': 0, content: '<div class="content">4</div>' },
{ 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 2, content: '<div class="content">5</div>' },
{ 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 3, content: '<div class="content">6</div>' }
];
function onResizeStart() {
console.log("Resize start");
}
//Dashboard Layout's drag event function
function onResize(args) {
console.log("Resizing");
}
//Dashboard Layout's dragstop event function
function onResizeStop(args) {
console.log("Resize stop");
}
return (<div>
<div id="container">
<DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing} panels={panels} allowResizing={true} columns={5} resizableHandles={resize} resizeStart={onResizeStart.bind(this)} resize={onResize.bind(this)} resizeStop={onResizeStop.bind(this)}/>
</div>
</div>);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Dashboard Layout Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<link rel="stylesheet" href="App.css">
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";
#container {
margin: 0 auto;
width: 500px;
}
.e-panel-content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 100px;
}
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
const cellSpacing: number[] = [10, 10];
let resize: any[] = ['e-south-east','e-east','e-west','e-north','e-south'];
let panels: any = [
{'sizeX': 1, 'sizeY': 1,'row': 0, 'col': 0, content:'<div class="content">0</div>'},
{'sizeX': 3, 'sizeY': 2, 'row': 0,'col': 1, content:'<div class="content">1</div>'},
{'sizeX': 1, 'sizeY': 3, 'row': 0, 'col': 4, content:'<div class="content">2</div>'},
{'sizeX': 1, 'sizeY': 1, 'row': 1, 'col': 0, content:'<div class="content">3</div>'},
{'sizeX': 2, 'sizeY': 1, 'row': 2, 'col': 0, content:'<div class="content">4</div>'},
{'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 2, content:'<div class="content">5</div>'},
{'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 3, content:'<div class="content">6</div>'}
];
function onResizeStart(){
console.log("Resize start");
}
//Dashboard Layout's drag event function
function onResize(args: any) {
console.log("Resizing");
}
//Dashboard Layout's dragstop event function
function onResizeStop(args: any) {
console.log("Resize stop");
}
return (
<div>
<div id="container">
<DashboardLayoutComponent id='defaultLayout' cellSpacing={cellSpacing} panels={panels} allowResizing={true} columns={5} resizableHandles={resize}
resizeStart={onResizeStart.bind(this)} resize={onResize.bind(this)} resizeStop={onResizeStop.bind(this)}/>
</div>
</div>
);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The Dashboard Layout panels can also be resized programmatically by using resizePanel method. The method is invoked as follows,
resizePanel(id, sizeX, sizeY)
Where,
The following sample demonstrates resizing panels programmatically in the Dashboard Layout’s created event.
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
const cellSpacing = [10, 10];
let panels = [
{ 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, content: '<div class="content">0</div>' },
{ 'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 1, content: '<div class="content">1</div>' },
{ 'sizeX': 1, 'sizeY': 3, 'row': 0, 'col': 4, content: '<div class="content">2</div>' },
{ 'sizeX': 1, 'sizeY': 1, 'row': 1, 'col': 0, content: '<div class="content">3</div>' },
{ 'sizeX': 2, 'sizeY': 1, 'row': 2, 'col': 0, content: '<div class="content">4</div>' },
{ 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 2, content: '<div class="content">5</div>' },
{ 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 3, content: '<div class="content">6</div>' }
];
//Dashboard Layout's created event function
function onCreated(args) {
// resizePanel("id", sizeX, sizeY)
dashboardObj.resizePanel("layout_4", 1, 1);
dashboardObj.resizePanel("layout_5", 2, 1);
}
let dashboardObj;
return (<div>
<div className="container">
<DashboardLayoutComponent id='defaultLayout' ref={(scope) => { dashboardObj = scope; }} cellSpacing={cellSpacing} panels={panels} columns={5} created={onCreated.bind(this)}/>
</div>
</div>);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Dashboard Layout Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-charts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-calendars/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<link rel="stylesheet" href="App.css">
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";
.container {
margin: 0 auto;
width: 500px;
}
.e-panel-container .content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 90px;
}
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
const cellSpacing: number[] = [10, 10];
let panels: any = [
{'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, content:'<div class="content">0</div>'},
{'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 1, content:'<div class="content">1</div>'},
{'sizeX': 1, 'sizeY': 3, 'row': 0, 'col': 4, content:'<div class="content">2</div>'},
{'sizeX': 1, 'sizeY': 1, 'row': 1, 'col': 0, content:'<div class="content">3</div>'},
{'sizeX': 2, 'sizeY': 1, 'row': 2, 'col': 0, content:'<div class="content">4</div>'},
{'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 2, content:'<div class="content">5</div>'},
{'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 3, content:'<div class="content">6</div>'}
];
//Dashboard Layout's created event function
function onCreated(args: any) {
// resizePanel("id", sizeX, sizeY)
dashboardObj.resizePanel("layout_4", 1, 1);
dashboardObj.resizePanel("layout_5", 2, 1);
}
let dashboardObj: DashboardLayoutComponent;
return (
<div>
<div className="container">
<DashboardLayoutComponent id='defaultLayout' ref={(scope) => { dashboardObj = scope; }} cellSpacing={cellSpacing}
panels={panels} columns={5} created={onCreated.bind(this)} />
</div>
</div>
);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
You can refer to our React Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our React Dashboard Layout example to knows how to present and manipulate data.