save the panel data in db

[RakhiS]

Hi,

Query1

Please let me know how I can save this data in database for the below link.

https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default

will it be saved in  json format and can dump in single column when any panel gets added or I added a graph into the panel and if say  i click on a button "save".

please help

Query2

Scenerio:

In my application, I want to show the configuration screen in which 

https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default this will be shown. Now user will add any graph in this panel by selecting from any left menu using drag and drop or using context menu which contains the graphs in menu and selecting it the grapg gets painted into the selected panel, once done the user will click on the below button "save" and this data will get save in  database. 

Please share a sample for this.

Thanks!!!

[Sowmiya Padmanaban]

Hi RakhiS,  

 

Greetings from Syncfusion support. 

 

We have checked your attached query. We suspect that your requirement is to save the panel position to the database. In DashboardLayout component, we have provided a serialize() method. Using this method, you can get the exact panel position properties ( SizeX, SizeY, Row, Col, Id ). You can save these details to the database. 

 

In DashboardLayout component, we have not updated header and content value in our component side. Because, the content may be vary (chart, grid). You can manually save the content based on your requirement. 

 

Refer the below code snippet. 

  GetDashboardValue(): void { 

      // you can get the panel position value. 

     var value = this.dashboard.serialize(); 

     console.log(value); 

    } 

Refer the below screenshot. 

 

 

 

For your reference, we have prepared a sample. 

https://stackblitz.com/edit/angular-s6nmhj?file=app.component.ts 

 

To know more about the serialize() method. Refer the below link. 

https://ej2.syncfusion.com/angular/documentation/dashboard-layout/save-restore/ 

 

Unfortunately we are unable to get your exact requirement with your provided information. If the provided solution does not met your requirement, then can you please share the detailed information regarding your requirement. It will helpful for us to resolve your issue at earliest. 

1.      Exact requirement. 

2.      Which data is passed in json format. 

 

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

 

 

Regards,  

Sowmiya.P 

 

 

[RakhiS]

Thanks,

Can you help me If I want to save a graph in panel 0 in db how it can be achieved.

[Sowmiya Padmanaban]

Hi RakhiS,  

  

We have forwarded your query to Chart team. we will update the details within 2 business days ( 6/3/2020). 

  

Regards, 

Sowmiya.P 

[Shameer Ali Baig Sulaiman Ali Baig]

Hi RakhiS,  

 

Thanks for your patience. 

 

We have analyzed your query on saving charts in DB. We would like to let you know that we can achieve your requirement by getting the dataURL using “AterExport” event in the chart and then save the dataURL in database as requested. We have also attached the code snippet for your reference. Please find the below code snippet and screenshot.  

  

Code Snippet:  

App.component.html:  

// add your additional code here  

<ejs-chart #chart (AfterExport)='afterExport($event)' ></ejs-chart>      

  

App.component.ts:  

// add your additional code here  

    public afterExport(args: IAfterExportEventArgs): void {  

        var dataURL = args.dataUrl;  

        var img = new Image;  

        img.src = dataURL;  

    };  

   

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

 

Regards,  

Shameer Ali Baig S.