Get usable data for serverside editing

Get usable data for serverside editing

Igorski88Igorski88 Posts: 25Questions: 8Answers: 0

I have been using the Datatable plug in for about 2 years now. I love it. I just paid for the editor and am excited to use it in my .Net projects. I am successfully getting the action string into a service side c# method but my problem is the data object is empty. I could see on my chrome browser that I am passing data but I get nothing on the serverside. The reason I need this is so that I can use entity framework to save the edit and pass back the appropriate Json info. It seems to me that there are no entity framework examples out there. I can do all the entity framework code I just need to usable data. Any advice?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Can you show me how you are attempting to read the data on the server-side? It should just be Request.Form to get the form parameters.

    Allan

  • Igorski88Igorski88 Posts: 25Questions: 8Answers: 0
    edited November 2019

    What I ended up doing was editing the data in the Ajax call:

        editor = new $.fn.dataTable.Editor({
                        //ajax: "/Sales/SaveCustomeExpensesChanges",
                        ajax: {
                            edit: {
                                url: "/Sales/SaveCustomeExpensesChanges",
                                type: "POST",
                                dataType: "application/json",
                                contentType: "application/json",
                                data: function (d) {
                                    return "{ 'json': '" + JSON.stringify(d.data) + "', 'Action': '" + JSON.stringify(d.action) + "'}";
                                }
                            }
                        },
                        ...
    

    On server side I get "{ 'json': '{"13":{"Transaction_Type":"Supplies"}}', 'Action': '"edit"'}"

    Once I'm done saving the data I return the following:

    { "data": [{"ID":13,"Description":"Test","Transaction_Type":"Supplies","Transaction_Number":"12345","Transaction_Qty":"6","SKU":"I5-3111-HFW0","Amount":"23","TypeOfEvent":"Once a Month","Event_Start":"11/15/2019","Event_End":"11/29/2019"}]}

    My return string matches what this says it should look like.
    I do see that this is being returned by checking the network tab on Chrome.
    The Editor does not save my changes on the screen but once I reload the page I see the change. I get a "a is not a function" error. How do I solve this? Does my return string look wrong?

  • Igorski88Igorski88 Posts: 25Questions: 8Answers: 0

    Does the Ajax URL for the editor have to be the same exact URL for the data table? Currently my Ajax URL for the editor invokes a method for just editing. Am I a jurox URL for the data table invokes a method for the the entire data table.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @Igorski88 ,

    The Editor does not save my changes on the screen but once I reload the page I see the change.

    It would do this if Editor isn't receiving the correct response from the server after the edit. Can you post the JSON being returned, please.

    Does the Ajax URL for the editor have to be the same exact URL for the data table?

    No, they can be different - this example demonstrates that.

    Cheers,

    Colin

  • Igorski88Igorski88 Posts: 25Questions: 8Answers: 0
    edited November 2019

    Here is my code: Still doesnt work :(

    Editor:

    editor = new $.fn.dataTable.Editor({
    ajax: "/Sales/SaveChanges",
    table: "#TransactionsDataTable",
    idSrc: 'ID',
    fields: [{
    label: "ID",
    name: "ID"
    }, {
    label: "Description",
    name: "Description"
    }, {
    label: "Transaction_Type",
    name: "Transaction_Type"
    }, {
    label: "Transaction Number",
    name: "Transaction_Number"
    }, {
    label: "Amount:",
    name: "Amount"
    }, {
    label: "Transaction Qty:",
    name: "Transaction_Qty"
    }, {
    label: "SKU",
    name: "SKU"
    }, {
    label: "Frequency:",
    name: "TypeOfEvent"
    }, {
    label: "Start date:",
    name: "Event_Start",
    type: "datetime"
    }, {
    label: "End date:",
    name: "Event_End",
    type: "datetime"
    }
    ],
    formOptions: {
    inline: {
    onBlur: 'submit'
    }
    }
    });
    // Activate an inline edit on click of a table cell
    $('#CustomTransactionsDataTable').on('dblclick', 'tbody td', function (e) {
    editor.inline(this);
    //submit: 'allIfChanged'
    });
    editor.on('preSubmit', function (e, data, action) {
    data.json = JSON.stringify(data.data)
    });
    editor.on('postSubmit', function (e, json, data, action) {
    if (action === "edit") {
    json.data = json;
    }
    });

    Table:

    $('#TransactionsDataTable').dataTable({
                    ajax: {
                        url: "/Sales/GetTransactions",
                        type: 'POST',
                        dataSrc: ""
                    },                
                    buttons: ['copyHtml5', 'excelHtml5', 'pdf', 'colvis'],                
                    ordering: true,
                    info: true,
                    paging: true,
                    pagingType: "full_numbers",
                    autoWidth: true,
                    deferRender: true,
                    dom:
                        "<'row'<'col-sm-2'l><'col-sm-4'B><'col-sm-4 pull-right'f>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                    autoFill: true,
                    colReorder: {
                        realtime: true
                    },
                    columns: [
                        {//ID
                            title: "ID",
                            data: 'ID',                        
                            visible: false,
                        },
                        {//Description
                            title: "Description", //1.
                            data: 'Description',
                            className: 'Center-The-Table-Column-Text'
                        },
                        {//Transaction_Type
                            title: "Transaction Type",
                            data: 'Transaction_Type',
                            className: 'Center-The-Table-Column-Text'
                        },
                        {//Transaction_Number
                            title: "Transaction Number",
                            data: 'Transaction_Number',
                            className: 'Center-The-Table-Column-Text'
                        },
                        {//Amount
                            title: "Amount", //1.
                            data: 'Amount',
                            className: 'Center-The-Table-Column-Text',
                            render: function (data) {
                                Return = addCommas_And_DollerSign(data);   
                                return Return;
                            }
                        },
                        {//Transaction_Qty
                            title: "Qty",
                            data: 'Transaction_Qty',
                            className: 'Center-The-Table-Column-Text'
                        },
                        {//SKU
                            title: "SKU",
                            data: 'SKU',
                            className: 'Center-The-Table-Column-Text'
                        },
                        {//TypeOfEvent
                            title: "Frequency",
                            data: 'TypeOfEvent',
                            className: 'Center-The-Table-Column-Text'
                        },
                        {//Event_Start
                            title: "Start Date",
                            data: 'Event_Start',
                            className: 'Center-The-Table-Column-Text'
                        },
                        {//Event_End
                            title: "End Date",
                            data: 'Event_End',
                            className: 'Center-The-Table-Column-Text'
                        }
                    ],
                    pageLength: 25,
                    order: [[0, "desc"]],//"asc" or ""desc"  
    
                });
    

    The Data client to server: {"7":{"Transaction_Number":"test"}}
    The Data from server to client: {"ID":7,"Description":"bnm","Transaction_Type":"Fee","Transaction_Number":"test","Transaction_Qty":"1","SKU":"QW-CWPW-7W7X","Amount":"7.98","TypeOfEvent":null,"Event_Start":null,"Event_End":null}

    The current result:
    The row that I edit just gets deleted from the table until I refresh the page then I see the row and the changes. I have spent hours reading the manual. I have tried everything.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Right - so the issue is that the data being returned from the server is not quite what Editor is expecting.

    This would do it:

    {
        "data": [{
            "ID": 7,
            "Description": "bnm",
            "Transaction_Type": "Fee",
            "Transaction_Number": "test",
            "Transaction_Qty": "1",
            "SKU": "QW-CWPW-7W7X",
            "Amount": "7.98",
            "TypeOfEvent": null,
            "Event_Start": null,
            "Event_End": null
        }]
    }
    

    Allan

  • Igorski88Igorski88 Posts: 25Questions: 8Answers: 0
    edited November 2019

    Allan,
    I really appreciate your support. One of the biggest reasons I decided to buy the editor is because of you continued support.

    I have done just as you said from the very beginning. Please see opening post. when I do that I get an error:

    dataTables.editor.min.js:111 Uncaught TypeError: a is not a function
    at f.edit (dataTables.editor.min.js:111)
    at f._dataSource (dataTables.editor.min.js:82)
    at f._submitSuccess (dataTables.editor.min.js:100)
    at dataTables.editor.min.js:96
    at Object.e.complete (dataTables.editor.min.js:77)
    at j (jquery.min.js:2)
    at Object.fireWith (jquery.min.js:2)
    at x (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    edit @ dataTables.editor.min.js:111
    f._dataSource @ dataTables.editor.min.js:82
    f._submitSuccess @ dataTables.editor.min.js:100
    (anonymous) @ dataTables.editor.min.js:96
    e.complete @ dataTables.editor.min.js:77
    j @ jquery.min.js:2
    fireWith @ jquery.min.js:2
    x @ jquery.min.js:4
    (anonymous) @ jquery.min.js:4
    load (async)
    send @ jquery.min.js:4
    ajax @ jquery.min.js:4
    f._ajax @ dataTables.editor.min.js:79
    f._submit @ dataTables.editor.min.js:96
    (anonymous) @ dataTables.editor.min.js:64
    f._event @ dataTables.editor.min.js:85
    l @ dataTables.editor.min.js:64
    f.submit @ dataTables.editor.min.js:64
    f._blur @ dataTables.editor.min.js:80
    f.blur @ dataTables.editor.min.js:42
    (anonymous) @ dataTables.editor.min.js:58
    dispatch @ jquery.min.js:3
    r.handle @ jquery.min.js:3

    I only get that error when the following is returned from server to client after an edit:

    {
       "data": [{
              "ID":12,
              "Description":"test",
              "Transaction_Type":"Fee",
              "Transaction_Number":"12345",
              "Transaction_Qty":"1",
              "SKU":"5",
              "Amount":"2",
              "TypeOfEvent":"One Time Only",
              "Event_Start":"2019-11-09",
              "Event_End":""
                   }]
    }
    

  • Igorski88Igorski88 Posts: 25Questions: 8Answers: 0

    SOLVED:
    I had to update my DataTable to 1.10.20(latest)

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    Ah - you might have been using 1.10.16 or earlier? There was a fix in Editor that also needed an update in DataTables. I think it was 1.10.17 or thereabouts.

    Good to hear you have it working now.

    Allan

This discussion has been closed.