Moving panels in React Dashboard layout component

16 Mar 20237 minutes 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,

  ```js
   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.

app.jsx

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) {
        // movePanel("id", row, col)
        dashboardObj.movePanel("layout_0", 1, 0);
    }
    //Dashboard Layout's change event function
    function onChange(args) {
        console.log("Change event triggered");
    }
    let dashboardObj;
    return (<div>
          <div className="container">
              <DashboardLayoutComponent id='defaultLayout' ref={(scope) => { dashboardObj = scope; }} cellSpacing={cellSpacing} panels={panels} columns={5} created={onCreated.bind(this)} change={onChange.bind(this)}/>
          </div>
      </div>);
}
export default App;

app.tsx

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

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

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.