Skip to content

Commit 58821c8

Browse files
BanupriyaSelvarajBanupriyaSelvaraj
committed
Update Readme file
1 parent 8165383 commit 58821c8

File tree

4 files changed

+106
-27
lines changed

4 files changed

+106
-27
lines changed

‎README.md‎

Lines changed: 100 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,100 @@
1-
# EJ2-Javascript-Dynamic-theme-Switch
2-
This section describes about how to change themes dynamically in Syncfusion Javascript controls.
1+
# Themeswitcher
2+
3+
This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
4+
5+
## Getting Started
6+
7+
To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location.
8+
9+
```
10+
git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
11+
cd quickstart
12+
```
13+
14+
## Create an typescript application
15+
16+
To create an angular application, refer to [`getting started`]() document.
17+
18+
## Add Different Themes for Dynamic Theme Change
19+
20+
In the `src` folder of the application, create `assets` folder.
21+
22+
Under `assets` folder, create a folder named `styles`. Then, load CSS file of the different themes in that `styles` folder.
23+
24+
## Add Style Tag
25+
26+
```typescript
27+
<!DOCTYPE html>
28+
<html lang="en">
29+
30+
<head>
31+
<title>Essential JS 2 DropDownList component</title>
32+
<meta charset="utf-8" />
33+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
34+
<meta name="description" content="Essential JS 2" />
35+
<meta name="author" content="Syncfusion" />
36+
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
37+
38+
<!--system js reference and configuration-->
39+
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
40+
<script src="system.config.js" type="text/javascript"></script>
41+
42+
// add style tag for dynamic theme change
43+
<style id="theme"></style>
44+
45+
</head>
46+
47+
<body>
48+
<div id='container'>
49+
<!--element which is going to render the DropDownList-->
50+
<input type="text" tabindex="1" id='ddlelement'/>
51+
<br>
52+
<br>
53+
<!--element which is going to render the Grid-->
54+
<div id='Grid'></div>
55+
</div>
56+
57+
</body>
58+
59+
</html>
60+
61+
```
62+
63+
## Dynamic theme change
64+
65+
To achieve dynamic theme change, read the stylesheet/CSS file of the selected theme and apply these styles to DOM element using AJAX.
66+
67+
Add the below code in `app.ts` file.
68+
69+
```typescript
70+
let dropDownListObject: DropDownList = new DropDownList({
71+
//set the data to dataSource property
72+
dataSource: themes,
73+
select: function(e) {
74+
debugger
75+
console.log(e);
76+
if (e && e.itemData.value) {
77+
let ajax: Ajax = new Ajax('assets/styles/' + e.itemData.value + '.css', 'GET', true);
78+
ajax.send().then((result: any) => {
79+
let styleTag = document.getElementById('theme');
80+
styleTag.innerHTML=`/*${e.itemData.value}*/` + result;
81+
});
82+
}
83+
},
84+
// set placeholder to DropDownList input element
85+
placeholder: "Select a theme"
86+
});
87+
88+
```
89+
90+
The `select` function in the dropdownlist component gets triggered, whenever the theme value is changed.
91+
92+
Whenever the `select` function is triggered, the respective CSS file of the selected theme is applied to the DOM elements.
93+
94+
## Run the Application
95+
96+
Use the following command to run the application in browser.
97+
98+
```
99+
npm run start
100+
```

‎src/app/app.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ let dropDownListObject: DropDownList = new DropDownList({
1616
if (e && e.itemData.value) {
1717
let ajax: Ajax = new Ajax('assets/styles/' + e.itemData.value + '.css', 'GET', true);
1818
ajax.send().then((result: any) => {
19-
let style: HTMLCollectionOf<HTMLStyleElement> = document.getElementsByTagName('style') as HTMLCollectionOf<HTMLStyleElement>;
20-
style[0].innerHTML = `/*${e.itemData.value}*/` + result;
19+
let styleTag = document.getElementById('theme');
20+
styleTag.innerHTML=`/*${e.itemData.value}*/` + result;
2121
});
2222
}
2323
},

‎src/index.html‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,14 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
88
<meta name="description" content="Essential JS 2" />
99
<meta name="author" content="Syncfusion" />
10-
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
11-
12-
<!--style reference from app-->
13-
<link href="/styles/styles.css" rel="stylesheet" />
10+
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
1411

1512
<!--system js reference and configuration-->
1613
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
1714
<script src="system.config.js" type="text/javascript"></script>
1815

19-
<style>
20-
.e-row[aria-selected="true"] .e-customizedExpandcell {
21-
background-color: #e0e0e0;
22-
}
23-
.e-grid.e-gridhover tr[role='row']:hover {
24-
background-color: #eee;
25-
}
26-
.e-expand::before {
27-
content: '\e5b8';
28-
}
29-
</style>
16+
<!-- add style tag for dynamic theme change -->
17+
<style id="theme"></style>
3018

3119
</head>
3220

‎src/styles/styles.css‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1 @@
1-
@import '../../node_modules/@syncfusion/ej2/material.css';
2-
@import '../../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
3-
@import '../../node_modules/@syncfusion/ej2-angular-grids/styles/fabric.css';
4-
@import '../../node_modules/@syncfusion/ej2-angular-grids/styles/bootstrap.css';
5-
@import '../../node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
6-
@import '../../node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';
7-
@import '../../node_modules/@syncfusion/ej2-angular-dropdowns/styles/fabric.css';
8-
@import '../../node_modules/@syncfusion/ej2-angular-dropdowns/styles/bootstrap.css';
1+

0 commit comments

Comments
 (0)