Search results

Floating Panels in Angular Dashboard Layout component

20 Apr 2021 / 2 minutes to read

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 DashboardLayout component.

Source
Preview
app.component.ts
app.template.html
app.module.ts
main.ts
default-style.css
Copied to clipboard
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { DashboardLayoutComponent } from '@syncfusion/ej2-angular-layouts';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
    selector: 'app-root',
    styleUrls: ['app/default-style.css'],
    templateUrl: 'app/app.template.html',
    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() {
        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;
        }
    }
}
Copied to clipboard
<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>
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the DashboardLayoutModule for the Dashboard Layout component
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    //declaration of ej2-angular-layouts module into NgModule
    imports: [BrowserModule, DashboardLayoutModule, ButtonModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
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;
    margin-left: 15px;
    padding: 15px;
    position: absolute;
  }
  
  .inline {
    display: inline-block;
  }
  
  div#control {
    width: 500px;
  }