How to set custom css for a grid

[Bernd Schuhmacher]

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-size: 3px;

    background-color: black;

    color: green;

}

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]

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/129231/ze/ejGrid_Vpaging155087545 

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]

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]

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/129231/ze/ejGrid_Vpaging155087545 

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]

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  

  

Link: https://github.com/angular/angular/issues/7400  

 

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.