HelpBot Assistant

How can I help you?

Responsive adaptive in EJ2 TypeScript Dashboard Layout control

5 Mar 20265 minutes to read

The Dashboard Layout includes built-in responsive support, allowing panels to adjust to their parent element’s dimensions across resolutions and removing the need to implement custom responsive logic.

The Dashboard Layout is designed to automatically adapt to lower resolutions by transforming the entire layout into a stacked configuration so that the panels are displayed in a vertical column. By default, whenever the screen resolution is 600px or lower, this layout transformation occurs. This transformation can be modified for any user-defined resolution by setting the mediaQuery property of the control.

The following sample demonstrates the use of the mediaQuery property to convert the layout into a stacked one at a user-defined resolution. In this example, the layout becomes stacked when the window width is 700px or less.

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

// initialize Dashboard Layout control
let dashboard: DashboardLayout = new DashboardLayout({
    cellSpacing: [20, 20],
    mediaQuery: 'max-width: 700px',
    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_default');
<!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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/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>
<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_default"></div>
    </div>
    <style>
        #container {
            margin: 0 auto;
            width: 500px;
        }

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

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