HelpBot Assistant

How can I help you?

Floating of panels in React Dashboard Layout component

5 Mar 202611 minutes to read

The floating functionality enables panels to move upward automatically to fill empty spaces in previous rows, maximizing space utilization within the dashboard layout. When floating is enabled, the layout automatically recalculates panel positions to eliminate gaps and maintain a compact arrangement.

This behavior can be controlled using the allowFloating property, which accepts a boolean value (default: true).

How floating works

When allowFloating is set to true:

  • Panels automatically move upward to occupy available space in previous rows
  • Empty cells are filled dynamically as panels are added, removed, or repositioned
  • The layout maintains a compact appearance without gaps between rows

When allowFloating is set to false:

  • Panels remain anchored to their designated row positions regardless of available space above them
  • Empty spaces remain unfilled, preserving the original grid structure
  • Panels maintain their exact row and column positions

The following sample demonstrates how to enable or disable the floating of panels in the Dashboard Layout component.

import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
    let dashboardObj;
    let buttonObj;
    let resetPanes = [];
    const cellSpacing = [10, 10];
    let panels = [
        { 'sizeX': 2, 'sizeY': 2, 'row': 1, 'col': 0, content: '<div class="content">0</div>' },
        { 'sizeX': 2, 'sizeY': 2, 'row': 2, 'col': 2, content: '<div class="content">1</div>' },
        { 'sizeX': 2, 'sizeY': 2, 'row': 3, 'col': 4, content: '<div class="content">2</div>' }
    ];
    // Button click action to change the floating options for DashboardLayout
    function onClick(args) {
        if (buttonObj.value === "Disable Floating and Reset") {
            buttonObj.value = 'Enable Floating';
            dashboardObj.allowFloating = false;
            dashboardObj.panels = resetPanes;
        }
        else {
            buttonObj.value = 'Disable Floating and Reset';
            dashboardObj.allowFloating = true;
        }
    }
    // Using created event to initialize the panels
    function onCreate(args) {
        resetPanes = dashboardObj.serialize();
        resetPanes[0].content = '<div class="content">0</div>';
        resetPanes[1].content = '<div class="content">1</div>';
        resetPanes[2].content = '<div class="content">2</div>';
    }
    return (<div>
          <div id='container'>
          <div className="inline" id="control">
              <DashboardLayoutComponent id='defaultLayout' ref={s => (dashboardObj = s)} cellSpacing={cellSpacing} created={onCreate} panels={panels} allowFloating={false} cellAspectRatio={100 / 75} columns={6}/>
          </div>
          <div className="inline" id="properties">
              <input type="button" ref={s => buttonObj = s} className="e-btn e-flat e-primary e-outline" name="floating" id="floating" value="Enable Floating" onClick={onClick}/>
          </div>
          </div>
      </div>);
}
export default App;
import {  DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';

function App() {
  let dashboardObj: DashboardLayoutComponent;
  let buttonObj: any;
  let resetPanes : any = [];
  const cellSpacing: number[] = [10, 10];
  let panels: any =   [
      {'sizeX': 2, 'sizeY': 2, 'row': 1, 'col': 0, content:'<div class="content">0</div>'},
      {'sizeX': 2, 'sizeY': 2, 'row': 2, 'col': 2, content:'<div class="content">1</div>'},
      {'sizeX': 2, 'sizeY': 2, 'row': 3, 'col': 4, content:'<div class="content">2</div>'}
  ];
  // Button click action to change the floating options for DashboardLayout
  function onClick(args: any): void {
      if (buttonObj.value === "Disable Floating and Reset") {
          buttonObj.value = 'Enable Floating';
          dashboardObj.allowFloating = false;
          dashboardObj.panels = resetPanes;
      } else {
          buttonObj.value = 'Disable Floating and Reset';
          dashboardObj.allowFloating = true;
      }
  }

  // Using created event to initialize the panels
  function onCreate(args:any): void {
      resetPanes = dashboardObj.serialize();
      resetPanes[0].content = '<div class="content">0</div>';
      resetPanes[1].content = '<div class="content">1</div>';
      resetPanes[2].content = '<div class="content">2</div>';
  }
  return (
          <div>
          <div id='container'>
          <div className="inline" id="control">
              <DashboardLayoutComponent id='defaultLayout' ref={ s => (dashboardObj = s as DashboardLayoutComponent)} cellSpacing={cellSpacing} created= { onCreate } panels={panels} allowFloating={false} cellAspectRatio={100/75}  columns={6} />
          </div>
          <div className="inline" id="properties">
              <input type="button" ref={ s => buttonObj = s} className= "e-btn e-flat e-primary e-outline" name="floating" id="floating" value="Enable Floating" onClick={ onClick } />
          </div>
          </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'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/tailwind3.css";

#container {
  margin: 0 auto;
  width: 600px;
}

.e-panel-container .content {
  vertical-align: middle;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  line-height: 90px;
}

div#properties {
  width: 205px;
  margin-left: 15px;
  padding: 15px;
  position: absolute;
}

.inline {
  display: inline-block;
}

div#control {
  width: 500px;
}
<!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="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-layouts/styles/tailwind3.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">
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>  
</body>
</html>

Refer to the React Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore the React Dashboard Layout example to know how to present and manipulate data.