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

Custom css theme


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?


3 Replies

MS Madhu Sudhanan P Syncfusion Team 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

DU Dushmantha December 6, 2016 05:33 PM UTC

Any new themes for MVC  Grid ? specially Bootstrap thems 


VA Venkatesh Ayothi Raman Syncfusion Team 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. 

Live Chat Icon For mobile
Up arrow icon