HelpBot Assistant

How can I help you?

Floating of panels in EJ2 TypeScript Dashboard Layout control

5 Mar 20267 minutes to read

The floating functionality of the control allows effective use of the entire layout for panel placement. If the floating functionality is enabled, the panels within the layout float upwards automatically to occupy the empty cells available in previous rows. This functionality can be enabled or disabled using the allowFloating property of the control.

The following sample shows enabling or disabling panel floating in the Dashboard Layout.

import { DashboardLayout } from '@syncfusion/ej2-layouts';
import { Button } from '@syncfusion/ej2-buttons';

// initialize Dashboard Layout control
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 Dashboard Layout
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");
let toggleElement = document.getElementById('toggle');
if (toggleElement) {
    toggleElement.addEventListener('click', () => {
        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;
        }
    });
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Dashboard Layout </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Dashboard Layout Control" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='container'>
        <div class="inline" id="control">
            <div id="dashboard_default"></div>
        </div>
        <!--element which is going to render the Dashboard Layout-->
        <div class="inline" id="properties">
            <button id="toggle"></button>
        </div>
    </div>
    <style>
        #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;
        }
    </style>
</body>

</html>

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