Select2 Field Type for Datatables Editor

You are here:
< All Topics

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Here is example for the select2 field type. We assume you have already installed datatables and its editor. If not , you can download or get more details about datatables and editor from following url.

https://datatables.net/
https://editor.datatables.net/ 

You will require select2 for this plugin/field type. You can download js/css for select2 from following url

https://github.com/select2/select2

You can get more details about the option,events and method from following url.

https://select2.org/

Select2 Field Type for Datatables Editor

 (function ($, DataTable) {
      if (!DataTable.ext.editorFields) {
         DataTable.ext.editorFields = {};
      }
      var _fieldTypes = DataTable.Editor?DataTable.Editor.fieldTypes:DataTable.ext.editorFields;        
     _fieldTypes.select2 = {
          _addOptions: function (conf, options) {
              var elOpts = conf._input[0].options;                       
              elOpts.length = 0; 
            if (options) { 
                 DataTable.Editor.pairs(options, conf.optionsPair, function (val, label, i) {        
                   elOpts[i] = new Option(label, val);
                 });
            }
         },
         create: function (conf) {
              var editor = this;
              conf._input =   $('<select/>').attr(  
                    $.extend({id:DataTable.Editor.safeId(conf.id),
                    multiple: conf.multiple === true},
                    conf.attr || {}));                              

              _fieldTypes.select2._addOptions(conf, conf.options || conf.ipOpts);

              editor.on('open.select2' + DataTable.Editor.safeId(conf.id), function () {
                 conf._input.select2($.extend({}, conf.opts, { 
                        //Default options
                        width: '100%',
                       // following property require for inline edit change event handling
                        dropdownParent: $(conf._input).parent(),
                       containerCssClass: $(conf._input).attr("class")
                  }));
             });
             return conf._input[0];
         },

         update: function (conf, options) {                           
                conf.options=options;
                _fieldTypes.select2._addOptions(conf, options);
         },
         get: function (conf) {
                var val = conf._input.val();
                return conf._input.prop('multiple') && val === null?[]:val;              
         },
         set: function (conf, val) {
                _fieldTypes.select2._addOptions(conf, conf.options || conf.ipOpts);            
                if(val.length){
                    for(var i=0;i<val.length;i++){
                       if ($(conf._input).find("option[value='" + val[i] + "']").length)       
                       {
                       } else
                       {
                           if(val[i]!=""){
                               // Create the DOM option that is pre-selected by default 
                               var newState = new Option(val[i], val[i], true, true); 
                               // Append it to the select 
                              $(conf._input).append(newState).trigger('change'); 
                           } 
                      }
                     } 
                   $(conf._input).val(val).trigger("change"); 
                } else { 
                        conf._input.select2().val(val).trigger('change'); 
                } 
         },
         enable: function (conf) {
             $(conf._input).prop('disabled', false);               
             $(conf._input).selectpicker('refresh');
        },
        disable: function (conf) {
             $(conf._input).prop('disabled', true);                 
             $(conf._input).selectpicker('refresh');
        },
    };
})  

Select2 Field Type for Datatables Editor Example

Need Custom Development Help?

Previous Bootstrap Select / Selectpicker Field Type for Datatables Editor
Table of Contents
Send a Message