Need a method to click on an table view link and open ckeditor in a separate popup

koniahin

This may sound funny, hear me out. Table display view works great, Selecting a row then clicking to edit and open the popup editor which includes a ckeditor field works great.

In table view we are using core inline editing and it works swell for most fields, multi-select and ckeditorClassic are exceptions.

To keep the column width of ckeditor in check in table view I use the function that limits the characters:

  {
    targets: 12, // Formatting editor field (ckeditor)
    render: function(data, type, row) {
      return type === "display" && data.length > 24 ?
        data.substr(0, 24) + "…" :
        data;
    },
  },

The side effect is that if you attempt to click/edit the field opens really narrow.

1) Is there a way to keep data.length for table view but when you click to edit have it open large size, maybe not fullscreen?
2) If not, what about changing the inline edit field to a link/button that opens the editor separately in a modal or popup editor?

kthorngren

One option might be to not include that column in the selector used for your inline editing event handler. Create a new click event handler for that column and use the edit() API to open a form for just the clicked cell. Use the cells option similar to the 5th example in the docs.

Kevin

koniahin

This problem is morphing. I will have to add an image over the next few days. I just ran a little test. The really narrow thing is only partly accurate. I see that when the field has no data in it.

Background: I added a CSS horizontal scrollbar (with no maxwidth) to contain DTE table view. Messing around, I clicked on one of the empty description rows and added a nice little Lorem Ipsum paragraph. Since the text was one line, what happened is that is display in ckEditor on a single line scrolling right until the passage ends.

Typically ckEditor with full editing through the popup editor takes on the width of the modal (?) and is good. Not so with the horizontal scrollbar.

I'm thinking that we need to solve this by either adding a DTE style or CSS style to control the max-width to something reasonable.

koniahin

I might guess that the same issue might occur in a common textarea field as well.

allan

This is the problem that the bubble() editing method was intended to solve. See an example here. Basically there isn't a clean way of inline editing for fields with large inputs (e.g. rich text fields) that doesn't cause the table to resize. The input would have to float over the table, and that's what the bubble editor does.

Would that work for you?

Allan

koniahin

Can we apply the bubble to one specific field?

kthorngren

The example uses this:

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

Change the selector td:not(:first-child) to something the selects the column you want to bubble edit. Maybe add a class to that column or use :eq() selector.

Kevin

koniahin

My javascript-friendly partner and I see this. We now have bubble working. What we need to do is target one or maybe two specific columns like you show here, then for all the other columns we want to use the default inline editor.

We see one other thing. The bubble editor seems to have a narrowish set width regardless of whether the column is simple text, select menu or textarea. How might we set a max-width for large devices? Am thinking that max-width like 1000px might be a problem for small devices. Ideally we can set desktop/mobile maxes independently.

Maybe 100% for under 768px

koniahin

btw - how do you enable email notifications on updates?

allan

You should be able to set them here.

That said, I'm not 100% they are actually going out at the moment. I see I've got private message notification enabled and I'm not getting those e-mails. I need to look into that.

The bubble editor seems to have a narrowish set width regardless of whether the column is simple text

Use div.DTE_Bubble div.DTE_Bubble_Liner as your CSS selector to target the bubble. E.g.:

div.DTE_Bubble div.DTE_Bubble_Liner {
  width: 400px;
}

You could add responsive breakpoints as well if you like.

Allan

koniahin

Some progress. I needed to add some additional CSS:

div.DTE_Bubble div.DTE_Bubble_Liner {
z-index: 1000; /* no effect on hiding thead /
width: 100%;
max-width: 98% !important;
position: fixed;
left: 1% !important;
top: 50px !important; / orient below fixed navbar /
bottom: 40px; / optional; makes easier to click out, cancel /
margin-left: 0px; / need both left and margin-left to force left position /
he/ight: auto !important; / not needed /
overflow-x: scroll; / needed to be able to scroll to Update button */
}

koniahin

With the width set to 100% it is good with narrow browser width.

The current issue is that the thead is floating above the texteditor. Do we need to apply a z-index, on what?

koniahin

This:

.DTE_Bubble {
z-index: 9999 !important;
}

koniahin

We have this completed now. My partner set up a javascript method/class which we apply to the column:

{ data: 'contacts.description', className: 'bubble-edit' },

If this class is set it will load the bubble editor, otherwise it loads the inline editor.

Thank you for the tip.

allan

Nice one