Panels are adding one over the other

[RakhiS]

Hi,

I want to share a scenerio,

I have added a panel through the ADD PANEL button. And this panel is saving in database  by clicking on the save button inside the panel. When this gets added to the db, sizex,sizey,col,row value added with it. Now when  I am adding another panel it is adding behind of the first panel. I want to add next to the first panel or down of the first panel.

I hope you understand the scenerio. Please help to achieve this.

[Sowmiya Padmanaban]

Hi RakhiS,  

 

Greetings from Syncfusion support. 

 

We have checked your query with DashboardLayout component. Panels are added to the DashboardLayout based on the provided panel settings (SizeX, SizeY, Row, Column).  

 

If you want to add the panel below another panel, you need to change the panel settings of adding panel. 

 

Please, refer the below code snippet. 

 

 public panel_json = [ 

    { 

      sizeX: 1, 

      sizeY: 1, 

      row: 0, 

      col: 0, 

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

    }, 

    { 

      sizeX: 1, 

      sizeY: 1, 

      row: 1, 

      col: 0, 

      header: "<div>Panel 2</div>" 

    }, 

    { 

      sizeX: 1, 

      sizeY: 1, 

      row: 2, 

      col: 0, 

      header: "<div>Panel 3</div>" 

    } 

  ]; 

  

onAdd(): void { 

    let panel: PanelModel[] = [ 

      { 

        id: this.count.toString() + "_layout", 

        sizeX: this.panel_json[this.count].sizeX, 

        sizeY: this.panel_json[this.count].sizeY, 

        row: this.panel_json[this.count].row, 

        col: this.panel_json[this.count].col, 

        content: "<div></div>", 

        header: "<div>Panel " + this.count.toString() + "</div>" 

      } 

    ]; 

    this.dashboardObject.addPanel(panel[0]); 

    this.count = this.count + 1; 

  } 

 

Please, refer the sample link below. 

 

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

 

Please, refer to the below links for DashboardLayout component. 

 

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

 

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

 

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

 

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

 

Regards,  

Sowmiya.P