Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  December 2015

  Hi,

  Sorry for the delay in replying here. Yes, this can be done, you just need to add the attr option to the field configuration, which allows you to specify HTML attributes for the select element, including the multiple attribute. E.g.:

  {
    label: 'My Field:',
    name: '...',
    attr: {
      multiple: true
    }
  }
  

  Regards,
  Allan
• Denis.David@dqs.de Posts: 28Questions: 8Answers: 1

  January 2016

  Hi Allan,

  Thanks for your reply.

  Unfortunately this does only work with the standard "select" data type but not with "select2". Multiple choices from the given Options list are selectable and get successfully saved but manually added tags are discarded after saving them.

  Any other ideas?

  Thanks,
  Denis
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2016

  Are the manually given options submitted to the server? Is this a join table and you are looking to have new options added to the joined table?

  Allan
• Denis.David@dqs.de Posts: 28Questions: 8Answers: 1

  January 2016

  I am using a DOM only table.

  Here is a snippet from my ajax function to save new records:

  var editor = new $.fn.dataTable.Editor({
          
          table: "#" + tblName,
          idSrc: tblKey,
          ajax: function(method, url, d, successCallback, errorCallback) {
              var output = {
                  data: []
              };
              
              if (d.action === 'create') {
                  // Add new GUID as primary key for added rows
                  var addedRow = d.data[Object.keys(d.data)[0]];
                  addedRow[tblKey] = uuid.v4();
                  output.data.push(addedRow);
              } else if (d.action === 'edit') {
                  // Required routine to make pure client side submit working (kind of workaround)
                  var key = Object.keys(d.data)[0];
                  var editedRow = $("#" + tblName).dataTable().fnGetData($("#" + key));
                  $.extend(editedRow, d.data[Object.keys(d.data)[0]]);
                  editedRow[tblKey] = key;
                  output.data.push(editedRow);
              } else if (d.action === 'remove') {
                  var rowCount = $('#' + tblName).dataTable().fnGetData().length;
                  var currentRow = dataTableArray[tblName].row({selected: true});
                  
                  var currentRowData = currentRow.data();
                  var currentRowDataOrderId = currentRow.data().OrderId;
                  
                  if (currentRowDataOrderId == rowCount) return;
                  
                  dataTableArray[tblName].rows().every(function(rowIdx, tableLoop, rowLoop) {
                      var data = this.data();
                      if (data.OrderId > currentRowDataOrderId) dt.cell(this, 0).data(data.OrderId - 1);
                  });
                  
                  $('#' + tblName).DataTable().draw();
              }
              
              successCallback(output);
              
          },
          
          fields: fields
      });
  
  
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2016

  If you add a console.log( d.data ); at the top of your local ajax function, does it contain the additional new values when you submit then from an edit action?

  Allan
• Denis.David@dqs.de Posts: 28Questions: 8Answers: 1

  January 2016

  No, it doesn't. Only the value selected from the given option list.
  Anyway, before saving, the additional (manual) entry is correctly shown as selected item in the select field.
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2016

  Okay - that limits where we need to look. If there data isn't being given by Select2, then we need to discover why that is.

  I'm wondering if it might be because the tags option isn't specified. WHat happens if you use:

  {
    label: 'My Field:',
    name: '...',
    attr: {
      multiple: true
    },
    opts: {
      tags: true
    }
  }
  

  Allan
• Denis.David@dqs.de Posts: 28Questions: 8Answers: 1

  January 2016

  I already checked this, the tags flag is set.
• Denis.David@dqs.de Posts: 28Questions: 8Answers: 1

  January 2016

  Any other idea what I could look for?
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2016

  Sorry for the delay - I'm going to try and set up a local test case to see what is happening here.

  Allan
• Denis.David@dqs.de Posts: 28Questions: 8Answers: 1

  January 2016

  Hi Allan,

  Could you reproduce the effect on your side? Do you need any further detail information?
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2016

  Using the above code, if I type into the select2 input area and then press return it creates the new tag automatically. Then submitting the Editor form I can see that data being submitted to the server:

  data[row_32][users][site][]:2
  data[row_32][users][site][]:Dunfermline
  

  (the second term above was the one I entered).

  Could you give me some details on how I create a demo of this locally, or better yet would be if you could link to a page that demonstrates the issue so I can debug it directly.

  Thanks,
  Allan
• Denis.David@dqs.de Posts: 28Questions: 8Answers: 1

  January 2016

  Could it be somehow related to this issue:

  https://datatables.net/forums/discussion/29913/select2-4-0-0-ajax

  Obviously there has not been any final official solution to this.

  In the editor.select2 plugin code I successfully changed the get() method, so selected option(s) are correctly saved into datatable now. The remaining issue is that the value(s) dont get into the select2 field back when opening the edit mask.

  Here is my modified get() code:

  get: function ( conf ) {
          var data = conf._input.select2('data');
          var val = data.map(function(a) {return a.text;});
          return conf._input.prop('multiple') && (typeof data === "object") ?
              val.join(conf._input.prop('separator') ? conf._input.prop('separator') : ";") :
              data;
      }
  

  I tried the modified set() code in the posting mentioned above by unfortunately with no success.

  Thanks for your help,

  Denis
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2016

  Hi Denis,

  Sorry for the delay in replying here. It is possible that it is related to Select 4.0.0, but I know that a number of people use Select 4 successfully with Editor so I'm not sure exactly what is going wrong here.

  If you could provide a link to the page that would really help with resolving this so I can debug it directly. At the moment I've not been able to recreate the issue.

  Thanks,
  Allan