How to load themes dynamically in Syncfusion components

2 mins read

This knowledge base explains the way of dynamic theme change in Syncfusion components, which are used in your application. This can be achieved by loading the needed theme to the style tag dynamically using AJAX call.

Javascript

     function(e) {
       if (e && e.value) {
           let ajax: Ajax = new Ajax('assets/styles/' + e.value + '.css', 'GET', true);
           ajax.send().then((result: any) => {
                 let styleTag = document.getElementById('theme');
                 styleTag.innerHTML=`/*${e.itemData.value}*/` + result;     
           });
      }
}

We have created a JavaScript sample for dynamic theme change in Syncfusion components. Here, we have loaded different themes in a dropdown list. According to the selected theme value, the corresponding CSS will be loaded to the DOM elements. The following code example explains how to use ajax to load themes to Syncfusion components.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Essential JS 2 DropDownList component</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
 
    <!--system js reference and configuration-->
    <script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
    <script src="system.config.js" type="text/javascript"></script>
     
    //  add style tag for dynamic theme change
    <style id="theme"></style>
 
</head>
 
<body>
    <div id='container'>
        <!--element which is going to render the DropDownList-->
        <input type="text" tabindex="1" id='ddlelement'/>
        <br>
        <br>
        <!--element which is going to render the Grid-->
        <div id='Grid'></div>   
    </div>
 
</body>
 
</html>

Javascript

import { DropDownList, DropDownListClassList } from '@syncfusion/ej2-dropdowns';
import { Ajax } from '@syncfusion/ej2-base';
import { Grid, Sort, Page } from '@syncfusion/ej2-grids';
import { data } from './datasource';
 
// defined the array of themes
let themes: string[] = ['material', 'fabric', 'bootstrap'];
Grid.Inject(Sort, Page);
// initialize DropDownList component
let dropDownListObject: DropDownList = new DropDownList({
    //set the themes to dataSource property
    dataSource: themes,
    select: function(e) {
        if (e && e.itemData.value) {
            let ajax: Ajax = new Ajax('assets/styles/' + e.itemData.value + '.css', 'GET', true);
            ajax.send().then((result: any) => {
              let styleTag = document.getElementById('theme');
              styleTag.innerHTML=`/*${e.itemData.value}*/` + result;
            });
          }
    },
    // set placeholder to DropDownList input element
    placeholder: "Select a theme"
});
 
let grid: Grid = new Grid({
  dataSource: data,
  columns: [
              { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
              { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
              { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
              { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' }
  ],
  allowSorting: true,
  allowPaging: true,
  pageSettings: { pageSize: 7 }
});
  
// render initialized DropDownList
dropDownListObject.appendTo('#ddlelement');
// render initialized Grid
grid.appendTo('#Grid');

Sample Link: https://github.com/SyncfusionExamples/EJ2-Javascript-Dynamic-theme-Switch

The following screenshots show the results of the dynamic theme change in JavaScript sample:

Changing Theme

Change theme of the grid component from dropdown list.