Different source for select input

Different source for select input

awa1271awa1271 Posts: 1Questions: 1Answers: 0

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

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 62,082Questions: 1Answers: 10,178 Site admin
    Answer ✓

    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

Sign In or Register to comment.