Answers

• bsdz Posts: 17Questions: 6Answers: 0

  March 2017

  I resolved the issue by setting the column value to an array of dictionaries, ie,

  [{ id:"100", text: "label100"}, { id:"200", text: "label200"} ]
  

  then patching the select2 plugin get method like so:

      set: function ( conf, val ) {
          if (conf._input.prop('multiple')) {
              conf._input.empty();
              var vals = new Array();
              for (let pair of eval(val)) {
                  conf._input.append($("<option/>").val(pair["id"]).text(pair["text"]));
                  vals.push(pair["id"])
              }
              conf._input.val( vals ).trigger( 'change', {editor: true} );
          }
          else {
              conf._input.val( val ).trigger( 'change', {editor: true} );
          }
      },
  

  Admittedly not the nicest code. Finally for the column render I did this:

                  "render": function (val, type, row) {
                      var labels = new Array();
                      for (let pair of eval(val)) {
                          labels.push(pair["text"])
                      }
                      return labels.join(", ");
                  }
  

  Hope this might help someone else in future.
• kthorngren Posts: 21,247Questions: 26Answers: 4,929

  March 2017

  I'm able to use the select2 plugin using value/label pairs for the columns. I did not make changes to the plugin.

  Here is an example Editor field:

  =
  { type: 'select2', label: 'Device Types:', name: 'main.fk_types_list[]',
         opts: { multiple: true,
         placeholder: 'Select Device Types' }
  },
  
  

  The corresponding Datatables column:

   { data: 'device_types', 
        editField: 'main.fk_types_list[]',
        render: '[, ].label
  },
  

  My device_types object looks like this:

  [{value: 1, label: "Call Router"}, {value: 7, label: "GW PG"}, {value: 2, label: "Logger"}]
  

  I get the default selections and can add and delete as needed.

  Kevin
• bsdz Posts: 17Questions: 6Answers: 0

  March 2017

  Thanks @kthorngren. I think the difference might be that I am using a remote data source with paging for my select2. So the labels do not already exist in memory and cannot be selected from a list of ids. Please correct me if I'm wrong. ie

             {
                  label: "Foo:",
                  name: "1",
                  "type": "select2",
                  
                   opts: {
                       ajax: {
                              dataType: "json",
                              url: "/my/select2/list",
  
                              data: function(params) {
                                  return {
                                      term: params.term || '',
                                      page: params.page || 1
                                  }
                              },
          ...
                  attr:
                  {
                      multiple: 'multiple'
                  },
          ...
           }