Moving Panels in React Dashboard Layout component

22 Jul 2021 / 1 minute to read

Other than drag and drop, it is possible to move the panels in Dashboard Layout programmatically. This can be achieved using movePanel method. The method is invoked as follows,

movePanel(id, row, col)

Where,

id - ID of the panel which needs to be moved.
row - New row position for moving the panel.
col - New column position for moving the panel.

Each time a panel’s position is changed(Programmatically or through UI interaction), the Dashboard Layout’s change event will be triggered.

The following sample demonstrates moving a panel programmatically to a new position in the Dashboard Layout’s created event.

Source

Preview

App.tsx

index.tsx

index.html

App.css

App.jsx

index.jsx

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 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
  onCreated(args: any) {
      // movePanel("id", row, col)
      this.dashboardObj.movePanel("layout_0", 1, 0);
  }
  //Dashboard Layout's change event function
  onChange(args: any) {
      console.log("Change event triggered");
  }

  public dashboardObj: DashboardLayoutComponent;


  public render() {
    return (
      <div>
     <div className="container">
        <DashboardLayoutComponent id='defaultLayout' ref={(scope) => { this.dashboardObj = scope; }} cellSpacing={this.cellSpacing}
        panels={this.panels} columns={5} created={this.onCreated.bind(this)} change={this.onChange.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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.cellSpacing = [10, 10];
        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>' }
        ];
    }
    //Dashboard Layout's created event function
    onCreated(args) {
        // movePanel("id", row, col)
        this.dashboardObj.movePanel("layout_0", 1, 0);
    }
    //Dashboard Layout's change event function
    onChange(args) {
        console.log("Change event triggered");
    }
    render() {
        return (<div>
     <div className="container">
        <DashboardLayoutComponent id='defaultLayout' ref={(scope) => { this.dashboardObj = scope; }} cellSpacing={this.cellSpacing} panels={this.panels} columns={5} created={this.onCreated.bind(this)} change={this.onChange.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'));