Search results

Moving Panels in Angular Dashboard Layout component

22 Jul 2021 / 2 minutes to read

Other than drag and drop, it is possible to move the panels in Dashboard Layout programmatically. This can be achieved using movePanel method. The method is invoked as follows,

Copied to clipboard
movePanel(id, row, col)

Where,

  • id - ID of the panel which needs to be moved.
  • row - New row position for moving the panel.
  • col - New column position for moving the panel.

Each time a panel’s position is changed(Programmatically or through UI interaction), the Dashboard Layout’s change event will be triggered.

The following sample demonstrates moving a panel programmatically to a new position in the Dashboard Layout’s created event.

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

@Component({
selector: 'app-root',
styleUrls: ['app/default-style.css'],
templateUrl: 'app/app.template.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild('defaultLayout') dashboardLayout: DashboardLayoutComponent;
public cellSpacing: number[] = [10, 10];
public columns: number = 5;
public panels: any = [
{'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, content:'<div class="content">0</div>'},
{'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 1, content:'<div class="content">1</div>'},
{'sizeX': 1, 'sizeY': 3, 'row': 0, 'col': 4, content:'<div class="content">2</div>'},
{'sizeX': 1, 'sizeY': 1, 'row': 1, 'col': 0, content:'<div class="content">3</div>'},
{'sizeX': 2, 'sizeY': 1, 'row': 2, 'col': 0, content:'<div class="content">4</div>'},
{'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 2, content:'<div class="content">5</div>'},
{'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 3, content:'<div class="content">6</div>'},
];

//Dashboard Layout's created event function
onCreated(args: any) {
   // movePanel("id", row, col)
    this.dashboardLayout.movePanel("layout_0", 1, 0);

}
//Dashboard Layout's change event function
onChange(args: any) {
    console.log("Change event triggered");
}

}
Copied to clipboard
<div class="control-section">
    <ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]='columns' [cellSpacing]='cellSpacing' [panels]='panels' 
    (created)="onCreated($this)" (change)="onChange($this)">
    </ejs-dashboardlayout>
</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 { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    //declaration of ej2-angular-layouts module into NgModule
    imports: [BrowserModule, DashboardLayoutModule],
    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
.control-section {
    margin: 0 auto;
    width: 500px;
}

#defaultLayout {
    padding: 10px;
}

#defaultLayout .e-panel .e-panel-container {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
}

.content{
    line-height: 90px;
}