Moving panels in EJ2 JavaScript Dashboard Layout control

6 Mar 20255 minutes to read

Aside from 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:

   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(Programatically or through UI interaction), the Dashboard Layout’s change event will be triggered.

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

// initialize Dashboard Layout control
var dashboard = new ej.layouts.DashboardLayout({
    cellSpacing: [10, 10],
    //Dashboard Layout's created event
    created: onCreated,
    //Dashboard Layout's change event
    change: onChange,
    columns: 5,
    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) {
    // movePanel("id", row, col)
    this.movePanel("layout_0", 1, 0);
}

//Dashboard Layout's change event function
function onChange(args) {
    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/31.2.12/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="container">
        <!--element which is going to render the Dashboard Layout-->
        <div id="dashboard_layout"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
    <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>
</body>

</html>

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