Search results

Size and Position in React Dashboard Layout component

Panels are the basic building blocks of the dashboard layout component. They act as a container for the data to be visualized or presented. These panels can be positioned or resized for effective presentation of the data.

The following table represents all the available panel properties and the corresponding functionalities.

PanelObject Description
id Specifies the ID value of the panel.
row Specifies the row value in which the panel to be placed.
col Specifies the column value in which the panel to be placed.
sizeX Specifies the width of the panel in cells count.
sizeY Specifies the height of the panel in cells count.
minSizeX Specifies the minimum width of the panel in cells count.
minSizeY Specifies the minimum height of the panel in cells count.
maxSizeX Specifies the maximum width of the panel in cells count.
maxSizeY Specifies the maximum height of the panel in cells count.
header Specifies the header template of the panel.
content Specifies the content template of the panel.
cssClass Specifies the CSS class name that can be appended with each panel element.

Positioning of panels

The panels within the layout can be easily positioned or ordered using the row and col properties of the panels. Positioning of panels will be beneficial to represent the data in any desired order.

The following sample demonstrates the positioning of panels within the dashboard layout using the row and column properties of the panels.

Source
Preview
App.tsx
index.tsx
index.html
App.css
App.jsx
index.jsx
import {  DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';

export default class App extends React.Component<{}, {}> {
  private cellSpacing: number[] = [20, 20];
  private panels: object[] =   [
    { "row": 0, "col": 0, content:'<div class="content">1</div>' },
    { "row": 0, "col": 1, content:'<div class="content">2</div>' },
    { "row": 0, "col": 2, content:'<div class="content">3</div>' },
    { "row": 1, "col": 0, content:'<div class="content">4</div>' },
    { "row": 1, "col": 1, content:'<div class="content">5</div>' },
    { "row": 1, "col": 2, content:'<div class="content">6</div>' }
  ];

  public render() {
    return (
      <div>
     <div className="container">
        <DashboardLayoutComponent id='defaultLayout' cellSpacing={this.cellSpacing}  panels={this.panels} columns={3} />
      </div>
    </div>
    );
  }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Dashboard Layout Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="App.css">
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";

.container {
  margin: 0 auto;
  width: 500px;
}
#defaultLayout .e-panel .e-panel-content {
    text-align: center;
    line-height: 100px;
    font-weight: 600;
    font-size: 20px;
  }
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.cellSpacing = [20, 20];
        this.panels = [
            { "row": 0, "col": 0, content: '<div class="content">1</div>' },
            { "row": 0, "col": 1, content: '<div class="content">2</div>' },
            { "row": 0, "col": 2, content: '<div class="content">3</div>' },
            { "row": 1, "col": 0, content: '<div class="content">4</div>' },
            { "row": 1, "col": 1, content: '<div class="content">5</div>' },
            { "row": 1, "col": 2, content: '<div class="content">6</div>' }
        ];
    }
    render() {
        return (<div>
     <div className="container">
        <DashboardLayoutComponent id='defaultLayout' cellSpacing={this.cellSpacing} panels={this.panels} columns={3}/>
      </div>
    </div>);
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

Sizing of panels

A panel’s size can be varied easily by defining the sizeX and sizeY properties. The sizeX property defines the width and the sizeY property defines height of a panel in cells count. These properties are helpful in designing a dashboard, where the content of each panel may vary in size.

The following sample demonstrates the sizing of panels within the dashboard layout using the sizeX and sizeY properties of the panels.

Source
Preview
App.tsx
index.tsx
index.html
App.css
App.jsx
index.jsx
import {  DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';

export default class App extends React.Component<{}, {}> {
  private cellSpacing: number[] = [20, 20];
  private panels: object[] = [
    { "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>' }
  ];

  public render() {
    return (
      <div>
     <div className="control-section">
         <DashboardLayoutComponent id='defaultLayout' cellSpacing={this.cellSpacing}  panels={this.panels} columns={5} />
      </div>
    </div>
    );
  }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Dashboard Layout Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <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-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="App.css">
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>  
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";

#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;
}
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.cellSpacing = [20, 20];
        this.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() {
        return (<div>
     <div className="control-section">
         <DashboardLayoutComponent id='defaultLayout' cellSpacing={this.cellSpacing} panels={this.panels} columns={5}/>
      </div>
    </div>);
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));