Color extra info child rows

Color extra info child rows

Tripple DeltaTripple Delta Posts: 8Questions: 1Answers: 0

Link to test case:

When clicking on the arrow extra info is shown. But the background color is always white. Is there a way to change that color?

This question has an accepted answers - jump to answer


  • rf1234rf1234 Posts: 2,854Questions: 85Answers: 409

    I would just wrap this in a div-tag and add the style for the background color to that div.
    Maybe something like this could work (haven't tested it):

    // Formatting function for row details - modify as you need
    function format(d) {
        // `d` is the original data object for the row
        return (
           '<div style="background-color:lightblue"> +
            '<dl>' +
            '<dt>Full name:</dt>' +
            '<dd>' +
            '</dd>' +
            '<dt>Extension number:</dt>' +
            '<dd>' +
            d.extn +
            '</dd>' +
            '<dt>Extra info:</dt>' +
            '<dd>And any further details here (images etc)...</dd>' +
            '</dl>' + 
  • kthorngrenkthorngren Posts: 20,777Questions: 26Answers: 4,857
    Answer ✓

    @rf1234 has a good and simple answer. Another option is to use use CSS. If you inspect the parent row you will see the class dt-hasChild is applied when the child is shown. You can use a CSS like this:

    tr.dt-hasChild + tr {
      background-color: green!important;

    Two options to choose from :smile:


  • Tripple DeltaTripple Delta Posts: 8Questions: 1Answers: 0

    Thanks a lot. But I had to change it like this to keep it alternating.

    tr.odd.dt-hasChild + tr {
        background-color: green !important;
Sign In or Register to comment.