End group row when using RowGroup

KMiller68

I've added the extension to my project, and defined this, so far:

        rowGroup: {
                    endClassName: 'table-end-group',
                    dataSrc: 'indexName',
                    endRender: function (rows, group) {
                        /*return ' ';*/
                        return ' ';
                    }

The CSS looks like this:

.table-end-group {
    background-color: transparent;
}

I'm trying to simply create a transparent end group row so that it divides a table with several groups, to make it easier to read, but so far the end group row is the same dark shade as the starting row. Am I misunderstanding how this works? What am I doing incorrectly?

allan

The default styling selector has a higher precedence which is why your own style is being overwritten. You can confirm this by "Inspecting" the element in your browser.

Try:

.table-end-group {
    background-color: transparent !important;
}

to give yours a higher priority.

Allan

KMiller68

Thank you. I can't seem to get it completely transparent, but I think that's due to my color choices in the grid itself. I managed it close enough to separate the individual groups.