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. Image for the cookie policy date

Issue rendering 5 columns

Hello,

I am facing an issue with the following code. The last row is not rendering properly. Also, they are not rendered by panel "name".

------------------------------------------------------------------------------------------------------------------------------------------------------------

app.component.html

--------------------------------

<div class="control-section">

    <ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]="5" [cellSpacing]='cellSpacing'

        [cellAspectRatio]='cellAspectRatio' [mediaQuery]='mediaQuery' [showGridLines]='showGridLines'>

        <e-panels>

            <e-panel *ngFor="let panel of panelsData" [id]="panel.id" [sizeX]="panel.sizeX" [sizeY]="panel.sizeY"

                [row]="panel.row" [col]="panel.col" [cssClass]="panel.color">

                <ng-template #content>

                    <div class="row">

                        <div class="col-sm-12">

                            <span class="widget-title float-left">{{panel.name}}</span>

                            <span class="widget-radio float-right"><input type="radio"></span>

                        </div>

                    </div>

                </ng-template>

            </e-panel>

        </e-panels>

    </ejs-dashboardlayout>

</div>

------------------------------------------------------------------------------------------------------------------------------------------------------------

app.component.ts

------------------------------

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';

import {

DashboardLayoutComponent,

PanelModel,

} from '@syncfusion/ej2-angular-layouts';

@Component({

selector: 'app-root',

styleUrls: ['app.component.css'],

templateUrl: 'app.component.html',

encapsulation: ViewEncapsulation.None,

})

export class AppComponent {

@ViewChild('default_dashboard')

public dashboard: DashboardLayoutComponent;

constructor() { }

public cellSpacing: number[] = [10, 10];

public cellAspectRatio: number = 270 / 90;

public mediaQuery: string = 'max-width: 700px';

public panelsData: any = [

{

id: '1',

name: "A",

sizeX: 1,

sizeY: 1,

row: 0,

col: 0

},

{

id: '2',

name: 'B',

sizeX: 1,

sizeY: 1,

row: 0,

col: 1

},

{

id: '3',

name: 'C',

sizeX: 1,

sizeY: 1,

row: 0,

col: 2

},

{

id: '4',

name: 'D',

sizeX: 1,

sizeY: 1,

row: 0,

col: 3

},

{

id: '5',

name: 'E',

sizeX: 1,

sizeY: 1,

row: 0,

col: 4

},

{

id: '6',

name: 'F',

sizeX: 1,

sizeY: 1,

row: 0,

col: 5

},

{

id: '7',

name: 'G',

sizeX: 1,

sizeY: 1,

row: 1,

col: 0

},

{

id: '8',

name: 'H',

sizeX: 1,

sizeY: 1,

row: 1,

col: 1

},

{

id: '9',

name: 'I',

sizeX: 1,

sizeY: 1,

row: 1,

col: 2

},

{

id: '10',

name: 'J',

sizeX: 1,

sizeY: 1,

row: 1,

col: 3

},

{

id: '11',

name: 'K',

sizeX: 1,

sizeY: 1,

row: 1,

col: 4

},

{

id: '12',

name: 'L',

sizeX: 1,

sizeY: 1,

row: 1,

col: 5

},

{

id: '13',

name: 'M',

sizeX: 1,

sizeY: 1,

row: 2,

col: 0

},

{

id: '14',

name: 'N',

sizeX: 1,

sizeY: 1,

row: 2,

col: 1

},

{

id: '15',

name: 'O',

sizeX: 1,

sizeY: 1,

row: 2,

col: 2

},

{

id: '16',

name: 'P',

sizeX: 1,

sizeY: 1,

row: 2,

col: 3

},

{

id: '17',

name: 'Q',

sizeX: 1,

sizeY: 1,

row: 2,

col: 4

},

{

id: '18',

name: 'R',

sizeX: 1,

sizeY: 1,

row: 2,

col: 5

},

{

id: '19',

name: 'S',

sizeX: 1,

sizeY: 1,

row: 3,

col: 0

},

{

id: '20',

name: 'T',

sizeX: 1,

sizeY: 1,

row: 3,

col: 1

},

{

id: '21',

name: 'U',

sizeX: 1,

sizeY: 1,

row: 3,

col: 2

},

{

id: '22',

name: 'V',

sizeX: 1,

sizeY: 1,

row: 3,

col: 3

},

{

id: '23',

name: "W",

sizeX: 1,

sizeY: 1,

row: 3,

col: 4

},

{

id: '24',

name: 'X',

sizeX: 1,

sizeY: 1,

row: 3,

col: 5

},

{

id: '25',

name: 'Y',

sizeX: 1,

sizeY: 1,

row: 4,

col: 0

},

{

id: '26',

name: 'Z',

sizeX: 1,

sizeY: 1,

row: 4,

col: 1

},

{

id: '27',

name: '1A',

sizeX: 1,

sizeY: 1,

row: 4,

col: 2

},

{

id: '28',

name: '1B',

sizeX: 1,

sizeY: 1,

row: 4,

col: 3

},

{

id: '29',

name: '1C',

sizeX: 1,

sizeY: 1,

row: 4,

col: 4

},

{

id: '30',

name: '1D',

sizeX: 1,

sizeY: 1,

row: 4,

col: 5

},

];

}

------------------------------------------------------------------------------------------------------------------------------------------

Adding screen shot of the output I'm getting


Please help.

Thank you,

Nikitha R


3 Replies

LD LeoLavanya Dhanaraj Syncfusion Team December 9, 2022 02:06 PM UTC

Hi Nikitha,


Greetings from Syncfusion support.


Basically, the Dashboard Layout is a grid-structured component that can be split into subsections of equal size known as cells. The total number of cells in each row is defined by using the columns property of the component. The width of each cell will be automatically calculated based on the total number of cells placed in a row, and the height of a cell will be the same as that of its width.


Basically, the panels are rendered based on the row and column position. If the property(id, row and col) values are not given in a proper manner(unique), the panels are getting overlapped. In your shared sample, you gave the column value as 5 (0 to 4) but you rendered the panels in 6 columns(0 to 5). To overcome the issue, you need to set unique idrow, and col values for the Dashboard component. For your reference, we included a sample.


Sample : https://stackblitz.com/edit/angular-nbic97?file=app.component.html,app.component.ts


Check out the below screenshots and links.


Documentation : https://ej2.syncfusion.com/angular/documentation/dashboard-layout/setting-size-of-cells/


 

Panel data

Output screenshot

1

2

3


Regards,

Leo Lavanya Dhanaraj



NI Nikitha replied to LeoLavanya Dhanaraj December 13, 2022 09:50 AM UTC

Hi Leo Lavanya Dhanaraj,

Thank you for the correction.

I made few more changes in the UI ie.,

 - added a dropdown list to select no of columns dynamically to view the panels

- removed row and col property from panelData so that I could add these two properties and set their positions whenever I select the column from the dropdown list.

"Issue I am facing now is, even though the positions are correctly assigned to all panels they are not moved to their assigned places. This happens when I change column to 4 to 6 or 4 to 5."

I had tried with the method movePanel(), and I get this,

"ERROR TypeError: Cannot read properties of undefined (reading 'movePanel')"

So I have not used it.

Please check.

-----------------------------------------------------------------------------------------------------------------------

app.component.html

------------------------------

<div>

  <select #ddCol name="columnArray" id="col" [value]="selectedCol"

  (change)="colSelected(ddCol.value)">

    <option value="">Select</option>

    <option value="4">4</option>

    <option value="5">5</option>

    <option value="6">6</option>

  </select>

  </div>


  <div class="control-section">

  <ejs-dashboardlayout

    id="defaultLayout"

    #defaultLayout

    [columns]="columns"

    [cellSpacing]="cellSpacing"

    [cellAspectRatio]="cellAspectRatio"

    [mediaQuery]="mediaQuery"

    [showGridLines]="showGridLines"

  >

    <e-panels>

      <e-panel

        *ngFor="let panel of panelsData"

        [id]="panel.id"

        [sizeX]="panel.sizeX"

        [sizeY]="panel.sizeY"

        [row]="panel.row"

        [col]="panel.col"

        [cssClass]="panel.color"

      >

        <ng-template #content>

          <div class="row">

            <div class="col-sm-12">

              <span class="widget-radio"

                ><input type="radio"

              /></span>

              <h4 class="widget-title">{{ panel.name }}</h4>

              <span class="widget-title">row {{ panel.row }}, col {{ panel.col}}</span>


            </div>

          </div>

        </ng-template>

      </e-panel>

    </e-panels>

  </ejs-dashboardlayout>

  </div>


-----------------------------------------------------------------------------------------------------------------------------------------

app.component.ts

---------------------------

import { Component, ViewEncapsulation, Inject, ViewChild, OnInit, ElementRef, AfterViewInit } from '@angular/core';

import {

  DashboardLayoutComponent,

  PanelModel,

} from '@syncfusion/ej2-angular-layouts';


/**


 * Default component

 */

@Component({

  selector: 'app-root',

  styleUrls: ['app.component.css'],

  templateUrl: 'app.component.html',

  encapsulation: ViewEncapsulation.None,

})

export class AppComponent implements OnInit {

  @ViewChild('defaultLayout') public dashboard: DashboardLayoutComponent;

  constructor() { }


  public cellSpacing: number[] = [5, 5];


  public cellAspectRatio: number = 270 / 90;


  public mediaQuery: string = 'max-width: 700px';

  public columns: number;

  columnsArray = [

    { id: 4 },

    { id: 5 },

    { id: 6 }

  ];

  selectedCol;

  showLayout: boolean = true;

  public panelsData: any[] = [];

  public data1: any = [

    { id: '1', name: 'A', sizeX: 1, sizeY: 1 },

    { id: '2', name: 'B', sizeX: 1, sizeY: 1 },

    { id: '3', name: 'C', sizeX: 1, sizeY: 1 },

    { id: '4', name: 'D', sizeX: 1, sizeY: 1 },

    { id: '5', name: 'E', sizeX: 1, sizeY: 1 },

    { id: '6', name: 'F', sizeX: 1, sizeY: 1 },

    { id: '7', name: 'G', sizeX: 1, sizeY: 1 },

    { id: '8', name: 'H', sizeX: 1, sizeY: 1 },

    { id: '9', name: 'I', sizeX: 1, sizeY: 1 },

    { id: '10', name: 'J', sizeX: 1, sizeY: 1 },

    { id: '11', name: 'K', sizeX: 1, sizeY: 1 },

    { id: '12', name: 'L', sizeX: 1, sizeY: 1 },

    { id: '13', name: 'M', sizeX: 1, sizeY: 1 },

    { id: '14', name: 'N', sizeX: 1, sizeY: 1 },

    { id: '15', name: 'O', sizeX: 1, sizeY: 1 },

    { id: '16', name: 'P', sizeX: 1, sizeY: 1 },

    { id: '17', name: 'Q', sizeX: 1, sizeY: 1 },

    { id: '18', name: 'R', sizeX: 1, sizeY: 1 },

    { id: '19', name: 'S', sizeX: 1, sizeY: 1 },

    { id: '20', name: 'T', sizeX: 1, sizeY: 1 },

    { id: '21', name: 'U', sizeX: 1, sizeY: 1 },

    { id: '22', name: 'V', sizeX: 1, sizeY: 1 },

    { id: '23', name: 'W', sizeX: 1, sizeY: 1 },

    { id: '24', name: 'X', sizeX: 1, sizeY: 1 },

    { id: '25', name: 'Y', sizeX: 1, sizeY: 1 },

    { id: '26', name: 'Z', sizeX: 1, sizeY: 1 },

    { id: '27', name: '1A', sizeX: 1, sizeY: 1 },

    { id: '28', name: '1B', sizeX: 1, sizeY: 1 },

    { id: '29', name: '1C', sizeX: 1, sizeY: 1 },

    { id: '30', name: '1D', sizeX: 1, sizeY: 1 }

  ];


  ngOnInit() {

    this.panelsData = this.data1;

    this.selectedCol = 5;

    this.columns = this.selectedCol;

    this.colSelected(this.selectedCol);

  }


  colSelected(col) {

    this.selectedCol = col;

    this.columns = this.selectedCol;

    this.panelsData = this.panelsData.map(({row, col, ...rest}) => ({...rest}));


    //let d = this.columnsArray.findIndex(i => i.id == this.selectedCol);

    let row = this.panelsData.length / this.selectedCol;

    row = Math.ceil(row);

    let i = 0;

    while (i < this.panelsData.length) {


      for (let j = 0; j < row; j++) {


        for (let k = 0; k < this.selectedCol; k++) {


          if (this.panelsData[i] !== undefined) {

            //this.dashboard.movePanel(this.panelsData[i].id, j, k);

            this.panelsData[i].col = k;

            this.panelsData[i].row = j;

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


            console.log('in>>> ', this.panelsData[i].name,this.panelsData[i].row, this.panelsData[i].col);

          }

          i++;

        }

      }

    }

  }


  onCreated(args: any) {

     console.log("Create event triggered");

 }


 onChange(args: any) {

     console.log("Change event triggered");

 }


}


----------------------------------------------------------------------------------------------------------------------------------------

Here is a screen shot of the issue,



Thank you,

Nikitha R



LD LeoLavanya Dhanaraj Syncfusion Team December 15, 2022 02:17 PM UTC

Nikitha, We have validated your reported issue in the Angular Dashboard Layout component. By default, you need to properly refresh the component in order to see the output if you dynamically change any component property values.


The reported issue also occurs due to the Dashboard Layout component not being properly refreshed while dynamically changing the property value(sizeX, sizeY and column). To overcome the reported issue, you need to call the refresh method inside the change event.


Check out the below mentioned code snippets and sample.


Sample : https://stackblitz.com/edit/angular-nbic97-yqyn3g?file=app.component.html,app.component.ts


[app.component.html]

<ejs-dashboardlayout id="defaultLayout" #defaultLayout ... (change)="onChange($event)" >

    ...

</ejs-dashboardlayout>

 

[app.component.ts]

@ViewChild(“defaultLayout')

public dashboard: DashboardLayoutComponent;

 

onChange(args: any) {

    this.dashboard.refresh();

    console.log('Change event triggered');

}


Loader.
Live Chat Icon For mobile
Up arrow icon