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

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

wadeparallonwadeparallon Posts: 34Questions: 4Answers: 0

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.

Replies

  • jettyappjettyapp Posts: 15Questions: 3Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • wadeparallonwadeparallon Posts: 34Questions: 4Answers: 0

    @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

  • wadeparallonwadeparallon Posts: 34Questions: 4Answers: 0

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • wadeparallonwadeparallon Posts: 34Questions: 4Answers: 0

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited October 2021

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

    Colin

  • wadeparallonwadeparallon Posts: 34Questions: 4Answers: 0

    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

Sign In or Register to comment.