Inline Edit with icon controls with a Cancel button, single column

wadeparallon

I know you can hit esc to trigger a editor.close() but I was looking at the features for submitTrigger and submitHtml in trying to determine how to create two icon controls from one:

to

I didn't want to have to create two columns for controls (on edit show the cancel column with it's own icon and trigger), I'd rather not shift the datatables columns around on edit when a new column pops up out of no where.

If there is a way of doing this with the existing controls, I'd love to explore that, rather then doing custom dom manipulation via jQuery, etc.

jettyapp

Hello Wade, I am looking to do basically the same thing. Did you ever figure this out?

colin

My reply to your other thread has a solution, would that work for you too, @wadeparallon ?

Colin

wadeparallon

@colin That is essentially what I want, but in icon controls for a whole row inline edit. The way icon control is implemented with submitHtml doesn't seem to allow for multiple controls. Its a single control for submitting because it replaces the html in the td.row-edit.

Yesterday I spent more time trying to figure out and I got it to where it can pop a control up (although it shifts all the columns - which is gross) with something similar to this:

            {
                data: null,
                defaultContent: '<i class="fa fa-edit"/>',
                className: 'row-edit dt-center',
                orderable: false
            },
            {
                data: null,
                defaultContent: '<i class="fa fa-ban" style="display: none;"/>',
                className: 'dt-center',
                orderable: false
            },

  $('#example').on( 'click', 'tbody td.row-edit', function (e) {
       editor.inline( table.cells(this.parentNode, '*').nodes(), {
           submitTrigger: this,
           submitHtml: '<i class="fa fa-save"/>',
           onComplete: function() {
               $(this).next().find(".fa-ban").hide();
           }
       } );
       $(this).next().find(".fa-ban").show();
   } );

   $('#example').on( 'click', 'tbody td i.fa-ban', function (e) {
       editor.close();
       $(this).hide();
   } );
   

But I don't think I have the jquery selectors quite right and I'm not sure onComplete is actually working correctly (haven't done the server side portion yet).

Let me see if I can setup an example over at live.datatables.net

wadeparallon

http://live.datatables.net/kikubuso/3/

It acts a little wonky and feels like a hack... but it kinda works.. I think onBlur doesn't hide it... I feel like there is a hook somewhere that could catch all the events that finish and just hides the cancel button.

colin

How about something like this - it's based on this example but with the extra icon.

Colin

wadeparallon

That is exactly what I want, except a good user experience dictates the cancel button shouldn't be there until the edit button is clicked (same reason why when you click edit, only then does the save icon show). That is where I'm getting hung up.

Cause once you start toggling that for certain situations it requires Editor integrations that I can't unravel.

colin

This might help, it's taking it further - the cross appears when editing begins, and is removed when the editing is closed.

Colin

wadeparallon

That'll do it!

I was close! I didn't think to use jQuery's "on" methods. I also was missing the display filter.

Thank you @colin