Inline Editing Submit entire row on save

jbblake

I am being asked to develop a web page that uses inline editing. From the examples and discussions it appears that inline editing will only work if you do a onBlur: 'submit'
My question is it possible to use inline editing and only submit using a button or perhaps on an event? Best option would be to save all the rows with changes, but one step at a time.
Thank You

allan

Yes, this blog post shows how it could be done. There it is queued changes for the whole table, but equally you could do it for each row.

Allan

INR

Hi Allan,

I followed the example and followed everything but I am getting error while update triggers to local table ( whether editor update or inline update )

I dont want the Ajax Save update for every changes. I will be queuing all the changes and call the server side 'processing' when the user triggers 'Save' button outside of dataTables.

the source data comes from SQL Server Table Value Function.

    var changedRows = []; // Array to store local edits for queue
    var table;
    var editorOpts; 
    var localEditor;
    var ajaxEditor;

    editorOpts  = {
        table: "#Table",
        idSrc: 'LineNumber',
        fields: [
            {
                label: "LineNumber:",
                name: "LineNumber"
            }, {
                label: "TaxApplicable:",
                name: "TaxApplicable"
            }, {
                label: "BestQuotePrice:",
                name: "BestQuotePrice"
            }, {
                label: "Markup:",
                name: "ProductMarkUp"
            }, {
                label: "Retail Price:",
                name: "RetailPrice"
            }
        ]
    };

    // Editor instance to store local changes
    localEditor = new $.fn.dataTable.Editor(editorOpts);

    $( localEditor.field( 'ProductMarkUp' ).input() ).on( 'change', function (e, d) {
        console.log('ProductMarkUp');
        if (!d && !d.editor) {
            var taxCode = localEditor.field( 'TaxApplicable' ).val();
            var bestQuotePrice = localEditor.field( 'BestQuotePrice' ).val();
            var newMarkUp = localEditor.field( 'ProductMarkUp' ).val();
            var newPrice = 0.00; 

            //If Markup is Updated, Calculate the New Retail Price
            newPrice = (bestQuotePrice + (bestQuotePrice * (newMarkUp / 100.00)))
            if (taxCode == 1) {
                newPrice = newPrice * (1.0 + (10.0 / 100.00))
            }
            newPrice = newPrice.toFixed(2);

            //Update the New calculated value
            localEditor.field( 'RetailPrice' ).val(newPrice);
        }
    });


    $( localEditor.field( 'RetailPrice' ).input() ).on( 'change', function (e, d) {
        console.log('RetailPrice');
        if (!d && !d.editor) {

            var taxCode = localEditor.field( 'TaxApplicable' ).val();
            var bestQuotePrice = localEditor.field( 'BestQuotePrice' ).val();
            var newMarkUp = 0.00; //localEditor.field( 'ProductMarkUp' ).val();
            var newPrice = localEditor.field( 'RetailPrice' ).val();

            //If New Price is Updated, Calculate the New Markup
            if (taxCode == 1) {
                newPrice = newPrice / (1.0 + (10.0 / 100.00))
            }
            newMarkUp = ((newPrice / bestQuotePrice) - 1) * 100
            newMarkUp = newMarkUp.toFixed(2);

            //**Reset Plant Manager Approval function
            localEditor.field('ProductMarkUp' ).val(newMarkUp);
        }
    });

    // After submitting edit to dt table, store row number in array for later submission.
    localEditor.on('postEdit', function(e, json, data) {
        console.log('postEdit');
        changedRows.push( '#'+data.DT_RowId );
    });

    // Activate the bubble editor on click of a table cell
    $('#Table').on( 'click', 'tbody td:not(:first-child)', function (e) {
        //localEditor.bubble( this );
         localEditor.inline(this,{
                onBlur: 'submit'
            });
    } );

    table = $("#Table").DataTable({
        dom: '<"html5buttons"B>lgTfrtip',
        select: {
            style: 'single'
        },
        ajax: {
            url: "GetData",
            type: "POST",
            datatype: "json"
        },
        orderClasses: false,
        columnDefs:[],
        idSrc: 'LineNumber',
        columns: [
            { data: "LineNumber", name: "LineNumber", orderable: false, visible: false, autoWidth: true },
            { data: "TaxApplicable", name: "TaxApplicable", title: "TaxApplicable", orderable: false, width: 80, visible: false },
            { data: "BestQuotePrice", name: "BestQuotePrice", title: "Best Cost", orderable: false, width: 80, className: "text-right", render: $.fn.dataTable.render.number(',', '.', 2, '$') },
            { data: "ProductMarkUp", name: "ProductMarkUp", title: "Markup", editable: true, orderable: false, width: 80, className: "text-right", render: $.fn.dataTable.render.number(',', '.', 2, '', '%') },
            { data: "RetailPrice", name: "RetailPrice", title: "Retail Price", editable: true, orderable: false, width: 80, className: "text-right", render: $.fn.dataTable.render.number(',', '.', 2, '$') }
        ],
        initComplete: function (settings, json) {
            //updateSelectAllSelection($("#StkAdjReqTable"));
        },
        drawCallback: function( settings ) {
            //updateSelectAllSelection($("#StkAdjReqTable"));
        }
    });

Error :

TypeError: c is not a function dataTables.editor.min.js:97:328
_submitTable http://localhost:54605/Scripts/DataTables/dataTables.editor.min.js:97
each jQuery
_submitTable http://localhost:54605/Scripts/DataTables/dataTables.editor.min.js:97
_submit http://localhost:54605/Scripts/DataTables/dataTables.editor.min.js:96
l http://localhost:54605/Scripts/DataTables/dataTables.editor.min.js:64
_event http://localhost:54605/Scripts/DataTables/dataTables.editor.min.js:85
l http://localhost:54605/Scripts/DataTables/dataTables.editor.min.js:64
submit http://localhost:54605/Scripts/DataTables/dataTables.editor.min.js:64
_blur http://localhost:54605/Scripts/DataTables/dataTables.editor.min.js:80
blur http://localhost:54605/Scripts/DataTables/dataTables.editor.min.js:42
_tidy http://localhost:54605/Scripts/DataTables/dataTables.editor.min.js:102
inline http://localhost:54605/Scripts/DataTables/dataTables.editor.min.js:56
<anonymous> http://localhost:54605/Home/RetailPriceReview:2344
jQuery 2

INR

more errors

TypeError: d is undefined RetailPriceReview:2317:27
<anonymous> http://localhost:54605/Home/RetailPriceReview:2317
jQuery 2
dispatch
handle

INR

Hi All,

Found the problem. Missed the Keytables js and css to include.

Still having problem related to column calculation when the data is modified.

Let me do more work on this to come back if there is any problem

Regards