DashboardLayoutComponent - Possible to use custom components in content and save/restore state

[Erick Stover]

Setup: Typescript, ReactJs via create-react-app and functional components.

I see how you can put your own components into the content property by way of a function. It would be nice to be able to somehow set them with the PanelModel[] way of doing things but mark that as a feature request for now.

What I'm trying to do at the moment is save the layout and restore it with the react components inside of the panels. It seems that every time I restore them, it clears it out and I just get 3 blank panels.

Any help here would be greatly appreciated!

Thanks!

Here is the code as it currently stands (still WIP so excuse some of the code, please):

const ManageAcceptance = () => {

const dashBoardRef = useRef<DashboardLayoutComponent>(null)!;

const renderComments = () => {

return (<span><NewComments />span>);

};

const handleChange = (event:ChangeEventArgs) => {

console.log("panels moved");

let savedState = dashBoardRef.current!.serialize();

console.log(savedState);

window.localStorage.setItem("dashboard", JSON.stringify(dashBoardRef.current!.serialize()));

};

const handleRestore = () => {

let savedState = window.localStorage.getItem("dashboard");

if (savedState != null) {

let panels = JSON.parse(savedState) as PanelModel[];

dashBoardRef.current!.panels = panels;

}

};

return (

<ErrorBoundary>

<Container fluid={true}>

<Row>

<Col>

<DashboardLayoutComponent

id="manageLayout"

cellSpacing={[10, 10]}

allowResizing={true}

allowDragging={true}

columns={5}

change={handleChange}

created={handleRestore}

ref={dashBoardRef}

>

<PanelsDirective>

<PanelDirective sizeX={3} sizeY={2} row={0} col= {0} content={renderComments} />

<PanelDirective sizeX={2} sizeY={2} row={0} col= {3} content="

Sent quotes

" />

<PanelDirective sizeX={5} sizeY={1} row={2} col= {0} content="

Rejected quotes

" />

PanelsDirective>

DashboardLayoutComponent>

Col>

Row>

Container>

ErrorBoundary>

);

};

export default ManageAcceptance;

AND IN ANOTHER FILE:

import React from 'react'

type Props = {}

const NewComments = (props: Props) => {

  return (

    <div>This is my new comments component</div>

  )

}

export default NewComments;

[Erick Stover]

So I did some experimenting and I tried adding a JSX.Element to the comment type in the interface file for PanelModel (in the node_modules folder) and it didn't seem to want to work. THEN, I set it as an any field and it all worked just fine. I was able to restore the data with the components intact with only a slight amount of tweaking.

It shows that components could be supplied with minimal effort but as it stands, it's not a deploy-able solution to my task.

Hoping someone can give me a less hacky way of solving this.

[Sivakumar ShunmugaSundaram]

Hi Erick Stover,

Greetings from Syncfusion support.

We have validated your reported query in the dashboard Layout component. We have already documented state maintenance in the Dashboard Layout

the component in the below link.

https://ej2.syncfusion.com/react/documentation/dashboard-layout/state-maintenance/

To overcome the reported issue, we suggest you to set the panel contents manually. Refer to the below code.

[index.js],

 

onSave(args) {

    var dashboard = document.getElementById('defaultLayout').ej2_instances[0];

    this.restoreModel = dashboard.serialize();

    this.restoreModel[0].content = '<div class="content">0</div>';

    this.restoreModel[1].content = '<div class="content">1</div>';

    this.restoreModel[2].content = '<div class="content">2</div>';

    this.restoreModel[3].content = '<div class="content">3</div>';

    this.restoreModel[4].content = '<div class="content">4</div>';

    this.restoreModel[5].content = '<div class="content">5</div>';

    this.restoreModel[6].content = '<div class="content">6</div>';

  }

 

Sample: https://stackblitz.com/edit/react-rp2u8z?file=index.js

Please check the attached sample for reference and get back to us if you need any further assistance.

Regards,

Sivakumar S