Show the form-control and form-select styles when not selected.

HollyL

I am using the inline editor options, the user wants the drop-down select arrow and input box border for the text input field to show even when not selected so they know that they can change it.

I am able to add those in by adding the class into the js for my datatable instance, however it shows for the th header as well.

Is there a better way to do this so it doesn't apply to the header?

            {
                "data": "LASTLOAD", //Last Load
                type:  "select",
                class: "form-select",
                options: [
                    { label: "No ", value: "N" },
                    { label: "Yes",  value: "Y" }
                ],
                render: function ( data, type, row, e) {
                    lastopt = '';
                    if ((row.LASTLOAD) === 'Y'){
                        lastopt = 'Yes';
                    }
                    else {
                        lastopt ='No';
                    }
                    return lastopt;
                }

            },

            {
                "data": "ACRESR", //Acres Remaining
                    type: "input",
                    class: "form-control"
             }

allan

Could you modify the CSS so it doesn't apply to the thead, but just the tbody (i.e. add an extra selector)? Or are you using Bootstrap here (The class names suggest you might be). In which case, you might need to add thead styles to remove those extra ones...

One possible alternative is to use columns.createdCell to add the call.

Allan

HollyL

Yes sorry I forgot to mention I was using bootstrap.

The columns.createdCell is what worked much better. Thank you Allan!

                 {
                "targets": [5],
                "createdCell": function (td, cellData, rowData, row, col) {
                    $(td).addClass('form-control form-controlAcresR dataTableAcresR');
                  }