find cell from bubble

Bindrid2

given :

       var me = this;
        this.editor.on('open', function (e, type) {
            var edt = me.editor;

            if (type === "bubble") {
                $(document).on('keydown.editor', function (e) {
                       // find current cell
                 });
             }

          });

Is there an easy way to determine which cell the bubble is acting on?
My page has two tables and two editors running.

Thanks,
Scott

allan

Hi Scott,

I think the modifier() method is going to be the answer here. It will return what you passed into bubble() to trigger the edit. If that was a cell, then the cell is returned. Likewise if it was a cell index, etc.

There is ids(), but that is for the row being edited, so in this case that would probably be less useful.

Allan

Bindrid2

Based on that, for arrows and tabbing, I got

    // Activate the bubble editor on click of a table cell
    $('#example').on( 'click', 'tbody td', function (e) {
        editor.bubble(this, { submitOnBlur: true });
    } );

    editor.on("open", function (ev,type) {
        var current = $($("#example").DataTable().rows(editor.ids()).cell(editor.modifier()).node());
 
        if (type === "bubble" || type=== "inline") {
            $(document).on('keydown.editor', function (e) {
                var kc = e.keyCode;
                console.log(kc)
                if (kc === 9 || kc === 37 || kc === 38 || kc === 39 || kc === 40) {
                    e.preventDefault();
                    current.removeClass("focus");
                }
                // for tabbing and shift tabbing.
                if (kc === 9) {
                    if (e.shiftKey && current.prevAll("td.editable").length) {
                        // One cell to the left (skipping the first column)
                        current.prevAll("td.editable").first().focus().click().addClass("focus");
                        console.log("prev cell");
                    }
                    else if (e.shiftKey) {
                        // Up to the previous row
                        current.parent().prev().children(".editable").last(0).focus().click().addClass("focus");
                        console.log("prev row")
                    }
                    else if (current.nextAll("td.editable").length) {
                        current.nextAll("td.editable").first().focus().click().addClass("focus");
                        console.log("next cell")
                    }
                    else if (current.parent().next().length) {
                        current.parent().next().children(".editable").first(0).focus().click().addClass("focus");
                    }
                }
                //left arrow
                else if (kc === 37) {
                    if (current.prevAll("td.editable").length) {
                        current.prevAll("td.editable").first().focus().click().addClass("focus");
                    }
                    else {
                        current.parent().prev().children("td.editable").last(0).focus().click().addClass("focus");
                    }
                }
                // Up Arrow
                else if (kc === 38) {
                    var ci = current.index();
                    current.parent().prev().children().eq(ci).focus().click().addClass("focus");
                }
                // right arrow
                else if (kc === 39) {
                    if (current.nextAll("td.editable").length) {
                        current.nextAll("td.editable").first().focus().click().addClass("focus");
                    }
                    else {
                        current.parent().next().children("td.editable").eq(0).focus().click().addClass("focus");
                    }
                }
                // down arrow
                else if (kc === 40) {
                    var ci = current.index();
                    current.parent().next().children().eq(ci).focus().click().addClass("focus");
                }
            });
        }
    }).on('close', function () {
        $(document).off('keydown.editor');
    });