Cell width returning 0

ArielSAdamsNASA

Link to test case: https://jsfiddle.net/t4589bja/
Error messages shown:
Description of problem: I am trying to truncate the text of a cell if the length of the data exceeds the cell width. It seems to work in every demo I created, but does not work when implemented on my project. My project keeps returning 0 as the cell width. This must be dynamic as each cell width is a different number.

kthorngren

I take it the test case you provided does not replicate the issue, correct?

Does the problem happen with columns using columns.render?

Its unclear to me what the screenshot is showing.

Kevin

ArielSAdamsNASA

@kthorngren

The test case does not replicate the issue. I tried to replicate it, but it is working in all demos.

The screenshot is showing that the code is returning 0 as the cell width.

How would I use columns.render?

colin

You could do something like this, where the strings are truncated: http://live.datatables.net/yojadaba/1/edit

Colin

kthorngren

I'm not saying you should use columns.render I'm just asking if you are. If you are then cellData wouldn't contain the cell data as mentioned in the columns.createCell docs.

You are using jQuery width() to get the cell's width. We will need to troubleshoot why jQuery width() is returning 0. To help troubleshoot this we will need to see the problem.

Is the table hidden when Datatables is initilized?

Kevin

ArielSAdamsNASA

@kthorngren

I am not using columns.render.

There is one table that is not hidden. Within that table is one column that is not hidden as well that returns 9.225 when the column width is actually set to 550px. The rest of the columns are hidden using column visibility and they return 0.

There is a second datatables that is hidden and shown on a button click. All of the columns of this table returns 0.

ArielSAdamsNASA

@colin

I like your suggested feature. Just one problem is that when implementing it, the width of the column is ignored that I set using: { "width": "450px", "targets": 1 }.

kthorngren

The problem is the columns.createdCell is executed while the cells are hidden - in both cases. columns.createdCell runs only once. My rowCallback is the callback to use since it will run each time the row is drawn. Not sure if you will need to use the column-visibility event to force a table draw, by using draw(), to have the rowCallback run when a column is made visible.

Also when the table is made visible use columns.adjust() to recalculate the column widths and redraw the table - executing rowCallback.

Kevin

ArielSAdamsNASA

@kthorngren

How would I use rowCallback in my example, if it does not include cell only row and data? Could you provide a jsfiddle?

colin

rowCallback contains the full data for the row - there are a couple of examples on that reference page that should get you going,

Colin

ArielSAdamsNASA

@colin I decided to use your suggestion, but it does not work on hidden columns. I have to refresh the page for it to work after selecting a hidden column to appear.

I tried using the following code, but cannot get it to work.

$(".truncate").on("click", function() {
var index = $(this).index() + 1;
$('table tr td:nth-child(' + index + ')').toggleClass("truncate");
$('#lessons').DataTable().columns.adjust().draw();
});

ArielSAdamsNASA

@colin

Here is a jsfiddle: http://live.datatables.net/yojadaba/32/edit

When clicking Name in column visibility and then trying to expand the column, it does not work.

kthorngren

You probably need to use delegated events as described in this example. I updated Colin's example to show this:
http://live.datatables.net/yojadaba/35/edit

Note the use of one class for the styling and another for the click event.

Kevin

ArielSAdamsNASA

@kthorngren

For your example, how would you add a tooltip to show text on hover only for rows that have ellipsis? I know I can use <td title="example">, but this would show for all rows.

http://live.datatables.net/yojadaba/38/

kthorngren

I would look at using rowCallback and check for the truncate class being set. If it is and the data length is greater than the truncate length then add the tooltip. I don't have the exact steps for this without building it out.

Kevin

ArielSAdamsNASA

@kthorngren

http://live.datatables.net/yojadaba/40/

So far, I am trying to test the if statement. If the data contains the class truncate, then remove the attribute title. Unfortunately, the tooltip still shows when hovering on the Position column for Ashton Cox.

kthorngren

There are a few problems with your test case but the biggest is you want to use the row parameter instead of data to get the actual cell. I wasn't familiar with how to determine if the text-overflow: ellipsis is applied so I found this SO Thread and tried one of the techniques. It seems to work here:
http://live.datatables.net/somahiju/1/edit

Will leave it to you to test and update the ellipsis detection as needed.

Kevin