how to convert the class based component of dashboardlayout component to hooks?

[Naman Aggarwal]

Hello there.

I am creating a dashboard where we can drag and resize widgets using your api. Now th problem is that I am unable to implement it using hooks. Like from where is dashboardObj, addpanel and removePanel etc. are coming from.

Can you please help me out.

[Sowmiya Padmanaban]

Hi Naman Aggarwal,  

 

Greetings from Syncfusion support. 

 

Based on your shared details, we suspect that you are expecting the functional component in react platform using react hooks. For your reference, we have render the DashboardLayout component as a functional component.  

 

Refer the below code snippet. 

 

function App() { 

  function onclick() { 

    alert("event triggered"); 

  } 

  function pieTemplate(args) { 

    return ( 

      <div> 

        <ButtonComponent onClick={onclick}>Decrement</ButtonComponent> 

      </div> 

    ); 

  } 

  return ( 

    <div className="App"> 

      <DashboardLayoutComponent 

        id="edit_dashboard" 

        columns={6} 

        allowResizing={true} 

        allowDragging={true} 

      > 

        <PanelsDirective> 

          <PanelDirective 

            sizeX={3} 

            sizeY={2} 

            row={0} 

            col={0} 

            content={pieTemplate} 

            header="<div>Panel 1</div>" 

          /> 

        </PanelsDirective> 

      </DashboardLayoutComponent> 

    </div> 

  ); 

} 

 

Please, refer the below sample link. 

 

https://codesandbox.io/s/react-hooks-counter-demo-forked-9gb79 

 

Could you please ensure the above sample. If we misunderstood your requirement, could you please share more details for your requirement. . It will be help us to provide you the prompt solution. 

 

Please, refer the below links for DashboardLayout component. 

 

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

 

Demo link- https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default/ 

 

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

 

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

 

Regards,  

Sowmiya.P