Use arrays to set className for multiple indentures in RowGroup

Use arrays to set className for multiple indentures in RowGroup

Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10

First -- RowGroup had no category here in the forum!

Anyway, when setting rowGroup.className for a multiple-level RowGroup, the classes are applied to all the levels.

Would like to have an ability to set different classes for each level using arrays:

rowGroup: {
        dataSrc: [
                "first-level",
                "second-level"
                . . .
        ],
    className: [
        ["first-level-class", "another-first-level-class"],
        ["second-level-class", "another-second-level-class"],
        . . .
    ]
}

Something similar should be implemented with rowGroup.startClassName, rowGroup.endClassName, and rowGroup.emptyDataGroup as well.

Replies

  • colincolin Posts: 15,177Questions: 1Answers: 2,590
    edited July 2022

    I'm not sure if you've noticed, but there are built in classes at each level - "dtrg-level-x" - would you be able to use that?

    Colin

  • Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10

    Thanks, @colin -- I could, but I'm using Bootstrap and was hoping for a simple way to apply an existing class from a framework to a group row instead of doing custom css to modify the "dtrg-level-x".

    Another issue is that if I use className at all, then all those classes are applied to all row groups although I might only want them applied to a specific level.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    I thnk maybe what Colin is suggesting is to use the group level classname (dtrg-level-x) is the selector for something like jQuery addClass(). I would look at doing this in the draw event.

    Kevin

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    I was thinking about it and maybe Colin wasn't suggesting the above. Also the draw event might fire before the rowGroup rows are inserted into the page. If so then use rowGroup.startRender and/or rowGroup.endRender to apply the class based on the level parameter.

    Kevin

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited July 2022

    This example shows how to add a class based on the group level:
    http://live.datatables.net/hituyela/1/edit

    Depending on the Bootstrap CSS it may or may not override the rowGroup CSS. For example remove !important from the CSS in my example and it won't override.

    BTW, the draw event fires before Datatables inserts the rowGroup rows so my first suggestion won't work.

    Kevin

  • Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10

    Thanks, Kevin -- great example and I'll definitely be referencing this!

    However the required use of !important in the custom css highlights the need for a different approach when it comes to adding classes from a css framework.

    For now I'll end up just removing the preset dtrg-level-x class and adding the Bootstrap classes in startRender, but I'm keeping my fingers crossed for a long term solution along the lines of what I'm proposing!

Sign In or Register to comment.