How to get editor/row values into Selectize as a select options, when preload is set to false?

theAnimalix

For some select(ize) inputs I have it's "preload" option set to false, so when I select a row and I want to edit it (via DataTables editor), that select input remains empty. I understand it's because there were no values loaded; did I miss anything, is there a workaround?

I guess if user closes the popup and startes editing new row we should have that previous option removed and new one added instead (until they start searching).

allan

Hi,

The selectize plug-in for Editor has an update() method which you can call to update the options list. E.g. editor.field('myField').update( ...options... );

Allan

theAnimalix

Hey Allan,

Thanks for the reply. I've played with editor fields but I couldn't figure out what to pass into update to make that happen. I tried to use get(*) to get a clue but it always returns an empty string. Any chance you could provide an example of how to update options and selected value?

allan

The update() method that the selectize field type presents will simply call the Selectize addOption method - so anything you can pass into Selectize should work well.

Have you tried passing in a simple array?

Allan

theAnimalix

Thanks Allan for pointing that out. I was trying to pass in the whole selectize options and even multiple options, but I haven't tried to pass in single one. Maybe plugin uses a bit confusing name.

Anyway, I got it working perfectly. Beside calling .update one would also want to call .set on the field, to select the option added .update.

Here is my full code code to update selectize dropdown based on column with name 'location' (in case anyone will be looking for solution):

        editor.on('initEdit', function(e, node, data) {
        //add location option to selectize (if dropdown is empty editor value wont appear there)
        var locationField = editor.field('location');
        locationField.update({
            id: data.location.id,
            postalCode: data.location.postalCode,
            city: data.location.city,
            state: data.location.state,
            countryCode: data.location.countryCode,
            lat: data.location.lat,
            lng: data.location.lng
        });
        locationField.set(data.location.id);
    });

Was wondering at the same time, how can we remove all or specific options (ie, I want to remove that/those added option(s) on editor 'close' event)? Or maybe even better, how can we access selectize object ourselves?

theAnimalix

By looking at plugin code I figured out that I can access selectize object/instance via editor.field('location').inst(), so I have been able to remove all options with this code:

    editor.on('close', function(e) {
        //clear dropdown options once user closes create/edit/remove form
        var selectize = editor.field('location').inst();
        selectize.clearOptions();

    });

Thanks again Allan for all your support and an awesome library!

allan

Perfect - thanks for posting back with your solution. Good to hear you've got it working now.

Allan