narentera / flexigrid

Automatically exported from code.google.com/p/flexigrid
0 stars 0 forks source link

Cell Contents Wider than the column needs mouseover #120

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
What steps will reproduce the problem?
1. Resize any column so that the column width is < the contents width.
2. Place mouse over the text which is truncated.

What is the expected output? 
It would be great to have a title attribute set on these cells so that the full 
contents can be viewed when mousing over.  The title attribute should be 
updated so that it is removed when the entire contents is visible.

What do you see instead?
No mouseover text.  Cell is still truncated and can't view the whole text.

What version of the product are you using? On what operating system?
Windows with Chrome/FF

Please provide any additional information below.

Original issue reported on code.google.com by scott.ke...@gmail.com on 23 Mar 2012 at 4:49

GoogleCodeExporter commented 8 years ago
Here's a patch that can fix this:

Index: js/flexigrid.js
===================================================================
--- js/flexigrid.js (revision 14)
+++ js/flexigrid.js (working copy)
@@ -44,6 +44,7 @@
            autoload: true,
            blockOpacity: 0.5,
            preProcess: false,
+           addTitleToCell: false, // add a title attr to cells with truncated contents
            onDragCol: false,
            onToggleCol: false,
            onChangeSort: false,
@@ -212,7 +213,9 @@
                    $('th:visible div:eq(' + n + ')', this.hDiv).css('width', nw);
                    $('tr', this.bDiv).each(
                        function () {
-                           $('td:visible div:eq(' + n + ')', this).css('width', nw);
+                           var $tdDiv = $('td:visible div:eq(' + n + ')', this);
+                           $tdDiv.css('width', nw);
+                           g.addTitleToCell($tdDiv);
                        }
                    );
                    this.hDiv.scrollLeft = this.bDiv.scrollLeft;
@@ -627,6 +630,7 @@
                        if (pth.process) pth.process(tdDiv, pid);
                    }
                    $(this).empty().append(tdDiv).removeAttr('width'); //wrap content
+                   g.addTitleToCell(tdDiv);
                });
            },
            getCellDim: function (obj) {// get cell prop for editable event
@@ -682,6 +686,28 @@
                    }
                });
            },
+           //Add title attribute to div if cell contents is truncated
+           addTitleToCell: function(tdDiv) {
+               if(p.addTitleToCell) {
+                   var $span = $('<span />').css('display', 'none'),
+                       $div = (tdDiv instanceof jQuery) ? tdDiv : $(tdDiv),
+                       div_w = $div.outerWidth(),
+                       span_w = 0;
+                   
+                   $('body').children(':first').before($span);
+                   $span.html($div.html());
+                   $span.css('font-size', '' + $div.css('font-size'));
+                   $span.css('padding-left', '' + $div.css('padding-left'));
+                   span_w = $span.innerWidth();
+                   $span.remove();
+                   
+                   if(span_w > div_w) {
+                       $div.attr('title', $div.text());
+                   } else {
+                       $div.removeAttr('title');
+                   }
+               }
+           },
            pager: 0
        };
        if (p.colModel) { //create model if any

Original comment by scott.ke...@gmail.com on 23 Mar 2012 at 11:55