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.
Unfortunately, activation email could not send to your email. Please try again.

Custom style on grid column header

Thread ID:

Created:

Updated:

Platform:

Replies:

125940 Sep 13,2016 03:57 AM Sep 22,2016 12:49 AM ASP.NET Web Forms 4
loading
Tags: Grid
Mirza Cavlicekic
Asked On September 13, 2016 03:57 AM

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
Replied On September 13, 2016 07:10 AM

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 [Syncfusion]
Replied On September 14, 2016 07:53 AM

Hi Mirza, 

Thanks for contacting Syncfusion support. 

We have already a documentation for customize the grid 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: 

 


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. 


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
Replied On September 21, 2016 04:53 AM

Thanks that solve my problem.

Prasanna Kumar Viswanathan [Syncfusion]
Replied On September 22, 2016 12:49 AM

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 


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.

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.

;