tappatappa Posted May 13, 2016 Share Posted May 13, 2016 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 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 16, 2016 Share Posted May 16, 2016 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. 1 Quote Link to comment Share on other sites More sharing options...
tappatappa Posted May 16, 2016 Author Share Posted May 16, 2016 I will try this. Thanks. Quote Link to comment Share on other sites More sharing options...
tappatappa Posted May 16, 2016 Author Share Posted May 16, 2016 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? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 19, 2016 Share Posted May 19, 2016 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. Quote Link to comment Share on other sites More sharing options...
molla2005b Posted August 1, 2016 Share Posted August 1, 2016 thank Delphi Developer it was very usefull for me Best regards. Quote Link to comment Share on other sites More sharing options...
arilotta Posted December 21, 2018 Share Posted December 21, 2018 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 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 21, 2018 Share Posted December 21, 2018 Hi, Sorry, what problem do you have? Can you show your problem with a simple testcase? Quote Link to comment Share on other sites More sharing options...
arilotta Posted December 27, 2018 Share Posted December 27, 2018 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 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 27, 2018 Share Posted December 27, 2018 7 minutes ago, arilotta said: Please let me know Hi, Thanks for the testcase. I will analyze and let you know. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 27, 2018 Share Posted December 27, 2018 UniMEDComponent ? Quote Link to comment Share on other sites More sharing options...
arilotta Posted December 27, 2018 Share Posted December 27, 2018 Sorry, please consider the attached version ... TestHints.zip Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 27, 2018 Share Posted December 27, 2018 Ok, I will check Quote Link to comment Share on other sites More sharing options...
Sherzod Posted December 27, 2018 Share Posted December 27, 2018 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; Quote Link to comment Share on other sites More sharing options...
arilotta Posted December 27, 2018 Share Posted December 27, 2018 Hi Sherzod, it works perfectly! Thank you ! Quote Link to comment Share on other sites More sharing options...
eduardosuruagy Posted December 11, 2019 Share Posted December 11, 2019 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? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.