Popper Integration

Popper Integration

Bindrid2Bindrid2 Posts: 77Questions: 3Answers: 12

Anyone know of an easy way to ingrate popper with Editor for better control of where the bubble editor pops up?

The issue that I am having is that when I use the bubble editor on a horizontal scroll-able table, is that the bubble can be partial obscured by the table container when the user clicks on a far right column to edit it.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 50,878Questions: 1Answers: 7,626 Site admin
    Answer ✓

    There is no option to replace Editor's built in bubble view with Popper I'm afraid. While the main view can use display controller plug-ins to change the display control, bubble and inline do not have any such option.

    The issue that I am having is that when I use the bubble editor on a horizontal scroll-able table, is that the bubble can be partial obscured by the table container

    The bubble is inside the scrolling container. Popper would also have this issue. There are two options:

    1. Attach the popover to the document body and then attempt to position it to appear over the scrolling element and also update the position whenever the scrolling container is scrolled. This is easier said than done.
    2. Attempt to shift either the popover to fit in the viewport or shift the viewport to show the whole bubble. The former is probably better.

    I'm afraid I don't have an immediate fix for this, but I've filed an internal enhancement to look into implementing this.

    Allan

  • Bindrid2Bindrid2 Posts: 77Questions: 3Answers: 12

    I am using popper because it is already loaded for Bootstrap and Tippy on my pages.
    Within the context of my pages, this is how I implemented it.

    // Save the original method for use when popper is  not
    // specifically requested in the editor definition
    $.fn.DataTable.Editor.prototype.dtBubblePosition =
        $.fn.DataTable.Editor.prototype.bubblePosition;
    $.fn.DataTable.Editor.prototype.bubblePosition = function () {
        // if anything goes wrong just eat it and revert back to the 
        // orginal Editor code
        try {
            // get the specific field info for this bubble
            var fieldName = this.s.includeFields[0];
            var field = this.s.fields[fieldName];
    
            // if no popper definition, used orignal method
            if (!(this.s.formOptions.bubble.popper || field.s.opts.popper)) {
                return this.dtBubblePosition();
            }
            var popperDef = $.extend(true, {},this.s.formOptions.bubble.popper, field.s.opts.popper);
        
            var
                wrapper = $('div.DTE_Bubble'),
                liner = $('div.DTE_Bubble_Liner'),
                td = this.s.bubbleNodes;
            // The orginal class contains positioning info so replace 
            // so replace it with a class with the same styles but no positioning
            liner.removeClass("DTE_Bubble_Liner"). addClass("DTE_Bubble_Liner_Local"); 
    
            var pp = new Popper(td[0], wrapper[0],  popperDef);
     
            return this;
        }
        catch (e) {
            // if anything goes wrong, eat it and return to the original method.
            console.log(e);
            return this.dtBubblePosition();
        }
    };
    
    

    Then my definition looks like

                this.editor = new $.fn.dataTable.Editor(
                     {
                         table: this.$refs.targetEl,
                         fields: [
                             { name: "LastName", "label": "Last Name:", attr: { maxlength: 50 } },
                             { name: "FirstName", "label": "First Name:", attr: { maxlength: 50 } },
     
    //// and so on
     }],
                         display:"bootstrap",
                         formOptions: {
                             bubble: {
                                 // Updates data when field loses focus.
                                 // does not actually submit form.
                                 onBlur: 'submit',
                                 onReturn: 'submit',
                                 buttons: [
                                     { text: 'Update', className: 'btn-primary btn-sm', action: function () { this.submit(); } },
                                     { text: 'Cancel', className: 'btn-secondary btn-sm', action: function () { this.close(); } }],
    
    // and my popper definition
                                 popper: {
                                     placement: 'top',
                                     modifiers: {
                                         flip: {
                                             behavior: ['top', 'left', 'right']
                                         },
                                         preventOverflow: {
                                             boundariesElement: $("#divFrameHolder")[0],
                                         },
                                     },
                                 }
    
                             },
                             inline: {
                                 // Updates data when field loses focus.
                                 // does not actually submit form.
                                 onBlur: 'submit',
                                 onReturn: 'submit'
                             }
                         }
                     }
                );
    
Sign In or Register to comment.