Resizing Panels in React Dashboard Layout component

18 May 2022 / 2 minutes to read

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,

resizeStart - Triggers when panel resize starts
resize - Triggers when panel is being resized
resizeStop - Triggers when panel resize stops

The following sample demonstrates how to enable and disable the resizing of panels in the Dashboard Layout component in different directions.

Source

Preview

App.jsx

index.jsx

index.html

App.css

App.tsx

index.tsx

import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.cellSpacing = [10, 10];
        this.resize = ['e-south-east', 'e-east', 'e-west', 'e-north', 'e-south'];
        this.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>' }
        ];
    }
    onResizeStart() {
        console.log("Resize start");
    }
    //Dashboard Layout's drag event function
    onResize(args) {
        console.log("Resizing");
    }
    //Dashboard Layout's dragstop event function
    onResizeStop(args) {
        console.log("Resize stop");
    }
    render() {
        return (<div>
     <div id="container">
        <DashboardLayoutComponent id='defaultLayout' cellSpacing={this.cellSpacing} panels={this.panels} allowResizing={true} columns={5} resizableHandles={this.resize} resizeStart={this.onResizeStart.bind(this)} resize={this.onResize.bind(this)} resizeStop={this.onResizeStop.bind(this)}/>
      </div>
    </div>);
    }
}

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.1.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/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';

export default class App extends React.Component<{}, {}> {
  private cellSpacing: number[] = [10, 10];
  private resize: any[] = ['e-south-east','e-east','e-west','e-north','e-south'];
  private 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>'}
  ];

  public onResizeStart(){
    console.log("Resize start");
  }
    //Dashboard Layout's drag event function
  public onResize(args: any) {
    console.log("Resizing");
  }

  //Dashboard Layout's dragstop event function
  public onResizeStop(args: any) {
    console.log("Resize stop");
  }

  public render() {
    return (
      <div>
     <div id="container">
        <DashboardLayoutComponent id='defaultLayout' cellSpacing={this.cellSpacing}  panels={this.panels} allowResizing={true}  columns={5} resizableHandles={this.resize}
        resizeStart={this.onResizeStart.bind(this)} resize={this.onResize.bind(this)} resizeStop={this.onResizeStop.bind(this)}/>
      </div>
    </div>
    );
  }
}

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Resizing panels programmatically

The Dashboard Layout panels can also be resized programmatically by using resizePanel method. The method is invoked as follows,

resizePanel(id, sizeX, sizeY)

Where,

id - ID of the panel which needs to be resized.
sizeX - New panel width in cells count for resizing the panel.
sizeY - New panel height in cells count for resizing the panel.

The following sample demonstrates resizing panels programmatically in the Dashboard Layout’s created event.