Editor - Adding rows WITHOUT the form

eurosoll

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

colin

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

eurosoll

Thanks Colin. Just what I was looking for.

hnhegde

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

colin

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

rf1234

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.

hnhegde

Excellent! Thanks @colin !

Regards,
Harsha

hnhegde

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)); }
}

colin

Nice, that's a better solution!

hnhegde

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

colin

Hi @hnhegde ,

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

Cheers,

Colin

bank1991

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?

colin

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

Colin

rf1234

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.

rf1234

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.