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.

User Changed Themes At Runtime

Thread ID:

Created:

Updated:

Platform:

Replies:

126138 Sep 26,2016 03:31 PM Sep 28,2016 12:42 AM ASP.NET MVC 3
loading
Tags: Grid
nate greene
Asked On September 26, 2016 03:31 PM

My entire site is set to the bootstrap theme, is it possible to set something up that allows the user to select what theme they want to use while using the site through a dropdown list that contains premade themes made available through the standard set that is offered from Syncfusion for most of its components including the grid.

Thanks for any help at all,

Nate

Prasanna Kumar Viswanathan [Syncfusion]
Replied On September 27, 2016 09:58 AM

Hi Greene, 
 
Thanks for contacting Syncfusion support. 
 
We created a sample and in this sample we have rendered the dropdown control with data source and dropdown data source value is based on the Grid theme name (eg. flat-saffron, flat-lime, etc.). If we change the theme name, then the corresponding theme will appear in the Grid.  
 
Refer to the code example and sample,    
 
Code example:  
 
<Dropdown>  
   @Html.EJ().DropDownList("DropDownList1").Datasource((IEnumerable<object>)ViewData["LocalDataSource"]).DropDownListFields(Df => Df.Text("Text")).ClientSideEvents(e=>e.Change("change"))  
  
<GRID>  
@(Html.EJ().Grid<object>("FlatGrid")  
        .Datasource((IEnumerable<object>)ViewBag.datasource)  
                
         .AllowPaging()    /*Paging Enabled*/  
              .SelectionType(SelectionType.Single)  
         .AllowResizing()  
          
            .AllowFiltering()  
                
                  
       .Columns(col =>  
        {  
          . . .              
        }))  
</div>  
  
<Change Event>  
<script>   
    function change(args) {  
         
        var link = window.document.getElementsByTagName('link'); //get the link of css file  
        var value = args.value; // get the dropdown value  
        $(link).attr('rel='nofollow' href'"/Content/ej/web/" + value + "/ej.web.all.min.css") // Change the theme  
    }  
</script>  
  
 
 
Note: The corresponding content folder will be in following structure.   
 
Structure:  
 
   
 
Regards,  
Prasanna Kumar N.S.V 


nate greene
Replied On September 27, 2016 06:23 PM

Works great thanks for the help!

Prasanna Kumar Viswanathan [Syncfusion]
Replied On September 28, 2016 12:42 AM

Hi Greene,
 
We are happy that the provided solution working fine at your end.
 
 
Please let us 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.

;