Inline edit and modify column css

rish16

Hi,

Due to long contents in my table column, I would like to modify specific column css to "no-wrap" when triggers inline edit routine. Don't find which event is best suited to achieve the same .

Appreciate any help on this .

allan

rowCallback is currently the way to do this. There isn't (yet) and update or updated event for cells.

Allan

rish16

rowCallback() seems triggers when data table loads. In my case I still want to load my all columns "wrap" when data table loads. When specific column is clicked for inline edit then I would like to "no-wrap" the column contents for editing and when submit triggers then again go back to "wrap" mode.

allan

Oh I see - use something like:

div.DTE_Inline {
  white-space: nowrap;
}

Allan

rish16

Thanks Allan, How do I apply this class to the specific column when inline edit triggers ?

allan

Probably the best way is to use columns.className to add the required class to the column in question and then just update the CSS selector to reflect the class name you've selected.

Allan

rish16

I thought something like this will work but not happening,

$('#tbl_riskHID').on('click', 'tbody td.editable', function(e)
{

    $('#tbl_HID').DataTable().column( $(this).index()+':visIdx' ).className('my_class')

            editor_hid.inline(this,
            {
                                    "submitOnBlur": true,
                                    "submit": "changed"
             });

})

allan

Is that not throwing an error? There is no column().className() API method.

Did you read through the reference documentation for columns.className I linked to above? It is an initialisation option, not an API method.

Allan