Select2 inline is displaying previously selected value from a different row rather than placeholder

datatables_admin@myvoicecomm.com

Maybe this is more of a Select2 question and not a DataTables question, but figured I'll post it here and see what comes of it. I'm building a table with an inline editor field of type select2 that's connected to my backend through ajax. When doing a search in select2 for a specific row and after selecting a result, when I open up select2 again on a different row the select result of the previously updated row is displaying instead of the placeholder I have in place. My guess is this is because the same instance of Select2 is being used across all rows, however, I was wondering if there was a way to either not have one instance for all rows (maybe not ideal when you're working with a bunch of rows in the browser) or to just simply reset the Select2? I feel like through datatables I should have access to the underlying select2 instance, but can't for the life of me figure out how to get it. I've also tried about everything I'm seeing in the Select2 documentation.

On another note since I mentioned inline editing, is there a way to have an inline edit field that references a different row data point than the field it's sitting in? For instance say I have an address column that has an inline editor field in it, but when we actually use that inline edit the value we want it to edit is an id value that's only in the row data and not displayed or even hidden in the table

allan

I'll reply to the part I can answer more readily:

On another note since I mentioned inline editing, is there a way to have an inline edit field that references a different row data point than the field it's sitting in?

Yes you can do that. Use the columns.editField to tell Editor what field to edit when inline editing is activated on a column. This is typically used for editing a primary key value in a join, as shown in this example, which it sounds like what you are looking for.

Regarding the first part of your question - you are right, a single Select2 instance is used and shared between rows. You can get access to the underlying Select2 instance using the inst() method of the plugin - e.g.:

let s2 = editor.field('mySelect2Field').inst();

How to handle what you are seeing though... Could you give me a link to your page perhaps and I can take a look at it?

Allan

datatables_admin@myvoicecomm.com

@allan I'll take a look at that editorField option. I played around with it before and didn't work for my use case, but maybe I'm missing something. As for the select2 I figured out the issue. I accidentally included this line when editor closes:

.on('close', function (e) {
    editor.field('editor_field').input().off('change');
})

This was preventing the change event on the select2 from firing. Removing this line is allowing the placeholder text to reappear