How do I get my own component inside DashboardLayout?

[Muhammad Farid bin Ahamat]

I have my own components that I would like to add to the DashboardLayout, but I don't get how to work with Syncfusion's controls via components.

Below is my code, you can see that I already imported my own component (TestComp3).

Next:

- How do I put this inside Syncfusion's DashboardLayoutComponent?

- What goes inside the DashboardLayoutComponent?

<template>

<div id="app">

<div style='width:300px; height:300px;'>

<!-- I would like to this component to sit inside the dashboard layout below -->

<TestComp3></TestComp3>

</div>

<DashboardLayoutComponent>

<!-- What goes here?? -->

</DashboardLayoutComponent>

</div>

</template>

<script>

import TestComp3 from './components/TestComp3.vue'

import { DashboardLayoutComponent } from "@syncfusion/ej2-vue-layouts";

export default {

name: 'App',

components: {

TestComp3,

DashboardLayoutComponent,

},

}

</script>

[Shalini Maragathavel]

Hi Muhammad, 

Greetings from Syncfusion support. 

                                                                                                                                         

Based on your query, we suspect that you need to import and render the custom component inside the Dashboard Layout. To achieve your requirement, we suggest you to import the component and render it as a tag in Dashboard Layout panel as demonstrated in the below code snippet. 

FileManager.vue 

<template> 

  <div> 

        <button v-on:click="click('custom component')">Custom button</button> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

export default Vue.extend({ 

  data: function () { 

    return {}; 

  }, 

</script> 

App.vue 

<template> 

  <div id="app"> 

        <ejs-dashboardlayout    id="defaultLayout"  :cellSpacing="spacing"  :columns="6" > 

          <div   id="one"> 

            <div class="e-panel-container"> 

              <div class="text-align"> 

                <Button /> 

              </div> 

          <div id="three" class="e-panel"> 

            <div class="e-panel-container"> 

              <div class="text-align"> 

                <Button /> 

              </div> 

            </div> 

          </div>           

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import Button from "./components/FileManager"; 

export default { 

  name: "App", 

  components: { 

    Button, 

  }, 

  data: function () { 

}; 

</script> 

Please find the below sample for your reference, 

Sample: https://codesandbox.io/s/vue-template-forked-6ip7h?file=/src/App.vue

Please refer the below links to know more about Dashboard Layout component. 

Documentation: https://ej2.syncfusion.com/vue/documentation/dashboard-layout/getting-started/ 

Demo: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/dashboard-layout/default.html 

API Link: https://ej2.syncfusion.com/vue/documentation/api/dashboard-layout/

Please get back to us if you need further assistance. 

Regards,   

Shalini M.