Problem with selectize / with dependent

rheinertp

Hi,
I have a question / problem with "selectize".
I setup a field the way it is explained here:
https://editor.datatables.net/plug-ins/field-type/editor.selectize
(but I use the current version 0.12.6: https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js)
I also use:
<style> div.selectize-dropdown { z-index: 2001; }</style>

If I use the normal "select" in my code the values are displayed - if I use selectize they are not.
Here are the relevant parts of the code:

positionseditor = new $.fn.dataTable.Editor({
        ajax: {
            url: "stepposition_process",
            type: 'POST',
            data: function(d) {
                d.stepid = rowDataSTEP.tbladib_step.stepid;
                d.wsModuleid = rowDataSTEP.tbladib_step.wsModuleid;
            }
        },
        table: table,
        fields: [
            {
                label: "srcField:",
                name: "tbladib_step_position.srcField",                        
                type: "selectize",
//                options: [{"label":"ProductCode","value":"ProductCode"},{"label":"EndUseName","value":"EndUseName"},{"label":"Markets","value":"Markets"}],                
            opts: {
                    create: true,
                    maxItems: 3,
                    maxOptions: 15,
                    openOnFocus: true,
                    allowEmptyOption: false,
                    placeholder: "Please a field/name "
                    } 
            },
...
    positionseditor.dependent( 'tbladib_step_position.srcField', 'fieldlist', {  event: 'mousedown' });        

The structure of the response of the function "fieldlist" is as follows:

{"tbladib_step_position.srcField":{"options":[{"label":"ProductCode","value":"ProductCode"},{"label":"EndUseName","value":"EndUseName"},{"label":"Markets","value":"Markets"}]}}

<I tried to switch "tbladib_step_position.srcField" and "options" - but without effect.>

What do I wrong?
Thanks!!

allan

Can you give me a link to your page please? If you inspect the DOM, is the Selectize dropdown there, but just doesn't have a high enough z-index?

Thanks,
Allan

rheinertp

Hi allan,
thanks for that hint - the elements are now show.
But - I do not yet see how I can save the selection (I need multi-select with
the possibility to add elements) into a simple text-field (with a defined seperator).

Example:
Ajax gives the field "ProductCode" and "Markets".
The user takes the field "Markets" and just adds a string "Area".

My intention is to save in this case the text : Markets;Area in the corresponding field in the table.
If the user later opens it - Markets and Area should appear as the two selected elements. (with the possibility to add or change fields).

Is this possible with selectize and editor?? <I would always use "simple text fields" to save the selection.>

Maybe this could be done in the javascript of your example:

    (function( factory ){
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery', 'datatables', 'datatables-editor'], factory );
    }
    else if ( typeof exports === 'object' ) {
        // Node / CommonJS
        module.exports = function ($, dt) {
            if ( ! $ ) { $ = require('jquery'); }
            factory( $, dt || $.fn.dataTable || require('datatables') );
        };
    }
    else if ( jQuery ) {
        // Browser standard
        factory( jQuery, jQuery.fn.dataTable );
    }
}(function( $, DataTable ) {
'use strict';


if ( ! DataTable.ext.editorFields ) {
    DataTable.ext.editorFields = {};
}

var _fieldTypes = DataTable.Editor ?
    DataTable.Editor.fieldTypes :
    DataTable.ext.editorFields;


_fieldTypes.selectize = {
    _addOptions: function ( conf, options ) {
        var selectize = conf._selectize;

        selectize.clearOptions();
        selectize.addOption( options );
        selectize.refreshOptions(false);
    },

    create: function ( conf ) {
        var container = $('<div/>');
        conf._input = $('<select/>')
                .attr( $.extend( {
                    id: conf.id
                }, conf.attr || {} ) )
            .appendTo( container );

        conf._input.selectize( $.extend( {
            valueField: 'value',
            labelField: 'label',
            searchField: 'label',
            dropdownParent: 'body'
        }, conf.opts ) );

        conf._selectize = conf._input[0].selectize;

        if ( conf.options || conf.ipOpts ) {
            _fieldTypes.selectize._addOptions( conf, conf.options || conf.ipOpts );
        }

        // Make sure the select list is closed when the form is submitted
        this.on( 'preSubmit', function () {
            conf._selectize.close();
        } );

        return container[0];
    },

    get: function ( conf ) {
        return conf._selectize.getValue();
    },

    set: function ( conf, val ) {
        return conf._selectize.setValue( val );
    },

    enable: function ( conf ) {
        conf._selectize.enable();
        $(conf._input).removeClass( 'disabled' );
    },

    disable: function ( conf ) {
        conf._selectize.disable();
        $(conf._input).addClass( 'disabled' );
    },

    // Non-standard Editor methods - custom to this plug-in
    inst: function ( conf ) {
        return conf._selectize;
    },

    update: function ( conf, options ) {
        _fieldTypes.selectize._addOptions( conf, options );
    }
};


}));

Thank you so much!

allan

Yes, that should be possible using the Selectize configuration (from their documentation):

    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }

If that isn't working for you can you give me a link to the page please.

Allan