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 : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set custom css for a grid

Thread ID:

Created:

Updated:

Platform:

Replies:

129231 Mar 6,2017 10:19 AM UTC Mar 9,2017 09:03 AM UTC Angular 4
loading
Tags: ejGrid
Bernd Schuhmacher
Asked On March 6, 2017 10:19 AM UTC

Hi

I need to set a custom css file for a ej-grid widget, but have no idea how to do it.
I created a css file which I am loading with the @Comnponent Decorater of the conrolling class. I used the class names found at https://help.syncfusion.com/js/grid/style-and-appearance.

For example I set:
.e-grid {
    font-size3px;
    background-colorblack;
    colorgreen;
}
But the look of the grid remains the same.

I tried to set the css of the file with 
this.theGrid.widget.model.cssClass="e-grid";
where "theGrid" is a ViwChild.

Do you have a hint for me?

Regards
Bernd

Jayaprakash Kamaraj [Syncfusion]
Replied On March 7, 2017 12:03 PM UTC

Hi Bernd, 

Thank you for contacting Syncfusion support. 

We have prepared a Angular 2 grid sample with custom css that can be downloaded from the following link. 


Please refer to the below code example and screenshot. 

<style> 
.e-grid .e-gridcontent { /* grid content color*/ 
    background-color: #FFF8DC; 
    border-color: #bbbcbb; 
    color: black; 
} 
.e-grid .e-groupdroparea { /* grid grouped area color*/ 
    background: #ffaf4e;     
    border-top-color: #bbbcbb; 
    color: #fff; 
} 
.e-grid .e-cloneproperties { /* grid grouped drag cloner color*/ 
    color: #fff; 
    background: #ffaf4e;    
    border-color: #bbbcbb; 
} 
.e-grid .e-groupcaption, .e-grid .e-groupcaptionsummary { /* grid summary color*/ 
    background-color: #f6f7f7; 
    border-color: #bbbcbb; 
} 
.e-grid .e-groupcaptionsummary { /* grid summary alignment*/ 
    text-align: right !important; 
} 
.e-grid .e-groupheadercell:hover { /* grid grouped header cell hover color*/ 
    background: #ffbb60; 
    color: #fff; 
} 
.e-grid .e-alt_row { /* grid alternate row color*/ 
    background: #fff; 
} 
.e-grid td.e-active { /* grid selection color and styles*/ 
    background: #C9EDEF; 
    color: black; 
    font-weight: bold; 
    text-align:right !important; /* grid selection text align*/ 
} 
.e-grid tr:hover td{ /* grid row hover text align*/ 
    text-align:center !important; 
} 
.e-gridheader .e-headercell, .e-grid td.e-active { /* grid header color and grid row select color*/ 
    background: #8B4513; 
    min-height: 100%; 
    border-bottom-color: #8B4513; 
} 
.e-grid .e-gridheader { /* grid header font color and styles*/ 
    color: white; 
    border-top-width: 0px; 
    border-bottom-width: 0px; 
    border-bottom-color: #ffaf4e; 
    border-top-color: #bbbcbb; 
    height: 30px; 
} 
.e-grid .e-headercelldiv{ /* grid headercell font styles*/ 
    font-weight:lighter; 
    font-size: 18px; 
} 
.e-grid .e-alt_row .e-rowcell{ /* grid alternate rows styles*/ 
    font-style: italic; 
    text-align:right !important; /* grid alternate rows text align*/ 
    color:#700000; 
} 
.e-grid .e-alt_row .e-rowcell:hover{ /* grid alternate rows styles in hover*/ 
    font-style: italic; 
    color:#700000; 
} 
.e-grid .e-alt_row:hover .e-rowcell{ /* grid alternate rows text align in hover*/ 
    text-align:left !important;  
} 
.e-grid .e-alt_row .e-rowcell.e-active{ /* grid alternate rows styles in hover*/ 
    font-style: italic; 
    color:white; 
} 
.e-grid .e-groupdroparea.e-hover/* grid group hover design*/ 
    background: #ffbb60; 
} 
.e-grid tr.e-hover { /* grid row hover color and styles*/ 
    background: #E6CD82; 
    color: black; 
    font-weight: bold; 
} 
</style> 

 


Regards, 

Jayaprakash K. 
  
 


Bernd Schuhmacher
Replied On March 8, 2017 05:49 AM UTC

Hi
Thanks for looking into this matter.

As I can see you put the css code into the index.html file. This works as expected.
But with Angular a  recommended way would be to load the css within the component that needs the styles.

So I created a file called "appCSSGrid.css" in the app- directory and added
,
  styleUrls:["app/appCSSBernd.css"]
to the "@Component" decorator of AppComponent.

That doees not seem to work. The CSS is not used.
If I change the ViewEncapsulation from standard to none using
encapsulation: ViewEncapsulation.None
in the component decorator, the CSS is used for the grid. This is something near what I need.
But what to do if I can not use ViewEncapsulation.none? Is there a way to give custom style to a special Grid. For example if I need to use two grids with different styles in one component?

Regards

Bernd


Bernd Schuhmacher
Replied On March 8, 2017 07:13 AM UTC

Hi Bernd, 

Thank you for contacting Syncfusion support. 

We have prepared a Angular 2 grid sample with custom css that can be downloaded from the following link. 


Please refer to the below code example and screenshot. 

<style> 
.e-grid .e-gridcontent { /* grid content color*/ 
    background-color: #FFF8DC; 
    border-color: #bbbcbb; 
    color: black; 
} 
.e-grid .e-groupdroparea { /* grid grouped area color*/ 
    background: #ffaf4e;     
    border-top-color: #bbbcbb; 
    color: #fff; 
} 
.e-grid .e-cloneproperties { /* grid grouped drag cloner color*/ 
    color: #fff; 
    background: #ffaf4e;    
    border-color: #bbbcbb; 
} 
.e-grid .e-groupcaption, .e-grid .e-groupcaptionsummary { /* grid summary color*/ 
    background-color: #f6f7f7; 
    border-color: #bbbcbb; 
} 
.e-grid .e-groupcaptionsummary { /* grid summary alignment*/ 
    text-align: right !important; 
} 
.e-grid .e-groupheadercell:hover { /* grid grouped header cell hover color*/ 
    background: #ffbb60; 
    color: #fff; 
} 
.e-grid .e-alt_row { /* grid alternate row color*/ 
    background: #fff; 
} 
.e-grid td.e-active { /* grid selection color and styles*/ 
    background: #C9EDEF; 
    color: black; 
    font-weight: bold; 
    text-align:right !important; /* grid selection text align*/ 
} 
.e-grid tr:hover td{ /* grid row hover text align*/ 
    text-align:center !important; 
} 
.e-gridheader .e-headercell, .e-grid td.e-active { /* grid header color and grid row select color*/ 
    background: #8B4513; 
    min-height: 100%; 
    border-bottom-color: #8B4513; 
} 
.e-grid .e-gridheader { /* grid header font color and styles*/ 
    color: white; 
    border-top-width: 0px; 
    border-bottom-width: 0px; 
    border-bottom-color: #ffaf4e; 
    border-top-color: #bbbcbb; 
    height: 30px; 
} 
.e-grid .e-headercelldiv{ /* grid headercell font styles*/ 
    font-weight:lighter; 
    font-size: 18px; 
} 
.e-grid .e-alt_row .e-rowcell{ /* grid alternate rows styles*/ 
    font-style: italic; 
    text-align:right !important; /* grid alternate rows text align*/ 
    color:#700000; 
} 
.e-grid .e-alt_row .e-rowcell:hover{ /* grid alternate rows styles in hover*/ 
    font-style: italic; 
    color:#700000; 
} 
.e-grid .e-alt_row:hover .e-rowcell{ /* grid alternate rows text align in hover*/ 
    text-align:left !important;  
} 
.e-grid .e-alt_row .e-rowcell.e-active{ /* grid alternate rows styles in hover*/ 
    font-style: italic; 
    color:white; 
} 
.e-grid .e-groupdroparea.e-hover/* grid group hover design*/ 
    background: #ffbb60; 
} 
.e-grid tr.e-hover { /* grid row hover color and styles*/ 
    background: #E6CD82; 
    color: black; 
    font-weight: bold; 
} 
</style> 

 


Regards, 

Jayaprakash K. 
  
 


Hi
There is typo in my last message. The styleUrl line should be
styleUrls:["app/appCSSGrid.css"]


Regards
Bernd

Jayaprakash Kamaraj [Syncfusion]
Replied On March 9, 2017 09:03 AM UTC

Hi Bernd, 
 
Query1 : But what to do if I can not use ViewEncapsulation.none? 
 
We have analyzed your query and if we set the viewEncapsulation.Emulated then we will not be able to apply the CSS for the nested element in the component.  
                       
For your reference  
  
 
Query2 : Is there a way to give custom style to a special Grid. For example if I need to use two grids with different styles in one component? 
 
We suggest you to use GridID instead of .e-grid class to overcome this problem. Please refer to the below code example. 
 
gridData is GridID 
 
#gridData .e-gridcontent { /* grid content color*/  
    background-color: #FFF8DC;  
    border-color: #bbbcbb;  
    color: black;  
}  
#gridData .e-groupdroparea { /* grid grouped area color*/  
    background: #ffaf4e;      
    border-top-color: #bbbcbb;  
    color: #fff;  
}  
#gridData .e-cloneproperties { /* grid grouped drag cloner color*/  
    color: #fff;  
    background: #ffaf4e;     
    border-color: #bbbcbb;  
}  
#gridData .e-groupcaption, .e-grid .e-groupcaptionsummary { /* grid summary color*/  
    background-color: #f6f7f7;  
    border-color: #bbbcbb;  
}  
#gridData .e-groupcaptionsummary { /* grid summary alignment*/  
    text-align: right !important;  
}  
#gridData .e-groupheadercell:hover { /* grid grouped header cell hover color*/  
    background: #ffbb60;  
    color: #fff;  
}  
#gridData .e-alt_row { /* grid alternate row color*/  
    background: #fff;  
}  
#gridData td.e-active { /* grid selection color and styles*/  
    background: #C9EDEF;  
    color: black;  
    font-weight: bold;  
    text-align:right !important; /* grid selection text align*/  
}  
#gridData tr:hover td{ /* grid row hover text align*/  
    text-align:center !important;  
}  
#gridData .e-headercell, .e-grid td.e-active { /* grid header color and grid row select color*/  
    background: #8B4513;  
    min-height: 100%;  
    border-bottom-color: #8B4513;  
}  
#gridData .e-gridheader { /* grid header font color and styles*/  
    color: white;  
    border-top-width: 0px;  
    border-bottom-width: 0px;  
    border-bottom-color: #ffaf4e;  
    border-top-color: #bbbcbb;  
    height: 30px;  
}  
#gridData .e-headercelldiv{ /* grid headercell font styles*/  
    font-weight:lighter;  
    font-size: 18px;  
}  
#gridData .e-alt_row .e-rowcell{ /* grid alternate rows styles*/  
    font-style: italic;  
    text-align:right !important; /* grid alternate rows text align*/  
    color:#700000;  
}  
#gridData .e-alt_row .e-rowcell:hover{ /* grid alternate rows styles in hover*/  
    font-style: italic;  
    color:#700000;  
}  
#gridData .e-alt_row:hover .e-rowcell{ /* grid alternate rows text align in hover*/  
    text-align:left !important 
}  
#gridData .e-alt_row .e-rowcell.e-active{ /* grid alternate rows styles in hover*/  
    font-style: italic;  
    color:white;  
}  
#gridData .e-groupdroparea.e-hover/* grid group hover design*/  
    background: #ffbb60;  
}  
#gridData tr.e-hover { /* grid row hover color and styles*/  
    background: #E6CD82;  
    color: black;  
    font-weight: bold;  
} 
 
Regards,  
 
Jayaprakash K. 
 


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.

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

;