HelpBot Assistant

How can I help you?

Resizing of panels in Vue Dashboard Layout component

5 Mar 202615 minutes to read

The Dashboard Layout component provides panel resizing functionality, which can be enabled or disabled using the allowResizing property. This functionality allows panels to be resized through UI interactions using resizing handlers that control resizing in various directions.

By default, panels can be resized only in the south-east direction. Panels can also be resized in east, west, north, south, and south-west directions by specifying the required directions with theresizableHandles property.

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

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

The following sample demonstrates enabling and disabling panel resizing in different directions.

<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/material3.css";
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.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/material3.css";
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.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

Dashboard Layout panels can also be resized programmatically using the 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.

<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/material3.css";
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.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/material3.css";
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.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>

Refer to the Vue Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore the Vue Dashboard Layout example to learn how to present and manipulate data.