Jump to content

Overflowing text, Grid cell tooltip?


tappatappa

Recommended Posts

Hello everybody,

 

If a grid cell has too much text, it shows an ellipsis (...) at the end. If this is the case, is it possible to show a tooltip when the cursor is positioned over the cell, in order to display the full data?

 

Bonus: how do you control what is shown in the cell? For instance, how do I show this-> ######## instead of a portion of the actual text?

 

Thanks

Link to comment
Share on other sites

If a grid cell has too much text, it shows an ellipsis (...) at the end. If this is the case, is it possible to show a tooltip when the cursor is positioned over the cell, in order to display the full data?

 

Hi,

 

For now you can try this (perhaps incomplete solution):

UniDBGrid -> ClientEvents -> ExtEvents viewready fn

function viewready(sender, eOpts)
{
    var tm = new Ext.util.TextMetrics();
    sender.view.tip = Ext.create('Ext.tip.ToolTip', {
        target: sender.view.el,
        delegate: sender.view.cellSelector,
        trackMouse: true,
        renderTo: Ext.getBody(),
        listeners: {
            beforeshow: function updateTipBody(tip) {
                gridColums = sender.view.getGridColumns();
                column = gridColums[tip.triggerElement.cellIndex];

                record = sender.view.getRecord(tip.triggerElement.parentNode);

                if (column.dataIndex !== '-1' && (column.getWidth() < (tm.getSize(record.data[parseInt(column.dataIndex)]).width) + 5)) {
                    tip.update(record.data[parseInt(column.dataIndex)]);
                } else {
                    return false;
                }
            }
        }
    });
}

Best regards.

  • Upvote 1
Link to comment
Share on other sites

Precisely what I need! Thanks!

 

I have two more questions:

How do I set the maximum width of the tooltip?

Is it possible to show a different text in the cell (instead of the ellipsis) when the cell is not large enough?

Link to comment
Share on other sites

Is it possible to show a different text in the cell (instead of the ellipsis) when the cell is not large enough?

 

Hi,

 

Need to analyze, of course there is a CSS property: text-overflow which adds an ellipsis

 

For example, but unfortunately works only for FF:

.x-grid-cell-inner {
    padding: 3px 6px 4px;
    text-overflow: ' ->';
}

Best regards.

Link to comment
Share on other sites

  • 2 months later...
  • 2 years later...

I also used this piece of code to show tolltips when text was longer then cell width.

Because I use custom fonts, I added just the following statement (after many attempts) to determine exactly

the real size of the text.

tm.bind(tip.triggerElement.parentNode);
function viewready(sender, eOpts)
{
    var tm = new Ext.util.TextMetrics();
    sender.view.tip = Ext.create('Ext.tip.ToolTip', {
        target: sender.view.el,
        delegate: sender.view.cellSelector,
        trackMouse: true,
        renderTo: Ext.getBody(),
        listeners: {
            beforeshow: function updateTipBody(tip) {
                gridColums = sender.view.getGridColumns();
                column = gridColums[tip.triggerElement.cellIndex];

                record = sender.view.getRecord(tip.triggerElement.parentNode);

                tm.bind(tip.triggerElement.parentNode); /* added this ! */

                if (column.dataIndex !== '-1' && (column.getWidth() < (tm.getSize(record.data[parseInt(column.dataIndex)]).width) + 5)) {
                    tip.update(record.data[parseInt(column.dataIndex)]);
                } else {
                    return false;
                }
            }
        }
    });
}

Unfortunately, with the latest release with EXTJS 6.5, the previous code does not work well anymore, in fact the text width is not computed

precisely anymore. Also with the new properties ShowToolTip for DBGrid columns , the width is not computed correctly, so many times the tooltip is not shown

whereas it should be.

My guess is that, due to the changed DBGrid structure in EXTJS 6.5, the element accessed with "tip.triggerElement.parentNode" is a wrong one.

Does someone have a suggestion ?

Thanks

Andrea

 

Link to comment
Share on other sites

Dear Sherzod, here your are. Please find attached a simple project. Look the two attached images:

it seems that the computed width of the text in grid columns is not accurate.

In image Hint_not _shown the hint should appear, because the text is not completely visible (it is cut).

Just play resizing column PRESTAZIONE, you will find easily the problem.

In the main form OnCreate event you can find the function "function viewready" used to prompt the hint, already reported above in the post.

Please let me know

Thanks !

 

TestHints.zip

Hint_shown.png

Hint_not_shown.png

Link to comment
Share on other sites

1 hour ago, Sherzod said:

Ok, I will check 

Can you try this?:

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  with DBgridLista do
  ClientEvents.ExtEvents.Add
      ('viewready=function viewready(sender, eOpts)'+
       '{'+
       //'   var tm = new Ext.util.TextMetrics(); '+
       '   sender.view.tip = Ext.create(''Ext.tip.ToolTip'', {'+
       '       target: sender.view.el,'+
       '       delegate: sender.view.cellSelector,'+
       '       trackMouse: true,'+
       '       renderTo: Ext.getBody(),'+
       '       listeners: {'+
       '           beforeshow: function updateTipBody(tip) {'+
       '               gridColums = sender.view.getGridColumns();'+
       '               column = gridColums[tip.triggerElement.cellIndex];'+
       '               record = sender.view.getRecord(tip.triggerElement.parentNode);'+
       //'               tm.bind(tip.triggerElement.parentNode); '+ // fondamentale per utilizzare lo stile della cella per determinare dimensione...
       //'               if (column.dataIndex !== ''-1'' && (column.getWidth() < (tm.getSize(record.data[parseInt(column.dataIndex)]).width) + 5)) {'+
       '               if (column.dataIndex !== ''-1'' && (column.getWidth() < (Ext.util.TextMetrics.measure(tip.triggerElement, record.data[parseInt(column.dataIndex)]).width)+5)) {'+
       '                   tip.update(record.data[parseInt(column.dataIndex)]);'+
       '               } else {'+
       '                   return false;'+
       '               }'+
       '           }'+
       '       }'+
       '   });'+
       '}');

end;

 

Link to comment
Share on other sites

  • 11 months later...
On 12/27/2018 at 9:21 AM, Sherzod said:

Can you try this?:


procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  with DBgridLista do
  ClientEvents.ExtEvents.Add
      ('viewready=function viewready(sender, eOpts)'+
       '{'+
       //'   var tm = new Ext.util.TextMetrics(); '+
       '   sender.view.tip = Ext.create(''Ext.tip.ToolTip'', {'+
       '       target: sender.view.el,'+
       '       delegate: sender.view.cellSelector,'+
       '       trackMouse: true,'+
       '       renderTo: Ext.getBody(),'+
       '       listeners: {'+
       '           beforeshow: function updateTipBody(tip) {'+
       '               gridColums = sender.view.getGridColumns();'+
       '               column = gridColums[tip.triggerElement.cellIndex];'+
       '               record = sender.view.getRecord(tip.triggerElement.parentNode);'+
       //'               tm.bind(tip.triggerElement.parentNode); '+ // fondamentale per utilizzare lo stile della cella per determinare dimensione...
       //'               if (column.dataIndex !== ''-1'' && (column.getWidth() < (tm.getSize(record.data[parseInt(column.dataIndex)]).width) + 5)) {'+
       '               if (column.dataIndex !== ''-1'' && (column.getWidth() < (Ext.util.TextMetrics.measure(tip.triggerElement, record.data[parseInt(column.dataIndex)]).width)+5)) {'+
       '                   tip.update(record.data[parseInt(column.dataIndex)]);'+
       '               } else {'+
       '                   return false;'+
       '               }'+
       '           }'+
       '       }'+
       '   });'+
       '}');

end;

 

In this example would have as in the column "Prestazione" I show an image and when clicking on the image show the hint?

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...