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


Loader.
Live Chat Icon For mobile
Up arrow icon