select2 dataTables Editor Plugin

select2 dataTables Editor Plugin

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

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.

Answers

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

    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.deDenis.David@dqs.de Posts: 28Questions: 8Answers: 1

    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

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

    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.deDenis.David@dqs.de Posts: 28Questions: 8Answers: 1

    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
        });
    
    
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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.deDenis.David@dqs.de Posts: 28Questions: 8Answers: 1

    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.

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

    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.deDenis.David@dqs.de Posts: 28Questions: 8Answers: 1

    I already checked this, the tags flag is set.

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

    Any other idea what I could look for?

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

    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.deDenis.David@dqs.de Posts: 28Questions: 8Answers: 1

    Hi Allan,

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

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

    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.deDenis.David@dqs.de Posts: 28Questions: 8Answers: 1

    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

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

    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

This discussion has been closed.