Add a message in a row that spans multiple columns
Add a message in a row that spans multiple columns
Bryan_Clauss
Posts: 6Questions: 2Answers: 0
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.
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
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
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 theinitComplete
function at thetable.rows().every...
line. I changed this tothis.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:And the event listener to see if the row with a message has been clicked:
My .message css is nothing fancy:
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