How to detect the css class in dashboard?

Laurens Albers

Asked On May 31, 2019 12:17 PM UTC

Hi,

I am trying to set the css for different objects within the panel object. The documentation shows how this works with static html, but in my scenario it can't.(because draggable& remembering state).

I tried to do something as simple as the following for testing purposes:

component.css

.change {

text-align: center;

color: red;

}

component.html

<div>

<ejs-dashboardlayout

[cellSpacing]='cellSpacing'

[panels]='panels'

[columns]="6"

[cellAspectRatio]='aspectRatio'>

</ejs-dashboardlayout>

</div>

component.ts

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

aspectRatio: any = 100 / 80;

panels: PanelModel[] = [

{ "sizeX": 2, "sizeY": 1, "row": 0, "col": 2, content: '<div class="change">1</div>' },

//etc

];

But this doesn't change anything. The class can't be found from within the component?

Tried the following:

{ "sizeX": 2, "sizeY": 1, "row": 0, "col": 2, cssClass: 'change', content: '<div class="content>"<div class="change">1</div></div>' },

{ "sizeX": 2, "sizeY": 1, "row": 0, "col": 2, cssClass: 'change', content: '<div class="change">1</div>' },

Am i missing something?

greetings,

Laurens

Reply | Reply with quote

Christopher Issac Sunder K [Syncfusion]

Replied On May 31, 2019 01:51 PM UTC

Hi Laurens,

We checked your reported query – “Not able to set css for objects within the panel” from our end and were able to set the css for panel contents both using cssClass class property and content’s class. Please find the code snippet below,

public panels: any = [

{ "sizeX": 1, "sizeY": 1, "row": 0, "col": 0, cssClass: 'change', content: '<div class="content">0</div>' },

{ "sizeX": 3, "sizeY": 2, "row": 0, "col": 1, cssClass: 'change', content: '<div class="content">1</div>' },

{ "sizeX": 1, "sizeY": 3, "row": 0, "col": 4, cssClass: 'change', content: '<div class="content">2</div>' },

{ "sizeX": 1, "sizeY": 1, "row": 1, "col": 0, cssClass: 'change', content: '<div class="content">3</div>' },

{ "sizeX": 2, "sizeY": 1, "row": 2, "col": 0, cssClass: 'change', content: '<div class="content">4</div>' },

{ "sizeX": 1, "sizeY": 1, "row": 2, "col": 2, cssClass: 'change', content: '<div class="content">5</div>' },

{ "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, cssClass: 'change', content: '<div class="content">6</div>' }

]

<style>

// Custom styles set based on cssClass

.change {

text-align: center;

color: red;

}

// Custom styles set based on panels content’s class

.content {

vertical-align: middle;

font-weight: 600;

font-size: 20px;

}

<style>

We have prepared a sample for your reference below,

Sample: https://stackblitz.com/edit/angular-m15c5c-vh6ely

We suspect you might be facing issue due to css file not referred properly in the application. Can you please once ensure this case?

If issue is still persisting, please get back to us with further details on this issue so that we can check and help you resolve it.

Let us know if you have any concerns.

Thanks,

Christo

Reply | Reply with quote

Laurens Albers

Replied On May 31, 2019 02:47 PM UTC

Based upon your sample, apparently the following has to be added in @Component:

encapsulation: ViewEncapsulation.None;

Without it the css wont work. That was the only difference apparently.

thanks!

greetings,

Laurens

Reply | Reply with quote

Ashokkumar Balasubramanian [Syncfusion]

Replied On June 3, 2019 10:20 AM UTC

Hi Laurens,

Most Welcome.

We were happy to hear that your reported problem has been resolved in your end. If you remove the ViewEncapsulation.None, the default encapsulation value Emulated is set to the application. So, dynamically created element styles are not applied properly to corresponding component. For this case, we need to specify the styles in separate file (other than app.component.css file and refer it into index.html) or index.html file. Please check the below link.

https://angular.io/api/core/ViewEncapsulation#Emulated

Please let us know, if you have any concern on this.

Regards,

Ashokkumar B.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144996	May 31,2019 12:17 PM UTC	Jun 3,2019 10:20 AM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US