Overflowing text, Grid cell tooltip?

[tappatappa]

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

[Sherzod]

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.

[tappatappa]

I will try this.

Thanks. 

[tappatappa]

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?

[Sherzod]

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.

[molla2005b]

thank Delphi Developer

it was very usefull for me

Best regards.

[arilotta]

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

 

[Sherzod]

Hi,

Sorry, what problem do you have?

Can you show your problem with a simple testcase?

[arilotta]

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

[Sherzod]

7 minutes ago, arilotta said:

Please let me know

Hi,

Thanks for the testcase.

I will analyze and let you know.

[Sherzod]

UniMEDComponent ?

[arilotta]

Sorry, please consider the attached version ... 

TestHints.zip

[Sherzod]

Ok, I will check 

[Sherzod]

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;

 

[arilotta]

Hi Sherzod, it works perfectly!

Thank you !

[eduardosuruagy]

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?