Custom css theme

[PawelS]

Hi,

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

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

Thanks

[Madhu Sudhanan P]

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.

 

Regards,

Madhu Sudhanan. P

[Dushmantha]

Any new themes for MVC  Grid ? specially Bootstrap thems 

Thanks

Dushmantha

[Venkatesh Ayothi Raman]

Hi Dushmantha, 

We have bootstrap theme for Grid. Please refer to the below documentation for what are themes available in Grid. 

1)       https://help.syncfusion.com/js/theming-in-essential-javascript-components 

2)      https://help.syncfusion.com/js/bootstraptheme 

We can get the CSS files from installed location of Syncfusion Essential Studio like as follows, 

CSS location: [installed Location]\Syncfusion\Essential Studio\14.3.0.52\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. 

https://help.syncfusion.com/js/theme-studio 

Regards, 

Venkatesh Ayothiraman.