Moving panels in Vue Dashboard Layout component

18 Nov 20187 minutes to read

Other than drag and drop, it is possible to move the panels in Dashboard Layout programmatically. This can be achieved using the movePanel method. The method is invoked as follows,

movePanel(id, row, col)

where,

  • id - ID of the panel which needs to be moved.
  • row - New row position for moving the panel.
  • col - New column position for moving the panel.

Each time a panel’s position is changed (programmatically or through UI interaction), the Dashboard Layout’s change event will be triggered.

The following sample demonstrates moving a panel programmatically to a new position in the Dashboard Layout’s created event.

<template>
  <div class="control-section">
    <ejs-dashboardlayout id='dashboard_layout' ref="dashboard" :columns="7" :cellSpacing='cellSpacing'
      :created="onCreated" :change="onChange">
      <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 dashboard = ref(null)
  const cellSpacing = [10, 10];
  
  const onCreated = () => {
    // movePanel("id", row, col)
    dashboard.value.$el.ej2_instances[0].movePanel("layout_0", 1, 0);
  };
  //Dashboard Layout's change event function
  const onChange = () => {
    console.log("Change event Triggered");
  };
  
</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_layout .e-panel .e-panel-content {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 80px;
  }
  
  #dashboard_layout .e-panel {
    transition: none !important;
  }
</style>
<template>
  <div class="control-section">
    <!--  Dashboard Layout component declaration -->
    <ejs-dashboardlayout id='dashboard_layout' ref="dashboard" :columns="7" :cellSpacing='cellSpacing'
      :created="onCreated" :change="onChange">
      <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>
    <!-- end of Dashboard Layout component -->
  </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: {
      onCreated: function () {
        // movePanel("id", row, col)
        this.$refs.dashboard.$el.ej2_instances[0].movePanel("layout_0", 1, 0);
      },
      //Dashboard Layout's change event function
      onChange: function () {
        console.log("Change event Triggered");
      },
    }
  }
</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_layout .e-panel .e-panel-content {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 80px;
  }
  
  #dashboard_layout .e-panel {
    transition: none !important;
  }
</style>

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