Get usable data for serverside editing

Igorski88 · November 2019

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?

allan · November 2019

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

Igorski88 · 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?

Igorski88 · November 2019

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.

colin · November 2019

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

Igorski88 · 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.

allan · November 2019

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

Igorski88 · 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":""
               }]
}

Igorski88 · November 2019

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

allan · November 2019

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

Get usable data for serverside editing

Get usable data for serverside editing

Answers

Howdy, Stranger!

Categories

DataTables

Get usable data for serverside editing

Get usable data for serverside editing

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables