Select2 Multselect

MickB

Any reason why i can't use a Select2 in Editor to multi-select?

Is there an example anywhere?

Mick

kthorngren

I've gotten it to work. Below is my working example. The fields are setup as an array. It took a bit of tinkering for me to get it working.

Kevin

    editor = new $.fn.dataTable.Editor( {
        ajax:  '/manage_clusters',
        table: '#edit-table',
        fields: [
            { type: 'hidden', label: 'pkid:', name: 'main.pkid' },
            { label: 'Name:', name: 'main.name' },
            { type: 'select2', label: 'Contact Center:', name: 'main.fk_contact_centers', placeholder: 'Select a Contact Center' },
            { type: 'select2', label: 'Publisher:',  name: 'main.Pub', 
                    opts: { allowClear: true,
                            placeholder: 'Select a Publisher'  }
            },
            { type: 'select2', label: 'Subscribers:',  name: 'main.Sub[]',
                    opts: { multiple: true,
                            placeholder: 'Select a Subscriber' }
            },
            { type: 'select2', label: 'Music on Hold:',  name: 'main.MOH[]',
                    opts: { multiple: true,
                            placeholder: 'Select a MoH Subscriber' }
            },
            { type: 'select2', label: 'TFTP:',  name: 'main.TFTP[]',
                    opts: { multiple: true,
                            placeholder: 'Select a TFTP Subscriber' }
            },
        ]
    } );


    var table = $('#edit-table').DataTable( {
        ajax: '/manage_clusters',
        columns: [
            { data: 'main.pkid' },
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: 'main.name' },
            { data: 'cc.contact_center_name', editField: 'main.fk_contact_centers' },
            {   
                data: 'cm.Pub',
                render: function ( data, type, row ) {
                    if (data.length == 0) {
                        return null
                    } else {
                        return data[0].label
                    }
                },
                editField: 'main.Pub' 
            },
            {   
                data: 'cm.Sub',
                render: '[, ].label',
                editField: 'main.Sub[]' 
            },
            {   
                data: 'cm.MOH',
                render: '[, ].label',
                editField: 'main.MOH[]' 
            },
            {   
                data: 'cm.TFTP',
                render: '[, ].label',
                editField: 'main.TFTP[]' 
            },
        ],
        columnDefs: [
            {   "targets": [0], 
                "visible": false,
                "searchable": false 
            }
        ],
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
    } );

MickB

Thanks. I'm back on this now.

I have sorted out my MJoin, so the data is pulled from the server (using a link table).

I just need to get the front end sorted now, so the user can multi-select from the array.

Mick