The template of DashboardLayout

[Franky Lee]

Hi,

I see the example (https://ej2.syncfusion.com/vue/documentation/dashboard-layout/setting-size-of-cells/)

and would like to replace the content by template.

This is my code

<template>
    <div class="control-section">
        <!--  DashboardLayout element declaration -->
        <ejs-dashboardlayout id='dashboard_layout' :cellSpacing='cellSpacing' :showGridLines='showGridLines' :columns="5">
            <e-panels>
                <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="#templateTest"</e-panel>
                <e-panel :sizeX="1" :sizeY="1" :row="2" :col="2" content="<div class='content'>3</div>"></e-panel>
                <e-panel :sizeX="1" :sizeY="1" :row="2" :col="3" content="<div class='content'>4</div>"></e-panel>  
            </e-panels>
        </ejs-dashboardlayout>
        <!-- end of dashboardlayout element -->

        <div id="templateText" style="display: none">

          <ejs-check label="test" :checked="true">

        </div>

    </div>
</template>

<script>
import Vue from "vue";
// Import syncfusion dashboardlayout component from layouts package
import { DashboardLayoutPlugin } from "@syncfusion/ej2-vue-layouts";

Vue.use(DashboardLayoutPlugin);

export default {
    data: function() {
        return {
            cellSpacing: [10, 10],
            showGridLines: true,
        };
    }
}
</script>

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

/* DashboardLayout element styles  */
#dashboard_layout .e-panel .e-panel-container .content {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    line-height: 100px;
}
</style>

But it doesn't work.

Is the construction of content from the dashboard -layout  correct?

Thanks

Franky

[Sowmiya Padmanaban]

Hi Franky Lee,  

 

Greetings from Syncfusion support 

 

We have checked your requirement with DashboardLayout (Template in content of DashboardLayout panels). 

 

Please, refer the following links to know how to give template content for DashboardLayout component. 

 

https://ej2.syncfusion.com/vue/documentation/dashboard-layout/panels/setting-header-of-panels/#placing-components-as-content-of-panels 

 

https://ej2.syncfusion.com/vue/demos/#/material/dashboard-layout/dynamic.html 

 

Please, refer to the below links to know more about the DashboardLayout component. 

 

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

 

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

 

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

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Franky Lee]

Hi Sowmiya

Thanks for your reply.

I know we can use the vue template and Vue.component() to replace the content.

I would like to ask that the method can be used from the splitter.

https://ej2.syncfusion.com/vue/documentation/splitter/pane-content/    #Pane content using selector

Can the method be work in dashboardlayout?

Thanks again

Franky 

[Muthukrishnan Kandasamy]

 

Hi Franky, 

 

Sorry for the inconvenience. 

 

We have validated and confirmed your reported problem as bug in Vue Dashboard Layout component. We’ll include the fix for this issue in our upcoming volume 4 release of 2020 which is expected to be rolled out by the end of December 2020. 

 

You can track the following feedback portal link to know the status of this bug. 

 

https://www.syncfusion.com/feedback/19527/syncfusion-components-were-not-rendered-in-dashboard-layout-while-using-selector 

 

We appreciate your patience. 

 

Regards, 

Muthukrishnan K 

[Franky Lee]

Hi,

Thanks for your help.

I have one more question.

In this example(https://ej2.syncfusion.com/vue/documentation/dashboard-layout/panels/add-remove-panels/),

the panel can be added or removed.

I would like to make the panel read-only or be hidden.

Is there any method?

Thanks again.

Franky

[Sowmiya Padmanaban]

Hi Franky Lee,  

 

We don’t have any built-in method to set the panel as read-only mode. To achieve your requirement, we suggest to set the pointer-events as none for panels of DashboardLayout component, this CSS style will prevent the user interaction in all the panels of Dashboard Layout. Please, refer the below code snippet. 

 

<style> 

      #edit_dashboard .e-panel { 

        pointer-events: none; 

      } 

    </style> 

 

Similarly, if you want to apply this solution for any particular panel of DashboardLayout, then you can add these style for the particular panel using its ID selector. All the DashboardLayout panels will have unique ID field. 

 

Please, refer the sample link below. 

 

https://codesandbox.io/s/vue-dashboard-chart-button-refresh-forked-2528y?file=/src/components/Dashboard.vue 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Franky Lee]

Hi, 

Thank you so much for responding.

But there also occur a warning about the DashboardLayout 

A message "templateFn is not a function" appears in console.

How can I fix it 

Thanks again

Franky

[Sowmiya Padmanaban]

Hi Franky Lee, 

 

Sorry, we did not face any error and warning messages in the console window in our last shared sample.  

 

Please, refer the below video footage. 

 

Video footage: https://www.syncfusion.com/downloads/support/forum/159402/ze/Dashboard_warning-592596504.zip 

 

Sample link : https://www.syncfusion.com/downloads/support/forum/159402/ze/DashboardLayout1770975323.zip 

 

Could you please share us more details regarding your problem with DashboardLayout component. 

 

1.     Share us the issue replicating video footage. 

2.     If possible, replicate the problem in attached sample. 

3.     Share us the definition code for DashboardLayout component. 

4.     Share us the Package.json file used in your application. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Keerthana Rajendran]

Hi Franky, 

 

We are glad to announce that our Essential Studio 2020 Volume 4 release v18.4.0.30  is rolled out and is available for download under the following link. 

 

https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download 

 

The issue “Syncfusion components are not rendered while using selector” has been fixed and included with this release. Please upgrade your package to latest version (18.4.0.30) to resolve the issue. 

 

Sample: https://codesandbox.io/s/vue-dashboard-template-forked-jxd0b 

 

Feedback link: https://www.syncfusion.com/feedback/19527/syncfusion-components-were-not-rendered-in-dashboard-layout-while-using-selector  

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

 

Regards,            

Keerthana.