Search results

Adding or Removing Panels in JavaScript (ES5) Dashboard Layout control

In real-time cases, the data being presented within the dashboard need to be updated frequently which includes adding or removing the data dynamically within the dashboard. This can be easily achieved by using the addPanel and removePanel public methods of the component.

Add or remove panels dynamically

Panels can be added dynamically by using the addPanel public method by passing the panel property as parameter. Also, they can be removed dynamically by using the removePanel public method by simply passing the panel id value as a parameter.

It is also possible to remove all the panels in a Dashboard Layout by calling removeAll method.

dashboard.removeAll();

The following sample demonstrates how to add and remove the panels dynamically in the dashboard layout component. Here, panels can be added in any desired position of required size by selecting them in the numeric boxes and clicking add button and remove them by selecting the id of the panel. .

Source
Preview
index.js
index.html
index.css
// initialize dashboardlayout component
var dashboard  = new ej.layouts.DashboardLayout({
    cellSpacing: [10, 10],
    columns: 5,
    panels: [{'id':'Panel0', 'sizeX': 1, 'sizeY': 1,'row': 0, 'col': 0, content:'<div class="content">0</div>'},
    {'id':'Panel1', 'sizeX': 3, 'sizeY': 2,'row': 0, 'col': 1, content:'<div class="content">1</div>'},
    {'id':'Panel2', 'sizeX': 1, 'sizeY': 3,'row': 0, 'col': 4, content:'<div class="content">2</div>'},
    {'id':'Panel3', 'sizeX': 1, 'sizeY': 1,'row': 1, 'col': 0, content:'<div class="content">3</div>'},
    {'id':'Panel4', 'sizeX': 2, 'sizeY': 1,'row': 2, 'col': 0, content:'<div class="content">4</div>'},
    {'id':'Panel5', 'sizeX': 1, 'sizeY': 1,'row': 2, 'col': 2, content:'<div class="content">5</div>'},
    {'id':'Panel6','sizeX': 1, 'sizeY': 1,'row': 2, 'col': 3, content:'<div class="content">6</div>'}
    ]
});
// render initialized dashboardlayout
dashboard.appendTo('#dashboard_layout');

var count = 7;
var data = ["Panel0", "Panel1", "Panel2", "Panel3", "Panel4", "Panel5", "Panel6"];
var sizeX  = new ej.inputs.NumericTextBox ({
    placeholder: 'Ex: 1',
    floatLabelType: 'Never',
    value: 1,
    min:1,
    max: 5
});

sizeX.appendTo('#sizex');

var idValue = new ej.dropdowns.DropDownList ({
    dataSource: data
});
idValue.appendTo("#value");

var sizeY  = new ej.inputs.NumericTextBox ({
    //set the data to dataSource property
    placeholder: 'Ex: 1',
    floatLabelType: 'Never',
    value: 1,
    min:1,
    max: 5
});

sizeY.appendTo('#sizey');

var row  = new ej.inputs.NumericTextBox ({
    //set the data to dataSource property
    placeholder: 'Ex: 1',
    floatLabelType: 'Never',
    value: 0,
    min:0,
    max: 5
});

row.appendTo('#row');

var column  = new ej.inputs.NumericTextBox ({
    //set the data to dataSource property
    placeholder: 'Ex: 1',
    floatLabelType: 'Never',
    value: 0,
    min:0,
    max: 4
});

column.appendTo('#column');

 document.getElementById('add').onclick = function() {
     var panel = {
         id: "Panel"+ count.toString(),
         sizeX: sizeX.value,
         sizeY: sizeY.value,
         row: row.value,
         col: column.value,
         content: "<div class='content'>"+ count +"</div>"
     }
     dashboard.addPanel(panel);
     count = count + 1;
     (idValue.dataSource).push(panel.id);
     idValue.refresh();
 };

 document.getElementById('remove').onclick = function() {
     dashboard.removePanel(idValue.value.toString());
     (idValue.dataSource).splice((idValue.dataSource).indexOf(idValue.value.toString()), 1);
     idValue.refresh();
     idValue.value = null;
 }
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DashboardLayout </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 DashboardLayout Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div class="inline" id="control">
            <div id="dashboard_layout"></div>
        </div>
        <div class="inline" id="properties">
            <table>
                <tbody><tr>
                    <td>SizeX</td>
                    <td> <input id="sizex"></td>
                </tr>
                <tr>
                    <td>SizeX</td>
                    <td> <input id="sizey"></td>
                </tr>
                <tr>
                    <td>Row</td>
                    <td> <input id="row"></td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td> <input id="column"></td>
                </tr>
                <tr>
                    <td> </td>
                    <td>
                        <button id="add" class="e-btn e-flat e-outline">Add</button>
                    </td>
                </tr>
            </tbody></table>
            <table>
                <tbody><tr>
                    <td>Id</td>
                    <td> <input id="value"></td>
                </tr>
                <tr>
                    <td> </td>
                    <td>
                        <button id="remove" class="e-btn e-flat e-danger">Remove</button>
                    </td>
                </tr>
            </tbody></table>
        </div>
    </div>
    


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  margin: 0 auto;
  width: 800px;
}

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

td{
  padding: 5px;
}

div#properties {
  width: 205px;
  margin-left: 15px;
  border: 1px solid black;
  padding: 15px;
  position: absolute;
}

.inline {
  display: inline-block;
}

div#control {
  width: 500px;
}

#resize{
  margin-left: 40%;
}