Quantcast
Channel: Editor — DataTables forums
Viewing all articles
Browse latest Browse all 3744

Inline Editor Select

$
0
0

When using inline editing with a select box can you submit onchange? Right now the user needs to hit enter to save the change.

/**
 * Defaults
 */
$.extend(true, $.fn.dataTable.defaults, {
    dom: "<'row'<'col-sm-6 text-left'B><'col-sm-6'fr>>tip",
    columns: [
        { data: 'readingOrder', render: function ( data, type, row ) {
                return '<a class="delete-row"><i color="#ff0000" class="fa fa-trash"></i></a>&nbsp&nbsp&nbsp<i color="#000000" class="fa fa-arrows-v"></i>';
            }
        },
        { data: "field_title", className: 'editable'},
        { data: "field_desc", className: 'editable' },
        { data: "field_type", className: 'editable', render: function (data, type, row) {
                if ( selects[data] == null ){
                    return '';
                } else {
                    return selects[data];
                }
            } 
        },
        { data: "field_options", className: 'editable' },
    ],
    columnDefs: [
        {orderable: false, targets: [ 0,1,2,3,4 ] },
    ],
});
/**
 * Employee Table
 */
var employeeEditor = new $.fn.dataTable.Editor( {
    ajax:  datatablesVars.ajaxUrl + '&form=employee',
    table: '#employeeCoTable',
    display: 'envelope',
    fields: [ {
            label: "Title",
            name: "field_title"
        }, {
            label: "Description",
            name: "field_desc"
        }, {
            label: "Type",
            name: "field_type",
            type: "select",
            options : [{
                    label: "Text Box", value: 'text'
                },{
                    label: "Text Area", value: 'textarea'
                },{
                    label: "Radio", value: 'radio'
                },{
                    label: "Check Box", value: 'checkbox'
            }]
        }, {
            label: "Options",
            name: "field_options"
        }, 
    ]
});
var employeeTable = $('#employeeCoTable').DataTable( {
    ajax: datatablesVars.ajaxUrl + '&form=employee',
    rowReorder: {
        dataSrc: 'readingOrder',
        editor:  employeeEditor
    },
    buttons: [
        {
            text: 'New',
            action: function ( e, dt, node, config ) {
                employeeEditor.inlineCreate('end');
                newRow = parseFloat($('#employeeCoTable').DataTable().row(':last').data().readingOrder + parseFloat(1));
                $('#DTE_Field_readingOrder').val(newRow);
            }
        },
    ],
});
$('#employeeCoTable').on( 'click', 'tbody td.editable', function () {
    employeeEditor.inline( this );
});
$('#employeeCoTable tbody').on( 'click', 'a.delete-row', function () {
    rowId = this.closest("tr").id;
    employeeEditor.remove( '#' + rowId , false )
    .submit();
});
employeeEditor.add( {
    type:    "hidden",
    name:    "form",
    default: "employee"
});
employeeEditor.on( 'preSubmit', function ( e, data, action ) {
    $.each( data.data, function ( key, values ) {
        newRow = parseFloat($('#employeeCoTable').DataTable().row(':last').data().readingOrder + parseFloat(1));
        data.data[ key ][ 'readingOrder' ] = newRow;
    });
});

Viewing all articles
Browse latest Browse all 3744

Trending Articles