Access td element from within columnDefs render

vismark

I am populating a cell with a json which contains the infos to color a cell (something like {"color":"#000","text":"demo cell content"}). In the columnDefs I am targeting this column so that I can perform a custom rendering like this:

columnDefs.push({
    targets: [column index],
    render: function (data, type, row) {
        return [custom rendered content];
    }
});

How can i access the td that is being rendered to assign the background-color style to the whole cell and not only to its content?

colin

Hi @vismark ,

The columns.render function isn't the place to do that, since if the column was reordered, the colour would then be in the wrong place. You need to apply that styling in rowCallback as in this example here.

Cheers,

Colin

vismark

Hi @colin,
I'm already using the method I've posted without any reorder issue...

Moreover, using rowCallback would mean to manually render all the shown cells each time the table gets redrawed right?

MSLtd

Hello @vismark - To assign the colour to the whole cell rather than just the text, your style string should be:

{"background-color":"#000","text":"demo cell content"}

The reason for this, is that in CSS (styling) color is text colour and background-color is the colour of the container.

And as @colin says, you should be using rowCallback to apply the styling.

rowCallback is called for every row that is drawn when the table redraws - and supplies the rows reference as an argument. For information about formatting the cells colour check out the examples at the rowCallback documentation.

Hope this helps - D

vismark

Hi @MSLtd

"color" is just the name of the object attribute, not the CSS rule name. Of course I'm using "background-color" rule once rendered.

As per my last answer, I'm worried about performance concernings if I use "rowCallback" instead of "columns.render": rowCallback runs only for the shown rows, but it runs at every table redraw. Data in that column are not subjected to change so I would prefer to render all the rows at once and then forget about it. Am I wrong about this?

MSLtd

Hi @vismark ,
So that I can better understand how your rendering system works, could you paste the function you use in the columns columns.render.
Cheers - y

vismark

@MSLtd I've posted an example in the first post. If you can be more specific on what you want to see, I can post it...

allan

How can i access the td that is being rendered to assign the background-color style to the whole cell and not only to its content?

Use columns.createdCell for that. The rendering functions don't always have access to the DOM cells, so I would suggest not accessing them in there (it is intentionally quite difficult to do!).

Allan

shrektan

columns.createdCell can't work for the responsive plugin. I mean when the cell is hidden (under the green button), its content won't display the expected change. But column.render allows me to do that, except it doesn't work for CSS style.

colin

@shrektan We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

shrektan

@colin I've created a test case. You can see that the Column "Start Date" won't change when the column is hidden due to the Responsive Extension.

The test case:

http://live.datatables.net/dozefilo/1/edit

colin

Ah, I see, thanks for the test case. The way to do that would be to use a class, however, there's an earlier thread that said that's not implemented yet. I've added this thread to that enhancement, and I'll report back here when there's an update.

Colin

allan

I've committed the change to Responsive which means classes will be copied over to the child elements created by Responsive. That will be included in the 2.2.4 release of Responsive later this week.

Allan

allan

Colin just pointed out to me that my change doesn't actually fix the issue shown in your test case. You aren't using class names for the column, so my change doesn't make any difference.

Indeed, columns.createdCell does not and should not be called on the elements created by Responsive.

For the use case here you would use columns.className to add a class to style the contents red and also a rendering function to add the prefix (columns.render).

Allan