Conditional Formatting for hidden columns when using Responsive

MadBoyEvo

Link to test case:

https://jsfiddle.net/hqkteLrj/

Description of problem:
I've been a very happy user of DataTables with conditional formatting. However, it has one flaw where when the columns are visible the formatting is applied correctly, but once it goes hidden and you press + to see the rest of the data, the data doesn't apply there. Which makes sense, because it seems it's a list rather than a column/row.

Is there an option to highlight it there anyways? Any examples of that?

kthorngren

You can use responsive.details.renderer to format the child rows. See this example.

Kevin

MadBoyEvo

Am I reading this correctly that you can replace ul/li with tr/td and it would automatically apply formatting there - or I would still need to apply formatting within that custom renderer?

colin

It depends on the layout, it may need some formatting. This example may help, it's keep the data in the same format (number of columns, widths, etc.) as the main table, so the styling is all the same,

Colin

MadBoyEvo

I am not sure we understand each other.

http://live.datatables.net/geyumizu/304/edit

I am highlighting BasePriority column values if it matches certain condition. The value is really far column so it's almost always hidden unless you have large screen.

I'm trying to get rowCallback to work within renderer for those hidden columns. How would I do that?

 "responsive": {
                                details: {
                                    renderer: function (api, rowIdx, columns) {
                                        var data = $.map(columns, function (col, i) {
                                            return col.hidden ?
                                                '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                                                '<td>' + col.title + '</td> ' +
                                                '<td>' + col.data + '</td>' +
                                                '</tr>' :
                                                '';
                                        }).join('');

                                        return data ?
                                            $('<table/>').append(data) :
                                            false;
                                    }
                                }
                            },
                            "rowCallback": function (row, data) {
                                var css = {
                                    "background-color": "#ff0000"
                                }; var failCss = undefined; var conditionsContainer = [{
                                    "logic": "AND",
                                    "conditions": [{
                                        "columnName": "BasePriority",
                                        "columnId": 23,
                                        "operator": "gt",
                                        "type": "number",
                                        "value": "5",
                                        "valueDate": "",
                                        "dataStore": "HTML",
                                        "caseSensitive": false,
                                        "dateTimeFormat": "",
                                        "reverseCondition": false
                                    }]
                                }]; dataTablesConditionalFormatting(row, data, conditionsContainer, [23], css, failCss);
                            }

kthorngren

You need to add some logic to the map loop in the responsive.details.renderer. See this updated example:

EDIT: Updated link:
http://live.datatables.net/meyapuji/1/edit

Basically if ( col.hidden && i == 23 ) then run the code to calculate the condition to apply. Your dataTablesConditionalFormatting() function will need some refactoring to know whether the CSS is applied to the row or to the responsive data. Instead, would consider having the function return the desired styling then in rowCallback or responsive.details.renderer apply the styling to the appropriate elements.

Kevin