Floating of panels in React Dashboard layout component
26 Dec 202411 minutes to read
The floating functionality of the component allows you to effectively use the entire layout for panel placement. When the floating functionality is enabled, the panels within the layout automatically float upwards to occupy empty cells available in previous rows. This functionality can be enabled or disabled using the allowFloating property of the component.
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/material.css";
@import "../node_modules/@syncfusion/ej2-react-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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">
<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>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 learn how to present and manipulate data.