Different source for select input

awa1271

Hi all... First things first, I'm not a professional developer. As an apology in advance

My basic setup works. The API delivers data, the datatable is generated and updating the records is working too.

What I'm trying to do is, that the email field is a selectbox and the selectbox options are generated from each contacts array.

I'm using the following code:

const editor = new DataTable.Editor({
    ajax: 'api/unit_update',
    idSrc: 'id',
    fields: [
      {
        label: 'Date:',
        name: 'appointment_date',
        type: 'datetime',
        opts: {
          showWeekNumber: true,
          disableDays: [0, 6]
        },
        def: () => new Date(),
        displayFormat: 'DD.MM.YYYY',
        wireFormat: 'YYYY-MM-DD',
        keyInput: false
      },
      {
        label: 'Time:',
        name: 'appointment_time',
        type: 'datetime',
        def: () => new Date(),
        displayFormat: 'HH:mm',
        wireFormat: 'HH:mm:ss',
        keyInput: false
      },
      {
        label: 'Contact email:',
        name: 'email',
      },
    ],
    table: '#example'
  });

  $(document).ready(function() {
    var groupColumn = 0;
    var table = $('#example').DataTable({
      ajax: {
        url: 'api/units',
      },
      rowId: 1,
      paging: false,
      processing: true,
      serverSide: true,
      order: [
        [0, 'asc']
      ],
      columns: [
        {
          data: 'date',
          format: 'DD.MM.YYYY',
        },
        {
          data: 'time',
          format: 'HH:mm',
        },
        {
          data: 'serial'
        },
        {
          data: 'email',
        },

        {
          data: null,
          className: 'dt-center editor-edit',
          defaultContent: '<button class="btn dataedit btn-outline-default btn-xs btn-icon rounded-circle waves-effect waves-themed"><i class="fa fa-pencil"/></button>',
          orderable: false
        }
      ],
      layout: {
        topStart: {
          buttons: [{
              extend: 'edit',
              editor: editor
            },
            {
              extend: 'remove',
              editor: editor,
            }
          ]
        }
      },
    });

    table.on('click', 'button.dataedit', function(e) {
      editor.edit(e.target.closest('tr'), {
        title: 'Edit record',
        buttons: 'Update'
      });
    });
  });

Array
(
    [data] => Array
        (
            [0] => Array
                (
                    [id] => 89
                    [date] => 2024-04-25
                    [time] => 08:00:00
                    [email] => test@test.com
                    [serial] => XX-1234-5678
                    [contacts] => Array
                        (
                            [0] => Array
                                (
                                    [id] => 24767
                                    [phone] => +0123456
                                    [email] => test1@xxxx.com
                                )

                            [1] => Array
                                (
                                    [id] => 45547
                                    [telefon] => +0641488
                                    [email] => test2@xxxx.com
                                )


                        )

                )

            [1] => Array
                (
                    [id] => 245
                    [date] => 2024-08-27
                    [time] => 09:00:00
                    [email] => another@mail.com
                    [serial] => YY-999-888
                    [contacts] => Array
                        (
                            [0] => Array
                                (
                                    [id] => 13363
                                    [phone] => +055847984
                                    [email] => test3@yyyy.com
                                )

                            [1] => Array
                                (
                                    [id] => 45547
                                    [telefon] => +0119975
                                    [email] => test4@yyyy.com
                                )


                        )


...

I tried to do it like shown in this example (Complex (nested) JSON data source), but a) I have several emails stored in contacts and b) I can't access my data like contacts.email.

Any idea or hint is welcome.

Thanks.

allan

Interesting one! So the possible options for the email field are available, in the row as the contacts array?

That being the case, use the initEdit event to update the list of options with the field().update() method - e.g.:

editor.on('initEdit', function () {
  let row = table.row( editor.ids(true) ).data();

  editor.field('email').update(
    row.contacts.map(function (d) {
      return {
        label: d.email,
        value: d.id
      };
    });
  );
});

You may wish to change the value to d.email as well since it looks like email field is the email address string rather than the id entry.

Allan