Replies

• allan Posts: 65,296Questions: 1Answers: 10,825 Site admin

  March 2019

  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 Posts: 23Questions: 4Answers: 0

  March 2019

  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 Posts: 65,296Questions: 1Answers: 10,825 Site admin

  March 2019

  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