Custom style on grid column header

[Mirza Cavlicekic]

Hi. I am trying to apply custom style to gird with CSS, but grid control is always using CSS styles from WebResource.axd. How can I customize look of grid trough CSS? I have already try samples from forum but nothing is working.

[Mirza Cavlicekic]

It seems that problem is with CSS is embedded into embedded resources. How can I exclude CSS from embedded resource? CSS file is ej.widgets.core.min.css. In WebResource.axd is default CSS file and not that with my edits.

[Prasanna Kumar Viswanathan]

Hi Mirza, 

Thanks for contacting Syncfusion support. 

We have already a documentation for customize the grid appearance. 

https://help.syncfusion.com/js/grid/style-and-appearance 

For your convenience we created a sample and in this sample we customize the grid column header. 

Find the code example, screenshot and sample: 

<ej:Grid ID="Grid" runat="server" AllowPaging="True"> 

       -------------------- 

        <Columns> 

                -------------- 

                      

            </Columns> 

        </ej:Grid>  

 

<style> 

     .e-grid .e-headercell { 

         background-color : chocolate; 

     } 

</style> 

Screenshot: 

 

Sample: http://www.syncfusion.com/downloads/support/forum/125940/ze/Sample-1312994359 

If you want to customize the particular column, use cssClass property of columns. This property is used to customize the specific column.  

 

Refer to the Help document for the cssClass property. 

https://help.syncfusion.com/js/api/ejgrid#members:columns-cssclass 

Query : “How can I exclude CSS from embedded resource?” 

We suspect that the LoadEJResourcesFromAssembly key is set as true in the web.config file. If we set as true the necessary stylesheets will be added in header section of current page dynamically to render the EJ components .If we set LoadEJResourcesFromAssembly as false, then we want to refer the stylesheet and script files explicitly. If you want to load the script files from EJ assembly and refer stylesheet explicitly, set false to themes in that key. 

 

<add key="LoadEJResourcesFromAssembly" value="true" /> 

<add key="EJResources" value="jsrender:true;jqueryeasing:true;themes:false;" /> 

Regards, 

Prasanna Kumar N.S.V 

 

[Mirza Cavlicekic]

Thanks that solve my problem.

[Prasanna Kumar Viswanathan]

Hi Mirza, 

We are happy that the provided solution working fine at your end. 

 

Please let me know if you need any further assistance. 

Regards, 

Prasanna Kumar N.S.V