select2 doesn't load the options correctly

jsomweb

I tried to implement optgroup based on post https://datatables.net/forums/discussion/31766/select2-optgroups-for-datatables-editor-dropdown

And I found that if I try to modify the same field twice, the optgroups can not be update but will keep inserting.

Here is an example

function testSelect() {
        var demodata = [{
            text: "Optgroup 1",
            children: [{
                id: 1,
                text: "Item One"
            }, {
                id: 2,
                text: "Item two"
            }]
        }];
        
        editor.field('courses.sid_2').inst().select2({
            placeholder: "Select TA",
            data: demodata
        });
        console.log(editor.field('courses.sid_2'));
    }

testSelect();
testSelect();

What I expect is that only one Optgroup in the drop down
However it shows two Optgroups in the dropdown

<span class="select2 select2-container select2-container--default select2-container--below select2-container--open select2-container--focus" dir="ltr" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-DTE_Field_courses-sid_2-container" aria-owns="select2-DTE_Field_courses-sid_2-results" aria-activedescendant="select2-DTE_Field_courses-sid_2-result-hp6j-2"><span class="select2-selection__rendered" id="select2-DTE_Field_courses-sid_2-container"><span class="select2-selection__placeholder">Select ruleset</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>

Is there any update select2 function instead of just insert I can use?

Thank you

jsomweb

Anybody has an idea on this question?

loloski

function loader_function() { 
/* 
* Pull your new data via $.ajax or whatever means for your to supply the data you need
*/

var demodata = [{
            text: "Optgroup 1",
            children: [{
                id: 1,
                text: "Item One"
            }, {
                id: 2,
                text: "Item two"
            }]
        }];

return demodata;

}

editor.field('courses.sid_2').update(loader_function);

I suggest read the http://editor.datatables.net/reference/api/field() from the documentation

jsomweb

@loloski

Thank you for helping but the default editor select field doesn't support option groups, so the above code will get 'no result find' error.
I'm using select2 plugin to achieve option groups but it is not updating correctly. Thank you.

loloski

Oh I see sorry if I misread the issue anyway let see what others can say hoping we can find answer :)