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

How to set custom css for a grid

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

4 Replies

JK Jayaprakash Kamaraj Syncfusion Team 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. 
  
 



BS Bernd Schuhmacher 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



BS Bernd Schuhmacher replied to Jayaprakash Kamaraj 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


JK Jayaprakash Kamaraj Syncfusion Team 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. 
 


Loader.
Up arrow icon