Select extension with other css style

OnLog

Hi, I have added the select extension to my DataTable, the problem is when I have added the style attribute to my element with background color and font color. When I select/click on a row (with a style already added to the row element), the style from the select is removed so I can not see the selection. You can see here that the row with the grey color is on a row without style attribute, the row with the cyan background color is also selected but it's not shown:

This style attr is dynamicly added based on data from database. Here is part of the code:

var table = {};
                //callback function that configures and initializes DataTables
                function renderTable(data) {
                    var cols = [];
                    var Record = data[0];
                    var keys = Object.keys(Record);

                    keys.forEach(function (k) {
                        cols.push({
                            title: k,
                            data: k
                        });
                    });

                    table = $('#dynamicTableDetailChild').DataTable({
                        columns: cols,
                        order: [[0, "desc"]],
                        rowCallback: function (row, data, displayIndex) {
                            $node = this.api().row(row).nodes().to$();
                            $node.css({ color: data.CD_ForeColor, backgroundColor: data.CD_BackColor });
                        },
                        columnDefs: [
                            { visible: false, targets: [1, 2] }
                        ]
                    });

                    table.rows.add(data).draw();
                    //table.columns([1, 2]).visible(false);
                    var node0 = table.column(0).nodes();
                    $(node0).addClass('details-control');

               }

                var datacall = $.ajax({
                    type: 'GET',
                    url: '/api/getDynamicMainContent/get/',
                    data: { 'procedure': '@subMenu.subProcedure', 'index': index }
                });

                //promise syntax to render after xhr completes
                datacall.done(renderTable);

allan

Sounds like you need to take account of the .selected class on the tr in your custom styling.

If you post a link to a test case showing the issue I'll be able to identify where exactly.

Allan

OnLog

What I did was to make a style table in database and, instead of sending in the color, I send in the class name. This way I can controll everything from database and have the datatable dynamic. So here; most of the job was in the database, so the code is almost the same.

I then added CSS styles based on the style name comming from database. The "select" extension is now working as usual.

table = $('#dynamicTableDetailChild').DataTable({
                        columns: cols,
                        order: [[0, "desc"]],
                        rowCallback: function (row, data, displayIndex) {
                            $node = this.api().row(row).nodes().to$();
                            $node.addClass(data.LineStyle);
                            //$node.css({ color: data.CD_ForeColor, backgroundColor: data.CD_BackColor });
                        },
                        columnDefs: [
                            { visible: false, targets: [1] }
                        ]
                    });