Select extension with other css style

Select extension with other css style

OnLogOnLog Posts: 3Questions: 2Answers: 1

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);

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 48,282Questions: 1Answers: 6,967 Site admin

    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

  • OnLogOnLog Posts: 3Questions: 2Answers: 1
    Answer ✓

    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] }
                            ]
                        });
    
    
Sign In or Register to comment.