Different source for select input

awa1271 · May 14

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 · May 15

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

Different source for select input

Different source for select input

Answers

Howdy, Stranger!

Categories

DataTables

Different source for select input

Different source for select input

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables