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

Custom css theme

Thread ID:





116847 Jun 18,2014 07:07 AM UTC Dec 8,2016 04:48 AM UTC ASP.NET MVC 3
Tags: Grid
Asked On June 18, 2014 07:07 AM UTC


I'm testing trial version Syncfusion controls ( for ASP.NET MVC.

Is any simple way to implement Google Bootstrap css theme or create custom css theme to your grid controls?


Madhu Sudhanan P [Syncfusion]
Replied On June 19, 2014 11:49 AM UTC

Hi PawelS,


Thanks for using Syncfusion products.


We afraid that there is no simple way to apply the custom theme to our ASP.Net MVC Control but we can write custom css to change the grid theme. For your convenience, we have provided some common styles to change default theme for grid actions such as Selection, paging, grouping, alternate row, row hover. Please refer the following code snippet.



.e-grid .e-groupdroparea, /*GroupDropArea */

    .e-grid .e-groupdroparea:hover, /*GroupDropArea Hover*/

    .e-grid .e-cloneproperties, /*Column header clone during dragging header*/

    .e-grid .e-groupheadercell:hover, /*HeaderCell in GroupDropArea*/

    .e-grid td.e-active, /*During Row Selected*/

    /*For pager items and their hover*/

    .e-pager .e-currentitem,

    .e-pager .e-currentitem:hover,

    .e-pager .e-link:hover,

    .e-pager .e-icon:hover {

        background-color: #ea1b8d;



    .e-grid .e-gridheader /*For line that separates the grid header and content*/


        border-bottom-color: #ea1b8d;



    .e-grid tr.e-hover /*For row hover*/


        background-color: #e66aae;

        color: #FFFFFF;



    .e-grid .e-alt_row /*For Alternate row color*/


        background-color: #fae9f2;





When using the above style the grid will look like below.



And also we can modify the default CSS rules in the ej.theme.min.css and ej.widgets.core.min.css files to apply custom theme, you can find this file after installing Essential Studio in the following location.


CSS Location: C:\Program Files (x86)\Syncfusion\Essential Studio\XX-XX-XX-XX\JavaScript\assets\css\web\XXX-XXX


Where XX-XX-XX-XX - version number and  XXX-XXX – Theme folder


For your kind information, if you have installed Essential Studio for ASP.Net MVC alone the above folder will not be available and hence we must install Essential JavaScript Studio also.


Currently we don’t have support to apply Bootstrap theme to the grid and hence we will consider this feature in our Volume 3, 2014 road map.


Please let us know if you have any queries.



Madhu Sudhanan. P

Replied On December 6, 2016 05:33 PM UTC

Any new themes for MVC  Grid ? specially Bootstrap thems 


Venkatesh Ayothi Raman [Syncfusion]
Replied On December 8, 2016 04:48 AM UTC

Hi Dushmantha, 

We have bootstrap theme for Grid. Please refer to the below documentation for what are themes available in Grid
We can get the CSS files from installed location of Syncfusion Essential Studio like as follows, 
CSS location: [installed Location]\Syncfusion\Essential Studio\\JavaScript\assets\css\web 

We can switch the theme for sample browser to check what are the themes available and preview. Please refer to the following screenshot, 
We can also generate and download the theme for Grid using theme studio. Please refer to the below documentation. 

Venkatesh Ayothiraman. 


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

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