Search results

Floating Panels in React Dashboard Layout component

The floating functionality of the component allows you to effectively use the entire layout for the panel’s placement. If the floating functionality is enabled, the panels within the layout get floated upwards automatically to occupy the 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.

Source
Preview
App.tsx
index.tsx
index.html
App.css
App.jsx
index.jsx
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import {  DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';

export default class App extends React.Component<{}, {}> {
  public dashboardObj: DashboardLayoutComponent;
  public buttonObj: ButtonComponent;
  private resetPanes : any = [];
  private cellSpacing: number[] = [10, 10];
  private 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>'}
  ];

  constructor(props: any) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.onCreate = this.onCreate.bind(this);
  }

  // Button click action to change the floating options for DashboardLayout
  public onClick(args: any): void {
    if (this.buttonObj.content === "Disable Floating and Reset") {
        this.buttonObj.content = 'Enable Floating';
        this.dashboardObj.allowFloating = false;
        this.dashboardObj.panels = this.resetPanes;
    } else {
        this.buttonObj.content = 'Disable Floating and Reset';
        this.dashboardObj.allowFloating = true;
    }
  }

  // Using created event to initialize the panels
  public onCreate(args:any): void {
    this.resetPanes = this.dashboardObj.serialize();
    this.resetPanes[0].content = '<div class="content">0</div>';
    this.resetPanes[1].content = '<div class="content">1</div>';
    this.resetPanes[2].content = '<div class="content">2</div>';
  }

  public render() {
    return (
         <div>
          <div id='container'>
            <div className="inline" id="control">
                <DashboardLayoutComponent id='defaultLayout' ref={ s => (this.dashboardObj = s as DashboardLayoutComponent)} cellSpacing={this.cellSpacing} created= { this.onCreate } panels={this.panels} allowFloating={false} cellAspectRatio={100/75}  columns={6} />
            </div>
            <div className="inline" id="properties">
                <ButtonComponent ref={ s => (this.buttonObj = s as ButtonComponent)} cssClass= "e-flat e-primary e-outline" name="floating" id="floating" content="Enable Floating" isToggle={true} onClick={ this.onClick } />
            </div>
          </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-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-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";

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

#defaultLayout .e-panel .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;
}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.resetPanes = [];
        this.cellSpacing = [10, 10];
        this.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>' }
        ];
        this.onClick = this.onClick.bind(this);
        this.onCreate = this.onCreate.bind(this);
    }
    // Button click action to change the floating options for DashboardLayout
    onClick(args) {
        if (this.buttonObj.content === "Disable Floating and Reset") {
            this.buttonObj.content = 'Enable Floating';
            this.dashboardObj.allowFloating = false;
            this.dashboardObj.panels = this.resetPanes;
        }
        else {
            this.buttonObj.content = 'Disable Floating and Reset';
            this.dashboardObj.allowFloating = true;
        }
    }
    // Using created event to initialize the panels
    onCreate(args) {
        this.resetPanes = this.dashboardObj.serialize();
        this.resetPanes[0].content = '<div class="content">0</div>';
        this.resetPanes[1].content = '<div class="content">1</div>';
        this.resetPanes[2].content = '<div class="content">2</div>';
    }
    render() {
        return (<div>
          <div id='container'>
            <div className="inline" id="control">
                <DashboardLayoutComponent id='defaultLayout' ref={s => (this.dashboardObj = s)} cellSpacing={this.cellSpacing} created={this.onCreate} panels={this.panels} allowFloating={false} cellAspectRatio={100 / 75} columns={6}/>
            </div>
            <div className="inline" id="properties">
                <ButtonComponent ref={s => (this.buttonObj = s)} cssClass="e-flat e-primary e-outline" name="floating" id="floating" content="Enable Floating" isToggle={true} onClick={this.onClick}/>
            </div>
          </div>
      </div>);
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));