Floating of panels in Angular Dashboard layout component

1 Oct 20254 minutes to read

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

This behavior can be 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));

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