select2 dataTables Editor Plugin

Denis.David@dqs.de

Is there a way to support select2 tags option (together with the multiple option) with the dataTables select2 plugin, to let the user dynamically add custom options?

Using select datatype and initializing the input field with select2() constructor after editor popup, the GUI perfectly allows to add custom tags but they are not saved after posting the input.

allan

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

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

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

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

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

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

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

I already checked this, the tags flag is set.

Denis.David@dqs.de

Any other idea what I could look for?

allan

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

Hi Allan,

Could you reproduce the effect on your side? Do you need any further detail information?

allan

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

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

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