Inline editing not working with hidden columns

Inline editing not working with hidden columns

ChrisKolliChrisKolli Posts: 28Questions: 8Answers: 0

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)

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • ChrisKolliChrisKolli Posts: 28Questions: 8Answers: 0
    edited April 2021

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

  • ChrisKolliChrisKolli Posts: 28Questions: 8Answers: 0

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

This discussion has been closed.