JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Floating Panels in JavaScript Dashboard Layout control

06 Jun 2023 / 2 minutes to read

The floating functionality of the component allows 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 DashboardLayout component.

Source
Preview
app.ts
index.html
index.css
Copied to clipboard
import { DashboardLayout } from '@syncfusion/ej2-layouts';
import { Button } from '@syncfusion/ej2-buttons';

// initialize dashboardlayout component
let dashboard: DashboardLayout = new DashboardLayout({
    cellSpacing: [10, 10],
    allowFloating: false,
    cellAspectRatio: 100 / 75,
    columns: 6,
    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>' }]
});
// render initialized dashboardlayout
dashboard.appendTo('#dashboard_default');

let resetPanels = dashboard.serialize();
resetPanels[0].content = '<div class="content">0</div>';
resetPanels[1].content = '<div class="content">1</div>';
resetPanels[2].content = '<div class="content">2</div>';

let toggleBtn: Button = new Button({
    cssClass: "e-flat e-primary e-outline",
    content: "Enable Floating",
    isToggle: true
});
toggleBtn.appendTo("#toggle");

document.getElementById('toggle').onclick = () => {
    let panels = [];
    if (toggleBtn.content == "Disable Floating and Reset") {
        toggleBtn.content = 'Enable Floating';
        dashboard.allowFloating = false;
        dashboard.panels = resetPanels;
    } else {
        toggleBtn.content = 'Disable Floating and Reset';
        dashboard.allowFloating = true;
    }
};
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 DashboardLayout </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 DashboardLayout Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-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>
</head>
<body>
    <div id='container'>
        <div class="inline" id="control">
            <div id="dashboard_default"></div>
        </div>
        <!--element which is going to render the dashboardlayout-->
        <div class="inline" id="properties">
                <button id="toggle"></button>
        </div>
        
    </div>
</body>
</html>
Copied to clipboard
#container {
  margin: 0 auto;
  width: 600px;
}

#dashboard_default .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;
  padding: 15px;
  position: absolute;
}

.inline {
  display: inline-block;
}

div#control {
  width: 500px;
}

#dashboard_default .e-panel { 
  transition:none !important;
}

You can refer to our JavaScript Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Dashboard Layout example to knows how to present and manipulate data.

Previous
Next