Eclipse Scout Neon table cell mouseover - row

Question

I would like to know how to achieve mouseover on a cell, if a column is too short for full text.
So, if I have column with fix width, and text is too long, how to present whole text with mouseover in a cell.

Answer 1

You can dynamically add a mouse over tooltip on any cell by overriding the
execDecorateCell(Cell view, ITableRow row, IColumn<?> col) method in AbstractTable and setting your tooltip text like
#Override
protected void execDecorateCell(Cell view, ITableRow row, IColumn<?> col) {
super.execDecorateCell(view, row, col);
view.setTooltipText("Hi there: " + view.getText());
}
Unfortunately, this does not consider if your text length exceeds the length of your column/cell. It will set the tooltip text in any case! So far, I am not sure, whether (or how) it is possible to calculate (in pixels?), if the actual string length inside a cell exceeds ones column length. Maybe you could try something, that takes the actual string length into account (java.lang.String.length()) and only provide a tooltip if a certain length is given.
Let me know, if this is works for you!
Best regards,
Matthias

Answer 2

The tooltip for truncated text in a table cell is currently only shown if it is not possible to resize the column. This is done by purpose because the tooltip may be very annoying. The code responsible for this is in the file Table.js:
scout.Table.prototype._isTruncatedCellTooltipEnabled = function(column) {
return !this.headerVisible || column.fixedWidth;
};
If you don't like this behaviour, you could adjust the JavaScript code. There are mainly two ways for doing this:
Replace the original function
Extend the table and override the function
With the first approach you replace the actual function, so everytime a scout.Table gets created this function is used. With the second approach you need to make sure your new table is used. In order to do this you need to specify a mapping between the object type and the constructor which will be used whenever an object should be created using scout.create(objectType). This is normally done by convention, so if you write scout.create('Table') a new scout.Table will be created. Because you now want to create a custom table you need to add the mapping to scout.objectFactories.
For me, the first approach feels more like patching, whereas the second one is a cleaner solution. The advantage of the second solution is that the original object stays untouched and you could, at least theoretically, still create regular tables. That's why I suggest to use the second approach. But in the end it is probably a matter of taste.
In both ways, you need to create one or more JavaScript files, register them in yourproject-module.js and include this module in your index.html. The files could look like this:
Approach 1:
patches.js
scout.Table.prototype._isTruncatedCellTooltipEnabled = function(column) {
return true;
};
Approach 2
CustomTable.js
scout.CustomTable = function() {
scout.CustomTable.parent.call(this);
};
scout.inherits(scout.CustomTable, scout.Table);
/**
* #override
*/
scout.CustomTable.prototype._isTruncatedCellTooltipEnabled = function(column) {
return true;
};
objectFactories.js
scout.objectFactories = $.extend(scout.objectFactories, {
'Table': function() {
return new scout.CustomTable();
}
});
Remember: The scout JavaScript code is not api and may change anytime. You won't get compile errors if the function will be renamed as you are used to with java. So before adding a lot of custom JavaScript code to adjust the default behaviour you should consider opening a bug first so that it can be fixed in Scout. It could help others as well.