We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Content of the panel

Thread ID:

Created:

Updated:

Platform:

Replies:

143917 Apr 10,2019 12:12 PM UTC Apr 3,2020 12:53 PM UTC Angular - EJ 2 9
loading
Tags: DashboardLayout
Grzegorz Golen
Asked On April 10, 2019 12:12 PM UTC

Hi, in my project with Syncfusion I try to use Dashboard Layout.
I would like to ask about this component. Does the content of the panel have any limitations? Is it possible to insert for example grid with remote data from the server?

 

Kind regards, 


Ashokkumar Balasubramanian [Syncfusion]
Replied On April 11, 2019 06:45 AM UTC

Hi Grzegorz, 
 
Greetings from Syncfusion support. 
 
There are no limitations for having any content inside the panels of Dashboard Layout component. We have prepared a simple application of Dashboard Layout with Grid control having the data source from the remote server. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Grzegorz Golen
Replied On April 11, 2019 12:42 PM UTC

Dear Ashokkumar, 

Thank you for your explanation. I still have a follow-up question. Is it possible to refer to another component in the 'content' element of the panel? As in the dialog element, you can indicate a different component using the selector. For example:

<ejs-dialog #devicesDialog class="devices" *ngIf="selectedDeviceGenusId && selectedDeviceTypeId" [visible]='false' [target]='targetElement'
   
allowDragging='true' width='1100px' height='800px' [position]='position' [closeOnEscape]='closeOnEscape'>
    <mpt-devices
[selectedDeviceGenusId]="selectedDeviceGenusIdShare" [selectedDeviceTypeId]="selectedDeviceTypeIdShare"

        (zmfObjectEvent)="receiveZmfObject($event)"></mpt-devices>
</ejs-dialog>


Ashokkumar Balasubramanian [Syncfusion]
Replied On April 12, 2019 09:37 AM UTC

Hi Grzegorz, 
 
Yes, we can render another component of your project inside the panel of the Dashboard Layout component. Please check out the below sample in which we have rendered another component (Grid Component) of the application into an app component. 
 
 
Please let us know, if you have any concerns on this. 
 
Regards, 
Ashokkumar B. 


Grzegorz Golen
Replied On April 26, 2019 08:41 AM UTC

Thank you for your response again. I still have a further question for the dashboard layout component. In my project I want to add and remove panels dynamically. How to implement the panel adding functionality? I have a request to provide an example of a valid 'content' element as in the example below.

 

My example (incorrect):

 

public addNewPanelInfoWaiting() {
   
let panel: PanelModel[] = [{
       
'id': 'InfoWaiting', 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0,
       
content: '<mpt-info-waiting (deletePanelEvent)=this.deletePanelEventInfoWaiting($event)></mpt-info-waiting>'

   
}];
    this
.dashboard.addPanel(panel[0]);
}

 

deletePanelEvent is EventEmitter in other component.

 

deletePanelEventInfoWaiting:

public deletePanelEventInfoWaiting($event: MouseEventArgs): void {
   
this.dashboard.removePanel('infoWaiting');
}

 

 

An example from the documentation:
    addClick() {
        this.panel = {
        id: "Panel"+ this.count.toString(),
        sizeX: this.sizeX.value,
        sizeY: this.sizeY.value,
        row: this.row.value,
        col: this.column.value,
        content: "<div class='content'>"+ this.count +"</div>"
        }
        this.dashboard.addPanel(this.panel);
        this.count = this.count + 1;
        (<any>this.dropDownListObject.dataSource).push(this.panel.id);
        this.dropDownListObject.refresh();
    };

Ashokkumar Balasubramanian [Syncfusion]
Replied On April 26, 2019 12:57 PM UTC

Hi Grzegorz, 
 
Thank you for providing the code snippet. 
 
In that code block, you have tried to render the custom component dynamically through the content template. But, we cannot render a custom component dynamically through the content template. Because, as content property is string type, so we cannot able to parse as it directly renders it as an html element. 
 
For dynamically adding panels with components, you can directly specify the corresponding HTML elements specified in custom component. 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


Grzegorz Golen
Replied On April 29, 2019 01:19 PM UTC

Dear Ashokkumar 

Thank you for your answer. I have tried to implement the solution and this leads to another question:


Is the version of Syncfusion 17+ required by the previous example? Should I update other elements (such as grid) to have it working with dashboard?


Kind regards, 

Grzegorz 


Ashokkumar Balasubramanian [Syncfusion]
Replied On April 30, 2019 09:21 AM UTC

Hi Grzegorz, 
 
Yes, the version of Syncfusion 17+ is required for the above sample as we have included the DashBoardLayout control from 17.1.1 version. The other controls (such as grid) will work with previous versions in the dashboard. However, we recommend you update to the latest version for all the controls as it will include all the recent updates and fixes. 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


Dusan Aleksic
Replied On April 2, 2020 11:41 AM UTC

Hi Grzegorz, 
 
Thank you for providing the code snippet. 
 
In that code block, you have tried to render the custom component dynamically through the content template. But, we cannot render a custom component dynamically through the content template. Because, as content property is string type, so we cannot able to parse as it directly renders it as an html element. 
 
For dynamically adding panels with components, you can directly specify the corresponding HTML elements specified in custom component. 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


>For dynamically adding panels with components, you can directly specify the corresponding HTML elements specified in custom component. 


What does this mean? Do you have an example of how this would work?

Sowmiya Padmanaban [Syncfusion]
Replied On April 3, 2020 12:53 PM UTC

Hi Dusan, 
 
We have checked your query. We were meant to explain that you can directly place any other angular custom components of the application as panel content in the dashboard panels. 
 
Please, check out the following sample link in which we have rendered EJ2 Charts and card components, which were built as a separate component and then the we have loaded them into the Dashboard Layout panels as its container elements using ng-template directives.  
  
  
Please, let us know if you need any further assistance. 
 
Regards,  
Sowmiya.P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon