Editor select boxes aren't showing current selections when modifying a row

dt_ed_eric

I am using Editor to allow editing of a table. When selecting a row and then clicking edit, the select boxes for certain fields does not show the currently selected option in the table. I am providing the options server side, but I'm not sure how to get the data in the table to match up with the options in the select box. If I just send the 'id' of the field in the table the select box behaves correctly, but I can't seem to get the table to display the 'display' information, while having a the 'id' as a value. There is a sample page demonstrating this here: https://hub.coateselectrical.com/test_datatable_options/
If you select a row, and click 'Edit', you will see that the 'Location' and 'Position' fields don't display the current value, but the placeholder instead. The actual editing of the data doesn't work, because I didn't set that up, but the issue is the select boxes. The code for the page follows:

let editor;

$(document).ready(function() {
  editor = new $.fn.dataTable.Editor({
    ajax: '/ajax/test_datatable_edit/',
    table: '#myTable',
    fields: [
      {
        label: 'First Name:',
        name: 'first_name',
      },
      {
        label: 'Last Name:',
        name: 'last_name',
      },
      {
        label: 'Position:',
        name: 'position',
        type: 'select',
        optionsPair: {
          label: 'position',
          value: 'id',
        },
        placeholder: '--No Position--',
        placeholderDisabled: false,
        placeholderValue: null,
      },
      {
        label: 'Location:',
        name: 'location',
        type: 'select',
        optionsPair: {
          label: 'location',
          value: 'id',
        },
        placeholder: '--No Location--',
        placeholderDisabled: false,
        placeholderValue: null,
      },
    ],
  });

  $('#myTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: '/ajax/test_datatable_options/',
    select: true,
    columns: [
      {
        data: 'first_name',
        name: 'first_name',
      },
      {
        data: 'last_name',
        name: 'last_name',
      },
      {
        data: 'position',
        name: 'position',
        render: {
          _: 'position',
          display: 'position',
        },
      },
      {
        data: 'location',
        name: 'location',
        render: {
          _: 'position',
          display: 'location',
        },
      },
    ],
    buttons: [
      {
        extend: 'create',
        editor: editor,
      },
      {
        extend: 'edit',
        editor: editor,
      },
      {
        extend: 'remove',
        editor: editor,
      },
    ],
    dom: 'Bfrtip',
  });
});

allan

Change name: 'position', to be:

name: 'position.id',

Reasoning - position is an object, so it won't match the value you have assigned to it from the id property. You need the value attribute to match the data point's value.

Allan

dt_ed_eric

Thanks Allan. The reasoning is spot on. I wound up adding the fields.data option to the field, and setting the field to:

{
  label: 'Position:',
  name: 'position',
  data: 'position.id',
  type: 'select',
  optionsPair: {
  label: 'position',
  value: 'id',
  },
  placeholder: '--No Position--',
  placeholderDisabled: false,
  placeholderValue: null,
},

I tried changing the fields.name, but it doesn't fix the problem for some reason. I've updated the page to show the difference. I think it may interfere with the 'optionsPair'. If you look at the test page posted in the original post, then you can see that position works, while location doesn't have any options. Thank you for the help!

allan

  name: 'position',
  data: 'position.id',

What will happen with this setup is that the submitted parameter to the server will be called position. You might or might not want that? If you are using any of the server-side libraries we provide, then you almost certainly don't.

The reason the Location doesn't have any options is that the options object in the JSON response from the server needs to have a property key that matches the field name. So rather than location you would use location.id.

Regards,
Allan

dt_ed_eric

That makes sense. Thank you for the explanation. I'm not using the provided libraries.

mileog

Similar question, but in my case I want to display the current value which is different that then select type options. example:
current value from DB: name = C
{
label: "name",
name: "name",
data: "name",
className: "block",
type: "select",
options: [{
label: "A",
value: "A"
},{
label: "B",
value: "B"
}]
}

colin

@mileog This thread should help, it's asking the same thing.

Cheers,

Colin