Using editor where each cell has its own primary key

Using editor where each cell has its own primary key

maxmezzomomaxmezzomo Posts: 4Questions: 1Answers: 0

Hi,

I do not have an example as I have not actually sure where to start in this process.
Using DataTables, I have now been able to pass data in the form of 2D arrays. The data is sourced from a database but not in the format where one table row designated one model instance. Rather each cell is a different model.
I can easily send the data as orthogonal data, where one layer would be the primary keys for each instance.
I have not however been able to find some examples or documentation where I can get editor to send back simply the value and primary key.
I suspect there is a function one could call to manually implement the POST process having been returned the data of the cell for which the editor was opened.
This would be in the context of inline editing.

Thank you for any help or assistance, it would be great
Best,
Max

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Answer ✓

    Hi Max,

    What you are looking for is something that Editor was not designed for I'm afraid. It is a row based editing library, so it doesn't have the capacity to have a different primary key per cell.

    The two options I can think of are:

    1. Use a standalone Editor which gets configured per cell.
    2. Use a regular Editor and the initEdit event to set the value of a hidden field to match the primary key of the cell.

    Both of these approaches will work on the client-side (I'd probably prefer the second myself), but neither will work with our server-side libraries I'm afraid which are entirely row based.

    Allan

  • maxmezzomomaxmezzomo Posts: 4Questions: 1Answers: 0

    Thanks Allan, I will have a look at these options.

    Best

  • maxmezzomomaxmezzomo Posts: 4Questions: 1Answers: 0

    Hi,
    I have been working on implementing your proposed solution using initEdit. I have not been able to figure out where I can attach the primary key to the form.

    Assuming my rows are as follows:

          <tr>
            <td data-pk = '11'>10,000</td>
            <td data-pk = '12'>11,000</td>
            <td data-pk = '13'>12,000</td>
          </tr>
    
    editor.on( 'initEdit', function ( e, node, data, items, type ) {
      let pk = $(items).attr('data-pk');
    });
    

    At this point I have access to the primary key, but not the new value yet. So I tried to follow the methods. If I understand, the methods run in the following order:

      initEdit --> initSubmit -->  preSubmit
    

    I can access the new value in the preSubmit method, but I will no longer have access to the primary key.

    The initEdit can return a promise, and has access to node, data, items and the event. Would you know of a way I can set an argument in initEdit and have it be available the the preSubmit method.

    Thank you for any light you could shed,
    Best,
    Max

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Answer ✓
    editor.on( 'initEdit', function ( e, node, data, items, type ) {
      let pk = $(items).attr('data-pk');
    });
    

    this is where I would start, but pk isn't being assigned anywhere, so you would probably want to write it as a value to a hidden field:

    editor.on( 'initEdit', function ( e, node, data, items, type ) {
      let pk = $(items).attr('data-pk');
      editor.field('pk').val(pk);
    });
    

    then it will be included in the data submitted to the server.

    Regards,
    Allan

  • maxmezzomomaxmezzomo Posts: 4Questions: 1Answers: 0

    Thanks a lot Allan. I've got it mostly working. I'll post my implementation here when finalised in case anyone may need it.

    If I could ask one last follow up. My solution currently relies on manually triggering the inline editor as to pass the value, like this: $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) { editor.inline( this ); } );

    Now, If I would like to use plugins such as keys and select for excel like navigation, as shown here https://editor.datatables.net/examples/extensions/keyTable.html. Configure as such:

    keys: { columns: ':not(:first-child)', editor: editor }, select: { style: 'os', selector: 'td:first-child', blurable: true },

    Would you know which methods are called by these plugins in order to display the inline editor. I have given a try with 'open' and 'preopen' but I get the error regarding having no field before these are called. Is there a method that could be called before this.

    Thanks in advance,
    Best,
    Max

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    initEdit is probably the event you want here.

    The alternative would be to not use KeyTable's automatic Editor integration, but rather call inline() yourself when the key event is triggered.

    Allan

This discussion has been closed.