How do I save edited tables?

How do I save edited tables?

chris_rchris_r Posts: 6Questions: 2Answers: 0

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);
    }

This question has an accepted answers - jump to answer

Answers

  • chris_rchris_r Posts: 6Questions: 2Answers: 0

    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_rchris_r Posts: 6Questions: 2Answers: 0

    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.

  • kthorngrenkthorngren Posts: 18,572Questions: 26Answers: 4,406
    edited December 2022 Answer ✓

    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_rchris_r Posts: 6Questions: 2Answers: 0

    ugh. Ok thanks!

  • allanallan Posts: 58,914Questions: 1Answers: 9,485 Site admin

    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

Sign In or Register to comment.