find cell from bubble

find cell from bubble

Bindrid2Bindrid2 Posts: 70Questions: 0Answers: 12

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

Replies

  • allanallan Posts: 48,301Questions: 1Answers: 6,970 Site admin

    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

  • Bindrid2Bindrid2 Posts: 70Questions: 0Answers: 12
    edited August 14

    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');
        });
    
Sign In or Register to comment.