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 css theme

Thread ID:

Created:

Updated:

Platform:

Replies:

116847 Jun 18,2014 03:07 AM Dec 7,2016 11:48 PM ASP.NET MVC 3
loading
Tags: Grid
PawelS
Asked On June 18, 2014 03:07 AM

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 [Syncfusion]
Replied On June 19, 2014 07:49 AM

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
Replied On December 6, 2016 12:33 PM

Any new themes for MVC  Grid ? specially Bootstrap thems 

Thanks
Dushmantha

Venkatesh Ayothi Raman [Syncfusion]
Replied On December 7, 2016 11:48 PM

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\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. 

Regards, 
Venkatesh Ayothiraman. 


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.

;