Floating of panels in Angular Dashboard layout component

4 Mar 20264 minutes to read

The floating functionality allows panels to move upward automatically to fill empty spaces left by panels in previous rows, maximizing space utilization within the dashboard. When enabled, panels dynamically reposition themselves to eliminate gaps and create a compact layout arrangement.

This behavior is 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 in their designated row positions
• 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.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { DashboardLayoutComponent } from '@syncfusion/ej2-angular-layouts';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
    imports: [DashboardLayoutModule, ButtonModule],
    standalone: true,
    selector: 'app-root',
    template: `
    <div class="control-section">
        <div class="inline" id="control">
            <ejs-dashboardlayout id='dashboard_default' #defaultLayout [columns]='6' [cellSpacing]='cellSpacing'
                [panels]='panels' [allowFloating]='allowFloating' [cellAspectRatio]='cellAspectRatio'>
            </ejs-dashboardlayout>
        </div>
        <div class="inline" id="properties">
            <button ejs-button id='toggle' #toggleBtn cssClass="e-flat e-primary e-outline" [isToggle]="true" (click)='btnClick($event)' content="Enable Floating"></button>
        </div>
    </div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('defaultLayout') dashboard?: DashboardLayoutComponent;
    @ViewChild('toggleBtn') toggleBtn?: ButtonComponent;
    public cellSpacing: any = [10, 10];
    public allowFloating: boolean = false;
    public cellAspectRatio: number = 100 / 75;
    public 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>' }
    ];

    btnClick(args: any) {
        if (this.toggleBtn?.content == "Disable Floating and Reset") {
            this.toggleBtn!.content = 'Enable Floating';
            this.dashboard!.allowFloating = false;
            this.dashboard!.panels = this.panels;
        } else {
            this.toggleBtn!.content = 'Disable Floating and Reset';
            this.dashboard!.allowFloating = true;
        }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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