Pre-select doesn't work

serviceuser

I use select2 in conjunction with datatables editor.

let editor = new $.fn.dataTable.Editor({
  fields: [{
    label: label,
    name: name,
    type: 'select2',
    opts: {
      multiple: true,
      data: (params) => ({ search: params.term, type: 'public' }),
      ajax: {
        url: url,
        dataType: 'json',
      }
    }
  }]
})

Response from server:

{
  "results": [
    {
      "id": 1,
      "text": "Option 1",
      "selected": true // not even "selected": "selected"
    }
  ]
}

but it's not pre-selected. Is it due the plugin or the library?

allan

When you enable ajax in the Select2 integration for Editor, it will send a initialValue request to the server (initialValue is a query parameter set to true) when the form is shown for an edit or create action. Is that happening for you?

Thanks,
Allan

serviceuser

Yes, it is. And for this I add "selected" field in every item.

serviceuser

And why it sends initialValue, when it can use it with initialization select2 without request? It then initializes a new request for the rest items.
All what I need: I open editor, where is already pre-selected items (which I get with datatable), and then I just request others items without processing.

serviceuser

Okay. I suppose, it's due the datatables.
Data for plugin:

{
  "data": [
    {
      "title": "title",
      "photo": "photo",
      "bio": "bio",
      "genres": [
        {
          "id": 1,
          "text": "genre1",
          "selected": true
        },
        {
          "id": 2,
          "text": "genre2",
          "selected": true
        }
      ],
      "DT_RowId": 175,
      "DT_RowAttr": {
        "data-pk": 175
      }
    }
  ]
}

editor takes wrong fields from here. So I have no idea, what should I do for that.

let table = $('#table').DataTable({
  serverSide: true,
  processing: true,
  searching: true,
  stateSave: true,
  ajax: ARTIST_JSON_URL,
  columns: [
    {
      data: 'genres',
      // render: (data, type, row, meta) => row.genres.map(el => `<span class="badge badge-light">${el.text}</span>`).join(' ')
    },
    ....
  ],
})

allan

And why it sends initialValue, when it can use it with initialization select2 without request?

When using Select2 with Ajax, we need to look up the label from the value. That information isn't stored at the client-side so we need to make a request to the server to get that value and populate the Select2 instance with that option.

Can you show me an example of Select2 standalone (i.e. no Editor) working like you want it to please? That will let me help refine the implementation of the plug-in.

Thanks,
Allan

serviceuser

The problem is inside conf param in create function. There is no required fields, so <select /> is created empty.

I don't know, how to fit the plug-in to working state.

serviceuser

Allan, please, come...

allan

Could you give me a link to your page please? Since you have Ajax enabled for Select2 the options are obtained from the Ajax request it makes. So it isn't a problem that it is creating the select with no options. The server needs to give it the options in the Ajax response.

Allan

serviceuser

At the moment I can't give you an example, project is private... Could you give in your turn some your working example, to better understand me this mechanism? There is documentation only abstract code, without example.

allan

Yes, I'm afraid we don't yet publish examples for Editor with Select2. It is however something that Colin is going to look at doing (producing a collection of examples specifically for Select2).

Allan