How to change Bubble to Edit on Ctrl-Click

rpmccormick

So I just came up with an idea and got it working for one button... however, I was hoping someone could help me make it universal... I want to make it so whenever someone clicks a Bubble Edit while holding Ctrl, it instead opens the full Editor.

Here is my code for doing this in a single location:

               function editResButton(ev)
                {if (ev.ctrlKey) {ReservationEditor.edit  (<?=$resid?>, {title: 'Edit Reservation', buttons: 'Update'});}
                 else            {ReservationEditor.bubble($('#method'), ['HotelReservation_LastName', 
                                                                          'HotelReservation_PartySize', 
                                                                          'HotelReservation_Status', 
                                                                          'HotelReservation_Type']);}
                }

But I know there is probably an easy way to have an onBubble event do this globally for any editor and any bubble... can someone please craft that event code for me?

rpmccormick

Maybe it is not possible because the onBubble event doesn't receive the window.event which lets you know if Ctrl was held? I am not sure. It seems like a feature many could make use of... Click = BubbleEdit, Ctrl-Click = FullEditor... everywhere you use Bubble.

colin

This appears to be doing what you're after - http://live.datatables.net/qadafite/31/edit

It's using event.ctrlKey - see this SO thread.

Colin

rpmccormick

That's a perfect example, thanks Colin. ...And I thought my Ctrl-Click idea was original -lol That just proves it is accepted UX.

  $('#example').on('click', 'tbody tr td', function(e) {
    if (e.ctrlKey) {
      editor.edit(this);      
    }
    else {
      editor.bubble(this);
    }
  }); 

However, in my case I am using editor in standalone a lot, and I was hoping to do something like this within a PreEdit function or something to avoid updating a lot of code. I don't ever just bubble(this)... each bubble has at least 2 fields in it, customized all over, so unfortunately I cannot just apply this globally like they do in this example.

colin

The problem is that preEdit wouldn't have access to the event to know if Ctrl was pressed at that time. I think what would be do to something like this:

let ctrlKey = false;
$('#example').on('click', 'tbody tr td', function(e) {
  ctrlKey = e.ctrlKey? true : false;
});

Then check for the ctrlKey in your existing preEdit event handler,

Colin

rpmccormick

Ok, yeah.... so assuming I have a Global ctrlKey, how do I use the PreEdit function to change from Bubble to Editor? (or maybe not PreEdit if there is a better place to do it... what do you recommend?) Thanks so much for the help on this one Colin.

colin

One option perhaps would be to use preOpen - this is cancellable. So you could check your Ctrl logic there, and cancel the edit if it's the wrong one. Then, in e-vent preOpenCancelled, call the correct open. To be honest, I'm getting in a muddle with your logic here, but that might do the trick!

Colin