chore: fix html code showing up in column picker & grid menu picker (#…

…768)
6pac · May 13, 2023 · f05f7a5 · f05f7a5
1 parent 6891c36
commit f05f7a5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/controls/slick.columnpicker.js b/controls/slick.columnpicker.js
@@ -151,7 +151,7 @@
 
         const labelElm = document.createElement('label');
         labelElm.htmlFor = `${_gridUid}colpicker-${columnId}`;
-        labelElm.textContent = columnLabel;
+        labelElm.innerHTML = columnLabel;
         liElm.appendChild(labelElm);
         _listElm.appendChild(liElm);
       }
@@ -243,8 +243,8 @@
 
     /** Update the Titles of each sections (command, customTitle, ...) */
     function updateAllTitles(gridMenuOptions) {
-      if (_columnTitleElm && _columnTitleElm.textContent) {
-        _columnTitleElm.textContent = gridMenuOptions.columnTitle;
+      if (_columnTitleElm && _columnTitleElm.innerHTML) {
+        _columnTitleElm.innerHTML = gridMenuOptions.columnTitle;
       }
     }
 

diff --git a/controls/slick.gridmenu.js b/controls/slick.gridmenu.js
@@ -297,7 +297,7 @@
       if (_options.gridMenu && _options.gridMenu.customTitle) {
         _customTitleElm = document.createElement('div');
         _customTitleElm.className = 'title';
-        _customTitleElm.textContent = _options.gridMenu.customTitle;
+        _customTitleElm.innerHTML = _options.gridMenu.customTitle;
         customMenuElm.appendChild(_customTitleElm);
       }
 
@@ -365,7 +365,7 @@
 
         const textElm = document.createElement('span');
         textElm.className = 'slick-gridmenu-content';
-        textElm.textContent = item.title;
+        textElm.innerHTML = item.title;
 
         liElm.appendChild(textElm);
 
@@ -390,7 +390,7 @@
       if (_options.gridMenu && _options.gridMenu.columnTitle) {
         _columnTitleElm = document.createElement('div');
         _columnTitleElm.className = 'title';
-        _columnTitleElm.textContent = _options.gridMenu.columnTitle;
+        _columnTitleElm.innerHTML = _options.gridMenu.columnTitle;
         _menuElm.appendChild(_columnTitleElm);
       }
 
@@ -468,7 +468,7 @@
 
         const labelElm = document.createElement('label');
         labelElm.htmlFor = `${_gridUid}-gridmenu-colpicker-${columnId}`;
-        labelElm.textContent = columnLabel;
+        labelElm.innerHTML = columnLabel;
         liElm.appendChild(labelElm);
         _listElm.appendChild(liElm);
       }
@@ -627,11 +627,11 @@
 
     /** Update the Titles of each sections (command, customTitle, ...) */
     function updateAllTitles(gridMenuOptions) {
-      if (_customTitleElm && _customTitleElm.textContent) {
-        _customTitleElm.textContent = gridMenuOptions.customTitle;
+      if (_customTitleElm && _customTitleElm.innerHTML) {
+        _customTitleElm.innerHTML = gridMenuOptions.customTitle;
       }
-      if (_columnTitleElm && _columnTitleElm.textContent) {
-        _columnTitleElm.textContent = gridMenuOptions.columnTitle;
+      if (_columnTitleElm && _columnTitleElm.innerHTML) {
+        _columnTitleElm.innerHTML = gridMenuOptions.columnTitle;
       }
     }
 

diff --git a/examples/example-checkbox-row-select.html b/examples/example-checkbox-row-select.html
@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
   <link rel="stylesheet" href="examples.css" type="text/css"/>
   <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css"/>
+  <link rel="stylesheet" href="../controls/slick.gridmenu.css" type="text/css"/>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
   <style>
     .slick-cell-checkboxsel {
@@ -84,6 +85,7 @@ <h2>View Source:</h2>
 <script src="../plugins/slick.cellselectionmodel.js"></script>
 <script src="../plugins/slick.rowselectionmodel.js"></script>
 <script src="../controls/slick.columnpicker.js"></script>
+<script src="../controls/slick.gridmenu.js"></script>
 <script src="../slick.formatters.js"></script>
 <script src="../slick.editors.js"></script>
 <script src="../slick.grid.js"></script>
@@ -148,6 +150,7 @@ <h2>View Source:</h2>
     grid2.registerPlugin(checkboxSelector2);
 
     var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
+    var gridMenuControl = new Slick.Controls.GridMenu(columns, grid, options);
 
     grid.onSelectedRowsChanged.subscribe(function (e, args) {
         // debugging to see the active row in response to questions