How do I save edited tables?

chris_r

I need to capture the saved data from a datatable edit. I'm setting the data source to a JSON file rather than using AJAX call. A couple questions: 1) is a row edit submitted as a "save" or is there another save on the whole table? and 2) how do I capture the saved data from #1?

Here is my editor code?

    $(document).ready(function () {

        var dataSource = <%= DataTableJson %>;
        console.log(dataSource);

        editor = new $.fn.dataTable.Editor({
            data: dataSource.data,
            idSrc: "triggers.TriggerId",
            table: '#ProtocolTriggerTable',
            fields: [{
                name: "triggers.ComparisonOperatorID", //item ai-ii
                type: "select",
                options: dataSource.options["triggers.ComparisonOperatorID"],
                label: "If [Answer]"
            }, {
                name: "triggers.AnswerValue1", //item aiii-iv
                type: "select",
                options: dataSource.options["triggers.AnswerValue1"]
            }, {
                name: "triggers.AnswerValue2", //item av-vi
                label: "And"
            }, {
                name: "triggers.TriggerActionDefinitionID", //item bi-ii
                type: "select",
                options: dataSource.options["triggers.TriggerActionDefinitionID"],
                label: "Then"
            }, {
                name: "triggers.TriggeredKeyID1", //item ci
                type: "select",
                options: dataSource.options["triggers.TriggeredKeyID1"]
            }, {
                name: "triggers.TriggerHelpText",
                type: "textarea",
                width: "100%",
                label: "With Pop-Up Text"
            }, {
                name: "triggers.Answer",
                type: "textarea",
                width: "100%",
                label: "With Pop-Up Text"
            }]
        });

        // New record
        $('#newRow').on('click', function () {
            editor.inlineCreate('end');
        });

        // Edit record
        $('#ProtocolTriggerTable').on('click', 'td.editor-edit', function (e) {
            e.preventDefault();

            editor.edit($(this).closest('tr'), {
                title: 'Edit A Protocol',
                buttons: 'Submit',
            });
        });

        // Delete a record
        $('#ProtocolTriggerTable').on('click', 'td.editor-delete', function (e) {

            editor.remove($(this).closest('tr'), {
                title: 'Delete record',
                message: 'Are you sure you wish to remove this record?',
                buttons: 'Delete'
            });
        });

        //this is the table template
        var protocolTriggerTable = $('#ProtocolTriggerTable').DataTable({
            dom: "Bfrtip",
            data: dataSource.data,
            columns: [
                {
                    data: null,
                    defaultContent: '<i class="fa fa-pencil"/>',
                    className: "dt-center editor-edit",
                    orderable: false
                },
                {
                    data: null,
                    defaultContent: '<i class="fa fa-trash"/>',
                    className: "dt-center row-remove",
                    orderable: false
                },
                { data: "operators.CoDisplayText", className: "dt-center" },
                { data: "triggers.AnswerValue1" },
                { data: "triggers.TriggerText" },
                { data: "triggers.AnswerValue2" },
                { data: "actions.TaDescription" },
                { data: "protocols.protocolText" },
                { data: "triggers.TriggerHelpText" }
            ]
        });    
    });

    function mySubmit() {
        console.log("mysubmit:" + dataSource);
    }

chris_r

So I found the article https://editor.datatables.net/examples/advanced/deepObjects.html which shows what data is submitted to the server. I assume its the server code I'm missing but I can't translate PHP to C#.

chris_r

And I've been reading this: https://editor.datatables.net/manual/server#Client-to-server
I can tell what is being sent but neither tell me how to get the data object. since I don't control the form submit I'm really fuzzy on how to get the data.

kthorngren

The Editor doesn't have a data option. I think you will need to use ajax as a function and in the function update the JSON data source. Looks like this thread has an example using localstorage.

Kevin

chris_r

ugh. Ok thanks!

allan

If you don't want Editor to make an Ajax submission, then you can leave off the ajax option and it will do local table editing. The upshot is that you would be able to listen for events such as postEdit and get the data that was changed and send it to the server (or just send the whole table's data if you want to rewrite the entire JSON file - which might be easier in this case?).

Am I right in assuming you are updating a JSON file at the server-side? Might you have multiple concurrent users? If so, you would need to do row by row updates.

Allan