Add a message in a row that spans multiple columns

Bryan_Clauss

I would like to be able to add a message in a row that can span multiple columns. The message would be part of my dataset and may be blank (empty and not null). Ideally, I'd like it in the confines of the row it belongs to, and not in a separate row.

Example:

+---------+--------------------+------------+
|Bob      |Bob@mail.com        |01/20/2020  |
+---------+--------------------+------------+
|Fred     |Fred@mail.com       |            |
|  ** Hire Date must be entered  **         |
+---------+--------------------+------------+
|Sally    |                    |04/18/2020  |
|  ** Email must be entered **              |
+---------+--------------------+------------+
|Frank    |Frank@mail.com      |05/15/2020  |
+---------+--------------------+------------+

Sorry for the crappy drawing, but I hope it gets the point across as to what I want.

Thank you.

kthorngren

It would be difficult to display that message in the same row across multiple columns. One option would be to use Child Detail Rows. Take a look at my first example from this thread of how to create and display all the child rows. You can add a conditional to check for the message being blank to determine whether to show the row.

Kevin

Bryan_Clauss

Thank you Kevin. This did what I needed.

For the next person following this post, I noticed/tweaked a few things.

1) The order of including the external JavaScripts is important. Make sure that the jquery-1.9.1.min.js is first.
2) I missed where you were setting a variable to the DataTable (var table = $(#'example').DataTable(...) and this caused an error in the initComplete function at the table.rows().every... line. I changed this to this.api().rows().every... and it worked fine.

I'm using serverside processing and I noticed when I changed to a new page (next xx entries), and then came back to a page with the message, it wouldn't show by default. I used the createdRow call to add a css class to the row that set the background to a light red and used the event listener to listen for that row to be clicked:

createdRow:
    function (row, data, dataIndex) {
        // Check to see if our data has a message to display in the child row
        if ((data.message == null || data.message.trim() === '') == false) {
            $(row).addClass('message');
        }
    },

And the event listener to see if the row with a message has been clicked:

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'tr.message', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass('shown');
        }
    });

My .message css is nothing fancy:

.message {
    background-color: lightsalmon !important;
    cursor: pointer;
}

Bryan_Clauss

I forgot to give credit for the code to change row color. It was based on this post: Changing Row Color at Rendering Time Based on Column Values