Moving panels in TypeScript Dashboard Layout control

18 Nov 20185 minutes to read

Panels can be moved programmatically in the Dashboard Layout in addition to drag-and-drop. Use the DashboardLayout instance method movePanel as shown below:

   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 is triggered.

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

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

// initialize Dashboard Layout control
let dashboard: DashboardLayout = new DashboardLayout({
    cellSpacing: [10, 10],
    columns: 5,
    //Dashboard Layout's created event
    created: onCreated,
    //Dashboard Layout's change event
    change: onChange,
    panels: [{ '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>' }]
});
// render initialized Dashboard Layout
dashboard.appendTo('#dashboard_layout');

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

//Dashboard Layout's change event function
function onChange(args: any) {
    console.log("Change event triggered");
}
<!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/34.1.29/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/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>
</head>

<body>
    <div id='container'>
        <!--element which is going to render the Dashboard Layout-->
        <div id="dashboard_layout"></div>
    </div>
    <style>
        #container {
            margin: 0 auto;
            width: 500px;
        }

        #dashboard_layout .e-panel .e-panel-container .content {
            vertical-align: middle;
            font-weight: 600;
            font-size: 20px;
            text-align: center;
            line-height: 90px;
        }

        #dashboard_layout .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.