Inline editing not working with hidden columns

ChrisKolli

Hey guys i got a problem with inline editing.
I have hidden some columns by default and they get shown on click of a button which works but then a problem arose.
When the columns are hidden the editor acts weird.
basically i use this code to open inline and bubble edit:

$('#wochenplan').on( 'click', tbody td:nth-child(10),  tbody td:nth-child(15)', function (e) {
        editor.inline( this, {
            onBlur: 'submit'
        } );
    } );
$('#wochenplan').on( 'click', 'tbody td:nth-child(3)', function (e) {
        editor.bubble( this, [ 'wochenplan.pic', 'wochenplan.p' ],  {
            onBlur: 'submit'
        }  );
    } );

But if columns 3 and 10 are hidden the editor uses column 4 and 11 as if they were 3 and 10 because they now are in those places.

Maybe i could add ids to the cells i want to edit but i dont know how to do that without getting the same problem with the ids
(id for cell 3 getting added to cell 4 if 3 is hidden)

colin

Yep, you could use ids or classes, and that should do the trick. For example, with classes you would add the class with columns.createdCell - see the example at the bottom of that page.

Then you would handle the event for both those cells with

$('#wochenplan').on( 'click', 'tbody td.inlineClass', function (e) {
        editor.inline( this, {
            onBlur: 'submit'
        } );
    } );

Colin

ChrisKolli

That sounds great. but I can't really find out how to do it with the example you provided I don't understand how i can add a class to every cell, I got this:

{
    "targets": '_all',
    "createdCell": function (td, cellData, rowData, row, col) {
        var colIdx = 1;
        $(td).forEach( function() {
            $(td).classList.add("colIdx");
                colIdx + 1;
        });
    }
}

which obviously does not work but i have no clue how to get there.
I need an id or a class thats different for every cell in a given row.
I wouldn't even mind hardcoding them in in the column part of the datatable if that is possible somehow.

colin

Sorry, but thinking about, it can be easier than this - it just needs columns.className, something like this: http://live.datatables.net/vadovole/1/edit

Colin

ChrisKolli

Wow okay. it works now. Thank you very much didn't realise it was that easy XD