Editor - Adding rows WITHOUT the form

Editor - Adding rows WITHOUT the form

eurosolleurosoll Posts: 13Questions: 7Answers: 0

Hi

Just checking out the editor and I apologise if this is a newbie question.

I want to be able to add rows and then edit them inline without the form appearing.

I saw that there is a editor.create() function, but could not work out how to use it. Is there a simple example that I could follow?

Thanks

Dov

This question has an accepted answers - jump to answer

Answers

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

    Hi @eurosoll ,

    This here should do the trick. It's creating a new empty row, then inline editing it immediately.

    Hope that works for you,

    Cheers,

    Colin

  • eurosolleurosoll Posts: 13Questions: 7Answers: 0

    Thanks Colin. Just what I was looking for.

  • hnhegdehnhegde Posts: 68Questions: 17Answers: 0

    Hi @colin ,
    In the above example, if I click "make empty" and then hit 'Esc' key, a blank row remains. Any idea how to make it go away? Here is a loom showing that.
    Kindly advise,

    Thanks,
    Harsha

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

    Hi @hnhegde ,

    With that example, the purpose was to create the empty row. If you want to remove it, you could flag the removal in preBlur, then remove it in closed - something like this.

    Cheers,

    Colin

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    Interesting solution for this, Colin. I did it server side by only (re)loading empty rows that have a timestamp not older than a few seconds. In addition I have a nightly cleanup run deleting empty rows.

  • hnhegdehnhegde Posts: 68Questions: 17Answers: 0

    Excellent! Thanks @colin !

    Regards,
    Harsha

  • hnhegdehnhegde Posts: 68Questions: 17Answers: 0

    Hi @colin,
    onEsc also seems to accept a function. I tried this one and it works:

    onEsc: function () {                        
        editor.remove(table.row(':eq(0)', false)); }
    }
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Nice, that's a better solution!

  • hnhegdehnhegde Posts: 68Questions: 17Answers: 0

    Hi @colin ,
    In this example, tab key doesn't seem to work. Shouldn't the edit jump to the next field when I hit tab?

    Regards,
    Harsha

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

    Hi @hnhegde ,

    For that, you'll need to do what's shown in this example. I've updated your example here.

    Cheers,

    Colin

  • bank1991bank1991 Posts: 8Questions: 3Answers: 0

    Hi, I realized this works by giving the tr an ID attribute that you hardcoded. how can I dynamically generate the id into the tr from an ajax call?

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

    I'm not following, sorry. All rows would have an ID, otherwise the server wouldn't know which record is being referenced.

    Colin

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited October 2020

    how can I dynamically generate the id into the tr from an ajax call?

    Editor does it for you if you use it with a database on your server. It does the INSERT of the empty row, reads back the (auto-increment) id and returns it to the client.

    Since there is no database in the fiddle it is "hardcoded" in the HTML - but only in the example not in a real life situation.

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited October 2020

    Just to give an example on how it works with Editor and ajax.

    If I add an empty row like this:

    This is being returned from the server:

    Editor adds the field DT_RowId which contains the new id of the new record. Of course you can select the id field as well as an Editor field which I did as ctr_label.id.

    After the empty record has been created I edit it inline using this code:

    ctrLabelEditor
      .on('postCreate', function(e, json, data, id) {
          setTimeout(function () {
             if (empty) {
                ctrLabelEditor.inline(ctrLabelTable.cell('#' + json.data[0].DT_RowId, '.labelText').node());
                empty = false;         
               }
           }, 250);
       });  
    

    I use the row id to identify the row which is "#row_141" (as in '#' + json.data[0].DT_RowId) and a class to identify the proper column of my data table. I needed the timeout to make it work.

This discussion has been closed.