Value in select within Editor

serviceuser

Row in table belongs to a category. When I open Editor, where I've set select field with categories, there is set wrong value, first of my categories list.

...
{
  label: 'Type',
  name: 'type',
  type: 'select',
  options: [
    { label: 'Album', value: 'album'},
    { label: 'Compilation', value: 'compilation'},
    ...
  ]
}
...

I.e. I click on row with 'Compilation', in select is 'Album', not 'Compilation'. What should I do to get actual value?

allan

Hi,

Could you show me your full DataTables and Editor initialisation please? Also can you show me the data you are loading into the table?

Thanks,
Alla

serviceuser

Code:

let playlistEditor = new $.fn.dataTable.Editor({
  ajax: PLAYLIST_EDITOR_JSON_URL,
  table: '#playlistTable',
  fields: [{
    label: 'Название',
    name: 'title'
  }, {
    label: 'Тип',
    name: 'type',
    type: 'select', // this
    options: [
      { label: 'Альбом', value: 'album'},
      { label: 'Плейлист', value: 'playlist'},
      { label: 'Новинки', value: 'new'},
      { label: 'Подборки', value: 'compilation'},
      { label: 'Популярное', value: 'popular'}
    ]
  }, {
    label: 'Файлы',
    name: 'files',
    type: 'superselect'
  }]
})

let playlistTable = $('#playlistTable').DataTable({
  serverSide: true,
  processing: true,
  searching: true,
  stateSave: true,
  ajax: PLAYLIST_JSON_URL,
  columns: [
    {data: 'title'},
    {data: 'type'},
    {data: 'num_files'},
    {data: 'username', 'name': 'user.username'},
    {data: 'last_modified'},
    {
      data: null,
      className: "center",
      searchable: false,
      orderable: false,
      defaultContent: '<button id="playlistEdit" type="button" class="btn ink-reaction btn-icon-toggle btn-primary"><i class="md md-edit"></i></button>' +
      '<button id="playlistDelete" type="button" class="btn ink-reaction btn-icon-toggle btn-primary"><i class="md md-delete"></i></button>'
    }
  ],
  columnDefs: [{
      targets: -2,
      render: function (data, type, row) {
        return new Date(data).toLocaleString()
      }
    }, {
      targets: 1,
      visible: false
    }
  ],
  order: [[1, 'asc']],
  drawCallback: function (settings) {
    let api = this.api()
    let rows = api.rows({ page:'current' }).nodes()
    let last=null

    api.column(1, { page: 'current' }).data().each((group, i) => {
        if ( last !== group ) {
            $(rows).eq(i).before(
                `<tr class="group"><td colspan="5">${group}</td></tr>`
            )

            last = group
        }
    })
  },
  dom: 'lCfrtip',
  colVis: {
    buttonText: 'Колонки',
    overlayFade: 0,
    align: 'right'
  },
  lengthMenu: [[10, 25, 50, 100, 200], [10, 25, 50, 100, 200]],
  language: dt_language,
  select: true,
  buttons: [
    {
      extend: 'edit',
      className: 'editButton',
      editor: playlistEditor,
      text: 'Изменить',
      formTitle: 'Изменить',
      formButtons: [
        'Изменить',
        { text: 'Отмена', action: function () { this.close() } }
      ]
    },
    {
      extend: 'remove',
      editor: playlistEditor,
      text: 'Удалить',
      formTitle: 'Удалить',
      formMessage: 'Вы действительно хотите удалить плейлист?',
      formButtons: [
        'Удалить',
        { text: 'Отмена', action: function () { this.close() } }
      ]
    }
  ]
})

Data:

{
  "DT_RowId": 131,
  "DT_RowAttr": {
      "data-pk": 131
  },
  "id": 131,
  "title": "Good playlist",
  "artist": "",
  "files": [
      79,
      26,
      17
  ],
  "image": "",
  "type": "Популярное",
  "last_modified": "2019-10-04T06:22:52.542439Z",
  "num_files": 3,
  "username": "krivosheinr"
},

serviceuser

I don't know why, but it works fine now... Something has happens on backend, probably.

allan

Interesting that it is working. I wouldn't expect it to from the above. You have in the data:

"type": "Популярное",

But in the options list there is no Популярное value. The values available are:

album
playlist
new
compilation
popular

"Популярное" is in the labels, but not the values and the matching is based on the values! So depending on what you have in the database you'd either need to change the values to match the English values, or change the value attributes to match your Kurdish strings.

Allan