Row Highlight not working
Row Highlight not working
I want to change the color of a row based on the value of a particular column. While this is working for some rows, not all the rows are rendering the css. They will render the css once there's been some interaction with that row (say they've been selected or a value has changed on another column). If there is not interaction, the row doesn't take the css change.
Is there a way to make the css apply to all the rows regardless of the user interaction?
Not sure if i'm being clear. Here is my code:
var dt = $('#datatable').DataTable({
dom: "rti",
ajax: tableAjax,
columns: tableColumns,
retrieve: true,
autoWidth: true,
paging: false,
defaultContent: '',
select: {
style: 'single',
selector: 'td:first-child',
blurable: true,
},
rowCallback: function (row, data) {
if (data.Active == '1') {
$(row).addClass('selected');
}
if (data.Marker == null) {
$(row).addClass('no-marker');
}
}
});
Here is the CSS
.no-marker {
background-color: red !important;
}
The code works, but it only applies it to some rows...not sure exactly why?
Any suggestions? I appreciate in advance.
This question has an accepted answers - jump to answer
Answers
I would say that it is dependent on your data. Without being able to see it happen it would be hard to say. Please provide a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
First thing I would do use use console.log to output some debug info, specifically
console.log( data.Marker );
as the first line in the rowCallback function. Maybe even adddata.Marker == null
to the console.log statement.Another thing to do is use the browsers inspector to see if the
no-marker
class is added where expected. Maybe its being overridden.I'm not sure what the row will look like if both the
selected
class and theno-marker
class are added.Kevin
Kevin,
Thank you for your time and your input. You were right, the value for data.Marker changed from null to "", and this is why it wasn't hitting the if block.
Thank you so much for your help!!