Inline Editing with Tab and FieldBox "Select"

scherbaum

Hi,

I am using inline editing with the tab option and I am trying to get a FieldBox "Select" to work. The select options show up in the Table and you can click through them, however, changes are not saved. Is there any way to get this to work?

This is the debugger code: ucanas

The following is the javascript code for the page:

<script type="text/javascript" language="javascript" class="init">
    // use a global for the submit and return data rendering in the examples
    var editor;
 $(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "xy.php",
        table: "#example",
        bProcessing: true,
        bServerSide: true,
        fields: [ {
                label: "Rechnungsdatum",
                name: "generalexpense_order_date",
                type: "date"
            }, {
                label: "Budgetgruppe",
                name: "generalexpense_group_id",
                type:  "select",
                ipOpts: [
                    { "label": "1 (highest)", "value": "1" },
                    { "label": "2",           "value": "2" },
                    { "label": "3",           "value": "3" },
                    { "label": "4",           "value": "4" },
                    { "label": "5 (lowest)",  "value": "5" }
                ],
                "default": 1
            }, {
                label: "Name",
                name: "generalexpense_beneficiary"
            }, {
                label: "Buchungstext",
                name: "generalexpense_text"
            }, {
                label: "Notiz",
                name: "generalexpense_note"
            }, {
                label: "Kategorie",
                name: "generalexpense_type"
            }, {
                label: "Betrag",
                name: "generalexpense_amount"
            }, {
                label: "Buchungsdatum",
                name: "generalexpense_billing_date"
            }, {
                label: "Status",
                name: "generalexpense_status"
            }
        ],
        submitOnBlur: true
    } );



    editor
        .on( 'open', function ( e, type ) {
            if ( type === 'inline' ) {

                // Listen for a tab key event when inline editing
                $(document).on( 'keydown.editor', function ( e ) {
                    if ( e.keyCode === 9 ) {
                        e.preventDefault();
 
                        // Find the cell that is currently being edited
                        var cell = $('div.DTE').parent();
                        
                        if ( e.shiftKey && cell.prev().length && cell.prev().index() !== 0 ) {
                            // One cell to the left (skipping the first column)
                            cell.prev().click();
                        }
                        else if ( e.shiftKey ) {
                            // Up to the previous row
                            cell.parent().prev().children().last(0).click();
                        }
                        else if ( cell.next().length ) {
                            // One cell to the right
                            cell.next().click();
                        }
                        else {
                            // Down to the next row
                            cell.parent().next().children().eq(1).click();
                        }
                    }
                } );
            }
        } )
        .on( 'close', function () {
            $(document).off( 'keydown.editor' );
        } );
 
    // Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

    //add column search
    $('#example tfoot th').each( function () {
        var title = $('#example tfoot th').eq( $(this).index() ).text();
        if (title!='') {
            $(this).html( '<input type="text" placeholder="'+title+'" />' );
        };
    } );

    //make date sortable year month day
    $.fn.dataTable.moment = function ( format, locale ) {
        var types = $.fn.dataTable.ext.type;
     
        // Add type detection
        types.detect.unshift( function ( d ) {
            return moment( d, format, locale, true ).isValid() ?
                'moment-'+format :
                null;
        } );
     
        // Add sorting method - use an integer for the sorting
        types.order[ 'moment-'+format+'-pre' ] = function ( d ) {
            return moment( d, format, locale, true ).unix();
        };
    };
    $.fn.dataTable.moment('DD.MM.YYYY','');

    //built table
    var table = $('#example').DataTable( {
        //Anordnung; T steht für TableTools
        dom: 'T<"clear">frtip<"clear spacer">T',
        ajax: "php/phpsachbuchungen.php",
        columns: [
            { data: null, defaultContent: '', orderable: false },
            { data: "generalexpense_order_date" },
            { data: "generalexpense_group_id", editField: "generalexpense_group_id" },
            { data: "generalexpense_beneficiary" },
            { data: "generalexpense_text" },
            { data: "generalexpense_note" },
            { data: "generalexpense_type" },
            { data: "generalexpense_amount", render: $.fn.dataTable.render.number( '.', ',', 2, '€' ) },
            { data: "generalexpense_billing_date" },
            { data: "generalexpense_status" },
        ],
        order: [ 1, 'asc' ],
        tableTools: {
            sRowSelect: "os",
            //sRowSelect: "multi",
            sRowSelector: 'td:first-child',
            aButtons: [
                //{ sExtends: "editor_create", sButtonText: "Neu", editor: editor },
                { sExtends: "editor_edit", sButtonText: "Bearbeiten", editor: editor },
                { sExtends: "editor_remove", sButtonText: "Löschen", editor: editor }, 
                { sExtends: "copy", sButtonText: "Copy", "bSelectedOnly": true },
                { sExtends: "print", sButtonText: "Print", "bSelectedOnly": true },
                { sExtends: "csv", sButtonText: "CSV", "bSelectedOnly": true },
                { sExtends: "xls", sButtonText: "XLS", "bSelectedOnly": true },
                { sExtends: "pdf", sButtonText: "PDF", "bSelectedOnly": true },
                "select_none",
                { sExtends:    "select", sButtonText: "Select Filtered",
                    "fnClick": function (nButton, oConfig, oFlash) {
                        //change example to table id                                                   
                        var oTT = TableTools.fnGetInstance('example');
                        oTT.fnSelectAll(true); //True = Select only filtered rows (true). Optional - default false.
                    }
                }
            ],
            "sSwfPath": "pathxy.swf"
        },
        "pageLength": 25
    } );

    // Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );

    //var tt = new $.fn.dataTable.TableTools( table );

    //$( tt.fnContainer() ).insertBefore('div.dataTables_wrapper');
} );

 
</script>

Thanks in advance :)

allan

Hi,

Thanks for posting your code. The issue is with the submitOnBlur: true option - or rather where is has been specified. It isn't a top level initialisation object, but rather a property of formOptions.main, formOptions.bubble or formOptions.inline - so you could add:

formOptions: {
  inline: {
    submitOnBlur: true
  }
}

to your Editor initialisation. Or possibly easier, where you call inline() just add { submitOnBlur: true }` as the second parameter to the function call.

Regards,
Allan

scherbaum

Awesome! Thank you so much! :)