Grouping with rendered values not displayed as expected

Grouping with rendered values not displayed as expected

coffeeshotcoffeeshot Posts: 8Questions: 3Answers: 0

Link to test case:
Debugger code (
Error messages shown: None
Description of problem: Hello, I have used the wonderful data-tables over many years, but am stuck getting the current task to work correctly.

In my table for an Event, people are allocated a day and time slot across 3 days, called runDay and runTime, and that is the default sequence of the displayed datatable.

However, peoples’ times may get changed, so my table has two other columns, revisedDay and revisedTime, and if either of these are filled in, they are to overwrite the output to reflect the new sequence. I have used render to overwrite where days/times have changed (shown in red), and they resequence correctly; so far so good.

But I also want to group all the days together with a group break/title. That also works well for the original runDays, but the modified day for S Smithson in example, which shows the day correctly (in blue), but is grouped under the original day (Saturday) and so splits the Sunday events due to its time.

I have tried everything I can think of to correct this, even including Row Grouping, but that did not improve it. That, or I don't understand its implementation properly. The individual columns sequences are correct, it is the group heading that seems wrong.

Of course, it helps that Fri, Sat and Sun are alphabetical, so a string sequence; I did try substituting numbers, but it didn't make a difference.

Having spent days teasing on this, I would be appreciative of anyone who can suggest where I am going wrong.
A link to a test case showing the issue is here :
Thanks, Rob

This question has accepted answers - jump to:


  • kthorngrenkthorngren Posts: 19,149Questions: 26Answers: 4,537
    Answer ✓

    Your code is clever and works in general the problem is being able to access the full row data to see if revisedDay has a value. While this could be possible it might be easier to just use the rowGroup extension. I added the library to your test and made some updates to your rowGroup config. It uses rowGroup.startRender to display the full day.

    Also you have a typo. In this line you have quotes around true:

    "data": "runDay", "visible": "true", //"orderable": false,  // "visible": "false",

    These need to be removed otherwise it will mess up the colspan used by rowGroup.startRender:


  • coffeeshotcoffeeshot Posts: 8Questions: 3Answers: 0

    Kevin, you are a star. Thank you so much for that solution, much neater too. It works really well now.

    I had not picked up on rowGroup startRender as a solution; while there is an example in the documentation, it is more complex than what I seemed to be trying to achieve, so my brain fuzzed out. Your implementation is spot-on, and I shall adopt it.

    Am I right, that you test both day values, and the appropriate one is used in the grouping ? In my original approach, was the displayed DAY column value not holding the value needed by the group gathering process ? (Just trying to understand it).

    Sorry about the typo, that's not in my original code, but slipped in during testing.


  • kthorngrenkthorngren Posts: 19,149Questions: 26Answers: 4,537
    Answer ✓

    This uses a ternary operator to test for a value in revisedDay. If there is a value then revisedDay will be returned otherwise runDay will be returned.

                    rowGroup: {
                        dataSrc: function (row) {
                          return row.revisedDay !== '' ? row.revisedDay : row.runDay;


Sign In or Register to comment.