Merge pull request #330 from 6pac/feat/formatter-title-attribute

feat(formatter): add toolTip to Formatter with extended object
6pac · Feb 1, 2019 · 0036d8a · 0036d8a
2 parents b74db38 4db4433
commit 0036d8a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/examples/example2-formatters.html b/examples/example2-formatters.html
@@ -18,13  18,13 @@
 
     .green {
       background-color: #aaffaa;
-    }      
     }
     .red {
       background-color: #ff7777;
-    }      
     }
     .orange {
       background-color: #ffbb66;
-    }      
     }
   </style>
 </head>
 <body>
@@ -38,7  38,7 @@ <h2>Demonstrates:</h2>
       <ul>
         <li>width, minWidth, maxWidth, resizable, cssClass column attributes</li>
         <li>custom column formatters</li>
-        <li>an extended formatter returning an object { text , removeClasses, addClasses } rather than a string, allowing adding and removing css classes from the cell</li>
         <li>an extended formatter returning an object { text, removeClasses, addClasses, toolTip } rather than a string, allowing adding and removing css classes from the cell. You can also optionally use toolTip to fill the "title" attribute</li>
       </ul>
         <h2>View Source:</h2>
         <ul>
@@ -48,35  48,37 @@ <h2>View Source:</h2>
   </tr>
 </table>
 
-<input type=text>
-
 <script src="../lib/firebugx.js"></script>
 
 <script src="../lib/jquery-1.11.2.min.js"></script>
 <script src="../lib/jquery-ui-1.11.3.min.js"></script>
 <script src="../lib/jquery.event.drag-2.3.0.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../slick.editors.js"></script>
 <script src="../slick.formatters.js"></script>
 <script src="../slick.grid.js"></script>
 
 <script>
-   // a standard formatter returns a string 
    // a standard formatter returns a string
   function formatter(row, cell, value, columnDef, dataContext) {
       return value;
   }
 
-  // an extended formatter returns an object { text , removeClasses, addClasses }
   // an extended formatter returns an object { text, removeClasses, addClasses, toolTip }
   // the classes are removed and then added during an update, or just added on cell creation
   function statusFormatter(row, cell, value, columnDef, dataContext) {
       var rtn = { text: value, removeClasses: 'red orange green' };
       if (value !== null || value !== "") {
         if (value < 33) {
           rtn.addClasses = "red";
           rtn.toolTip = "danger zone";
         } else if (value < 66) {
           rtn.addClasses =  "orange";
           rtn.toolTip = "might want to look at it";
         } else {
           rtn.addClasses =  "green";
           rtn.toolTip = "all good";
         }
       }
       return rtn;
@@ -88,15  90,15 @@ <h2>View Source:</h2>
     {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter},
     {id: "duration", name: "Duration", field: "duration"},
     {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
-    {id: "status", name: "Status", field: "percentComplete", width: 50, resizable: false, formatter: statusFormatter},
     {id: "status", name: "Status", field: "percentComplete", width: 50, resizable: false, formatter: statusFormatter, editor: Slick.Editors.Text },
     {id: "start", name: "Start", field: "start", minWidth: 60},
     {id: "finish", name: "Finish", field: "finish", minWidth: 60},
     {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}
   ];
 
-  
 
   var options = {
-    editable: false,
     editable: true,
     enableAddRow: false,
     enableCellNavigation: true
   };

diff --git a/slick.grid.js b/slick.grid.js
@@ -2593,7  2593,7 @@ if (typeof Slick === "undefined") {
             colspan = ii - i;
           }
         }
-        
 
         // Do not render cells outside of the viewport.
         if (columnPosRight[Math.min(ii - 1, i   colspan - 1)] > range.leftPx) {
           if (!m.alwaysRenderColumn && columnPosLeft[i] > range.rightPx) {
@@ -2657,8  2657,9 @@ if (typeof Slick === "undefined") {
       // get addl css class names from object type formatter return and from string type return of onBeforeAppendCell
       var addlCssClasses = trigger(self.onBeforeAppendCell, { row: row, cell: cell, value: value, dataContext: item }) || '';
       addlCssClasses  = (formatterResult && formatterResult.addClasses ? (addlCssClasses ? ' ' : '')   formatterResult.addClasses : '');
       var toolTip = formatterResult && formatterResult.toolTip ? "title='"   formatterResult.toolTip   "'" : '';
 
-      stringArray.push("<div class='"   cellCss   (addlCssClasses ? ' '   addlCssClasses : '')   "'>");
       stringArray.push("<div class='"   cellCss   (addlCssClasses ? ' '   addlCssClasses : '')   "' "   toolTip   ">");
 
       // if there is a corresponding row (if not, this is the Add New row or this data hasn't been loaded yet)
       if (item) {
@@ -2796,15  2797,18 @@ if (typeof Slick === "undefined") {
     function applyFormatResultToCellNode(formatterResult, cellNode, suppressRemove) {
         if (formatterResult === null || formatterResult === undefined) { formatterResult = ''; }
         if (Object.prototype.toString.call(formatterResult)  !== '[object Object]') {
-            cellNode.innerHTML = formatterResult;
-            return;
           cellNode.innerHTML = formatterResult;
           return;
         }
         cellNode.innerHTML = formatterResult.text;
         if (formatterResult.removeClasses && !suppressRemove) {
-            $(cellNode).removeClass(formatterResult.removeClasses);
           $(cellNode).removeClass(formatterResult.removeClasses);
         }
         if (formatterResult.addClasses) {
-            $(cellNode).addClass(formatterResult.addClasses);
           $(cellNode).addClass(formatterResult.addClasses);
         }
         if (formatterResult.toolTip) {
           $(cellNode).attr("title", formatterResult.toolTip);
         }
     }
 
@@ -3185,7  3189,7 @@ if (typeof Slick === "undefined") {
         if (i <= options.frozenColumn) {
           continue;
         }
-        
 
         // Ignore alwaysRenderedColumns
         if (Array.isArray(columns) && columns[i] && columns[i].alwaysRenderColumn){
           continue;