Moving panels in JavaScript 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.

// 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/34.1.29/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.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>

Refer to the JavaScript Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore our JavaScript Dashboard Layout example to knows how to present and manipulate data.