Resizing of panels in Vue Dashboard Layout component

21 Feb 202515 minutes to read

The Dashboard Layout component is also provided with the panel resizing functionality which can be enabled or disabled using the allowResizing property. This functionality allows you to resize the panels dynamically through UI interactions using the resizing handlers which controls the panel resizing in various directions.

Initially, the panels can be resized only in south-east direction. However, panels can also be resized in east, west, north, south and south-west directions by defining the required directions with the resizableHandles property.

On resizing a panel in Dashboard Layout the following events will be triggered,

resizeStart - Triggers when panel resize starts
resize - Triggers when panel is being resized
resizeStop - Triggers when panel resize stops

The following sample demonstrates how to enable and disable the resizing of panels in the Dashboard Layout component in different directions.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-section">
    <ejs-dashboardlayout id='dashboard_default' ref="dashboard" :cellSpacing='cellSpacing' :allowResizing='true'
      :resizableHandles='resizableHandles' :columns="7" :resizeStart="onResizeStart" :resize="onResize"
      :resizeStop="onResizeStop">
      <e-panels>
        <e-panel :sizeX="1" :sizeY="1" :row="0" :col="0" content="<div class='content'>0</div>"></e-panel>
        <e-panel :sizeX="3" :sizeY="2" :row="0" :col="1" content="<div class='content'>1</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="3" :row="0" :col="4" content="<div class='content'>2</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="1" :col="0" content="<div class='content'>3</div>"></e-panel>
        <e-panel :sizeX="2" :sizeY="1" :row="2" :col="0" content="<div class='content'>4</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>5</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>6</div>"></e-panel>
      </e-panels>
    </ejs-dashboardlayout>
  </div>
</template>

<script setup>

  // Import syncfusion Dashboard Layout component from layouts package
  import { DashboardLayoutComponent as EjsDashboardlayout, PanelDirective as EPanel, PanelsDirective as EPanels } from "@syncfusion/ej2-vue-layouts";

  const cellSpacing = [10, 10];
  const resizableHandles = ['e-south-east', 'e-east', 'e-west', 'e-north', 'e-south'];
  //Dashboard Layout's resizestart event function
  const onResizeStart = function () {
    console.log("Resize Start");
  };
  //Dashboard Layout's resize event function
  const onResize = function () {
    console.log("Resizing");
  };
  //Dashboard Layout's resizestop event function
  const onResizeStop = function () {
    console.log("Resize Stop")
  };
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";

  /* Dashboard Layout component styles  */
  #dashboard_default .e-panel .e-panel-container .content {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 80px;
  }

  #dashboard_default .e-panel {
    transition: none !important;
  }
</style>
<template>
  <div class="control-section">
    <ejs-dashboardlayout id='dashboard_default' ref="dashboard" :cellSpacing='cellSpacing' :allowResizing='true'
      :resizableHandles='resizableHandles' :columns="7" :resizeStart="onResizeStart" :resize="onResize"
      :resizeStop="onResizeStop">
      <e-panels>
        <e-panel :sizeX="1" :sizeY="1" :row="0" :col="0" content="<div class='content'>0</div>"></e-panel>
        <e-panel :sizeX="3" :sizeY="2" :row="0" :col="1" content="<div class='content'>1</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="3" :row="0" :col="4" content="<div class='content'>2</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="1" :col="0" content="<div class='content'>3</div>"></e-panel>
        <e-panel :sizeX="2" :sizeY="1" :row="2" :col="0" content="<div class='content'>4</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>5</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>6</div>"></e-panel>
      </e-panels>
    </ejs-dashboardlayout>
  </div>
</template>

<script>

  // Import syncfusion Dashboard Layout component from layouts package
  import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from "@syncfusion/ej2-vue-layouts";

  export default {
    name: "App",
    components: {
      "ejs-dashboardlayout": DashboardLayoutComponent,
      "e-panels": PanelsDirective,
      "e-panel": PanelDirective
    },

    data: function () {
      return {
        cellSpacing: [10, 10],
        resizableHandles: ['e-south-east', 'e-east', 'e-west', 'e-north', 'e-south'],
      };
    },
    methods: {
      //Dashboard Layout's resizestart event function
      onResizeStart: function () {
        console.log("Resize Start");
      },
      //Dashboard Layout's resize event function
      onResize: function () {
        console.log("Resizing");
      },
      //Dashboard Layout's resizestop event function
      onResizeStop: function () {
        console.log("Resize Stop")
      }
    }
  }
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";

  /* Dashboard Layout component styles  */
  #dashboard_default .e-panel .e-panel-container .content {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 80px;
  }

  #dashboard_default .e-panel {
    transition: none !important;
  }
</style>

Resizing panels programmatically

The Dashboard Layout panels can also be resized programmatically by using resizePanel method. The method is invoked as follows,

resizePanel(id, sizeX, sizeY)

Where,

id - ID of the panel which needs to be resized.
sizeX - New panel width in cells count for resizing the panel.
sizeY - New panel height in cells count for resizing the panel.

The following sample demonstrates resizing panels programmatically in the Dashboard Layout’s created event.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-section">
    <ejs-dashboardlayout id='dashboard_default' ref="dashboard" :cellSpacing='cellSpacing' :columns="7"
      :created="onCreated">
      <e-panels>
        <e-panel :sizeX="1" :sizeY="1" :row="0" :col="0" content="<div class='content'>0</div>"></e-panel>
        <e-panel :sizeX="3" :sizeY="2" :row="0" :col="1" content="<div class='content'>1</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="3" :row="0" :col="4" content="<div class='content'>2</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="1" :col="0" content="<div class='content'>3</div>"></e-panel>
        <e-panel :sizeX="2" :sizeY="1" :row="2" :col="0" content="<div class='content'>4</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>5</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>6</div>"></e-panel>
      </e-panels>
    </ejs-dashboardlayout>
  </div>
</template>

<script setup>

  // Import syncfusion Dashboard Layout component from layouts package
  import { DashboardLayoutComponent as EjsDashboardlayout, PanelDirective as EPanel, PanelsDirective as EPanels } from "@syncfusion/ej2-vue-layouts";
  import { ref } from 'vue';

  const cellSpacing = [10, 10];
  const dashboard = ref(null);
  //Dashboard Layout's create event function
  const onCreated = () => {
    // resizePanel("id", sizeX, sizeY)
    dashboard.value.$el.ej2_instances[0].resizePanel("layout_4", 1, 1);
    dashboard.value.$el.ej2_instances[0].resizePanel("layout_5", 2, 1);
  };
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";

  /* Dashboard Layout component styles  */
  #dashboard_default .e-panel .e-panel-container .content {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 80px;
  }

  #dashboard_default .e-panel {
    transition: none !important;
  }
</style>
<template>
  <div class="control-section">
    <ejs-dashboardlayout id='dashboard_default' ref="dashboard" :cellSpacing='cellSpacing' :columns="7"
      :created="onCreated">
      <e-panels>
        <e-panel :sizeX="1" :sizeY="1" :row="0" :col="0" content="<div class='content'>0</div>"></e-panel>
        <e-panel :sizeX="3" :sizeY="2" :row="0" :col="1" content="<div class='content'>1</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="3" :row="0" :col="4" content="<div class='content'>2</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="1" :col="0" content="<div class='content'>3</div>"></e-panel>
        <e-panel :sizeX="2" :sizeY="1" :row="2" :col="0" content="<div class='content'>4</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>5</div>"></e-panel>
        <e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>6</div>"></e-panel>
      </e-panels>
    </ejs-dashboardlayout>
  </div>
</template>

<script>

  // Import syncfusion Dashboard Layout component from layouts package
  import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from "@syncfusion/ej2-vue-layouts";

  export default {
    name: "App",
    components: {
      "ejs-dashboardlayout": DashboardLayoutComponent,
      "e-panels": PanelsDirective,
      "e-panel": PanelDirective
    },

    data: function () {
      return {
        cellSpacing: [10, 10]
      };
    },
    methods: {
      //Dashboard Layout's create event function
      onCreated: function () {
        // resizePanel("id", sizeX, sizeY)
        this.$refs.dashboard.$el.ej2_instances[0].resizePanel("layout_4", 1, 1);
        this.$refs.dashboard.$el.ej2_instances[0].resizePanel("layout_5", 2, 1);
      },
    }
  }
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";

  /* Dashboard Layout component styles  */
  #dashboard_default .e-panel .e-panel-container .content {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 80px;
  }

  #dashboard_default .e-panel {
    transition: none !important;
  }
</style>

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