How to detect the css class in dashboard?

[Laurens Albers]

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

[Christopher Issac Sunder K]

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 

[Laurens Albers]

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

[Ashokkumar Balasubramanian]

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.