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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to detect the css class in dashboard?

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
loading
Tags: DashboardLayout
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

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, 
 
 
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
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




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. 
 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon