Row Highlight not working

Row Highlight not working

lolopololopo Posts: 4Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 21,344Questions: 26Answers: 4,954
    edited September 2019 Answer ✓

    The code works, but it only applies it to some rows...not sure exactly why?

    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 add data.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 the no-marker class are added.

    Kevin

  • lolopololopo Posts: 4Questions: 2Answers: 0

    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!!

This discussion has been closed.