In this post we will see how we can change Themes Dynamically In Grid. I recently came across a situation to change the grid’s theme dynamically, whenever user select any theme. So I have done this requirement by using some in-built functionalities of jQWidget JQX grid. Here I am going to share that. I hope you will like it.

To load a grid from a JSON, you can follow the steps as discussed in this article.

Background

If you are new to JQWidget JQX Grid, please find out the link here.

Download the Source Code

Please download the source code from here.

Using the code

I hope you have implemented your grid as shown in that article. Now I guess your page will look like this.

Now let us make sure that grid is working fine. Please run your project.

Change Themes Dynamically In Grid
Figure1: Change Themes Dynamically In Grid

Cool, so grid is loaded. Now need to add a select control in which we are going to load theme names so that user can select the theme and apply. Is that fine?

  1. <select id="selectOptions" onchange="applyNewCSS()">
  2. <option value="0">Select Template</option>
  3. <option value="metro">metro</option>
  4. <option value="office">office</option>
  5. <option value="orange">orange</option>
  6. <option value="energyblue">energyblue</option>
  7. <option value="darkblue">darkblue</option>
  8. <option value="shinyblack">shinyblack</option>
  9. <option value="lightness" selected="selected">lightness</option>
  10. <option value="android">android</option>
  11. </select>
The next thing is we need to add the CSS links to the page, here I am going to add some of the CSS references as follows.
  1. <link href="JQXItems/jqwidgets/styles/jqx.darkblue.css" rel="stylesheet" title="darkblue" />
  2. <link href="JQXItems/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet" title="energyblue" />
  3. <link href="JQXItems/jqwidgets/styles/jqx.metro.css" rel="stylesheet" title="metro" />
  4. <link href="JQXItems/jqwidgets/styles/jqx.metrodark.css" rel="stylesheet" title="metrodark" />
  5. <link href="JQXItems/jqwidgets/styles/jqx.office.css" rel="stylesheet" title="office" />
  6. <link href="JQXItems/jqwidgets/styles/jqx.ui-darkness.css" rel="stylesheet" title="ui-darkness" />
  7. <link href="JQXItems/jqwidgets/styles/jqx.ui-le-frog.css" rel="stylesheet" title="ui-le-frog" />
  8. <link href="JQXItems/jqwidgets/styles/jqx.ui-lightness.css" rel="stylesheet" title="ui-lightness." />
  9. <link href="JQXItems/jqwidgets/styles/jqx.ui-sunny.css" rel="stylesheet" title="ui-sunny" />
Have you noticed that we are calling the function applyNewCSS in the on change event of the select control. So next thing we will add that function.
  1. function applyNewCSS() {
  2. var css = $.trim($("#selectOptions").val());
  3. if (css == 'metro') {
  4. $("#jqxgrid").jqxGrid({
  5. theme: 'metro';
  6. });
  7. } else if (css == 'metrodark') {
  8. $("#jqxgrid").jqxGrid({
  9. theme: 'metrodark';
  10. });
  11. } else if (css == 'office') {
  12. $("#jqxgrid").jqxGrid({
  13. theme: 'office';
  14. });
  15. } else if (css == 'orange') {
  16. $("#jqxgrid").jqxGrid({
  17. theme: 'orange';
  18. });
  19. } else if (css == 'energyblue') {
  20. $("#jqxgrid").jqxGrid({
  21. theme: 'energyblue';
  22. });
  23. } else if (css == 'darkblue') {
  24. $("#jqxgrid").jqxGrid({
  25. theme: 'darkblue';
  26. });
  27. } else if (css == 'black') {
  28. $("#jqxgrid").jqxGrid({
  29. theme: 'black';
  30. });
  31. } else if (css == 'shinyblack') {
  32. $("#jqxgrid").jqxGrid({
  33. theme: 'shinyblack';
  34. });
  35. } else if (css == 'lightness') {
  36. $("#jqxgrid").jqxGrid({
  37. theme: 'lightness';
  38. });
  39. } else if (css == 'ui-le-frog') {
  40. $("#jqxgrid").jqxGrid({
  41. theme: 'ui-le-frog';
  42. });
  43. } else if (css == 'ui-darkness') {
  44. $("#jqxgrid").jqxGrid({
  45. theme: 'ui-darkness';
  46. });
  47. } else if (css == 'ui-sunny') {
  48. $("#jqxgrid").jqxGrid({
  49. theme: 'ui-sunny';
  50. });
  51. } else if (css == 'android') {
  52. $("#jqxgrid").jqxGrid({
  53. theme: 'android';
  54. });
  55. }
  56. }
So we can add the theme to the grid as $(“#jqxgrid”).jqxGrid({ theme: ‘theme name’ });

Here we are applying the theme to the grid according to the user selection. Oops, we forgot one thing. If you apply CSS style sheet directly, the styles won’t get applied in the page content. For that we need to disable the remaining style sheets and enable the selected one alone.

The following code will do that magic:
  1. var i, link_tag;
  2. for (i = 0, link_tag = document.getElementsByTagName("link"); i < link_tag.length; i++)
  3. {
  4. if ((link_tag[i].rel.indexOf("stylesheet") != -1) && link_tag[i].title)
  5. {
  6. link_tag[i].disabled = true;
  7. if (link_tag[i].title == css)
  8. {
  9. link_tag[i].disabled = false;
  10. }
  11. }
  12. set_cookie('style', css, 30);
  13. }
We are finding all the link reference and find out whose rel property has the word ‘stylesheet’. Now it is time to see how it woks.

Change Themes Dynamically In Grid
Figure 2: Change Themes Dynamically In Grid

Change Themes Dynamically In Grid
Figure 3: Change Themes Dynamically In Grid

You can see that the grid themes are changing according to the user selection of theme.That’s all we have done it.

Complete Code
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Change Themes Dynamically In Grid - Sibeesh Passion</title>
  5. <script src="jquery-1.9.1.js"></script>
  6. <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
  7. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
  8. <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
  9. <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
  10. <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
  11. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
  12. <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
  13. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
  14. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
  15. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
  16. <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
  17. <link href="JQXItems/jqwidgets/styles/jqx.darkblue.css" rel="stylesheet" title="darkblue" />
  18. <link href="JQXItems/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet" title="energyblue" />
  19. <link href="JQXItems/jqwidgets/styles/jqx.metro.css" rel="stylesheet" title="metro" />
  20. <link href="JQXItems/jqwidgets/styles/jqx.metrodark.css" rel="stylesheet" title="metrodark" />
  21. <link href="JQXItems/jqwidgets/styles/jqx.office.css" rel="stylesheet" title="office" />
  22. <link href="JQXItems/jqwidgets/styles/jqx.ui-darkness.css" rel="stylesheet" title="ui-darkness" />
  23. <link href="JQXItems/jqwidgets/styles/jqx.ui-le-frog.css" rel="stylesheet" title="ui-le-frog" />
  24. <link href="JQXItems/jqwidgets/styles/jqx.ui-lightness.css" rel="stylesheet" title="ui-lightness." />
  25. <link href="JQXItems/jqwidgets/styles/jqx.ui-sunny.css" rel="stylesheet" title="ui-sunny" />
  26. <script type="text/javascript">

  28. function applyNewCSS()
  29. {
  30. var css = $.trim($("#selectOptions").val());
  31. var i, link_tag;
  32. for (i = 0, link_tag = document.getElementsByTagName("link"); i < link_tag.length; i++)
  33. {
  34. if ((link_tag[i].rel.indexOf("stylesheet") != -1) && link_tag[i].title)
  35. {
  36. link_tag[i].disabled = true;
  37. if (link_tag[i].title == css)
  38. {
  39. link_tag[i].disabled = false;
  40. }
  41. }
  42. }
  43. if (css == 'metro')
  44. {
  45. $("#jqxgrid").jqxGrid(
  46. {
  47. theme: 'metro'
  48. });
  49. }
  50. else if (css == 'metrodark')
  51. {
  52. $("#jqxgrid").jqxGrid(
  53. {
  54. theme: 'metrodark'
  55. });
  56. }
  57. else if (css == 'office')
  58. {
  59. $("#jqxgrid").jqxGrid(
  60. {
  61. theme: 'office'
  62. });
  63. }
  64. else if (css == 'orange')
  65. {
  66. $("#jqxgrid").jqxGrid(
  67. {
  68. theme: 'orange'
  69. });
  70. }
  71. else if (css == 'energyblue')
  72. {
  73. $("#jqxgrid").jqxGrid(
  74. {
  75. theme: 'energyblue'
  76. });
  77. }
  78. else if (css == 'darkblue')
  79. {
  80. $("#jqxgrid").jqxGrid(
  81. {
  82. theme: 'darkblue'
  83. });
  84. }
  85. else if (css == 'black')
  86. {
  87. $("#jqxgrid").jqxGrid(
  88. {
  89. theme: 'black'
  90. });
  91. }
  92. else if (css == 'shinyblack')
  93. {
  94. $("#jqxgrid").jqxGrid(
  95. {
  96. theme: 'shinyblack'
  97. });
  98. }
  99. else if (css == 'lightness')
  100. {
  101. $("#jqxgrid").jqxGrid(
  102. {
  103. theme: 'lightness'
  104. });
  105. }
  106. else if (css == 'ui-le-frog')
  107. {
  108. $("#jqxgrid").jqxGrid(
  109. {
  110. theme: 'ui-le-frog'
  111. });
  112. }
  113. else if (css == 'ui-darkness')
  114. {
  115. $("#jqxgrid").jqxGrid(
  116. {
  117. theme: 'ui-darkness'
  118. });
  119. }
  120. else if (css == 'ui-sunny')
  121. {
  122. $("#jqxgrid").jqxGrid(
  123. {
  124. theme: 'ui-sunny'
  125. });
  126. }
  127. else if (css == 'android')
  128. {
  129. $("#jqxgrid").jqxGrid(
  130. {
  131. theme: 'android'
  132. });
  133. }
  134. }
  135. $(document).ready(function()
  136. {
  137. // prepare the data
  138. var data = {
  139. datatype: "json",
  140. datafields: [
  141. {
  142. "name": "AreaCode",
  143. "type": "string"
  144. },
  145. {
  146. "name": "Revenue",
  147. "type": "number"
  148. }],
  149. url: "jsonData.txt"
  150. };
  151. $("#jqxgrid").jqxGrid(
  152. {
  153. source: data,
  154. columns: [
  155. {
  156. "text": "Area Code",
  157. "dataField": "AreaCode",
  158. "cellsalign": "left",
  159. "cellsformat": "d"
  160. },
  161. {
  162. "text": "Revenue",
  163. "dataField": "Revenue",
  164. "cellsalign": "right",
  165. "cellsformat": "c2"
  166. }],
  167. });
  168. });
  170. </script>
  171. </head>
  172. <body>
  173. <h3>Change Themes Dynamically In Grid - Sibeesh Passion</h3>
  174. <br />
  175. <div id='jqxWidget' style="float: left; width: 99.9%;">
  176. <div id="jqxgrid"></div>
  177. </div>
  178. <br />
  179. <br />
  180. <select id="selectOptions" onchange="applyNewCSS()">
  181. <option value="0">Select Template</option>
  182. <option value="metro">metro</option>
  183. <option value="office">office</option>
  184. <option value="orange">orange</option>
  185. <option value="energyblue">energyblue</option>
  186. <option value="darkblue">darkblue</option>
  187. <option value="shinyblack">shinyblack</option>
  188. <option value="lightness" selected="selected">lightness</option>
  189. <option value="android">android</option>
  190. </select>
  191. </body>
  192. </html>
Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Did you try jQWidget yet? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Please see this article in my blog here.

Your turn. What do you think?

If you have any questions, then please mention it in the comments section.