Use arrays to set className for multiple indentures in RowGroup

Loren Maxwell

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.

colin

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 Maxwell

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.

kthorngren

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

kthorngren

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

kthorngren

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 Maxwell

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!