After update data data loads again in the grid. Editor.Datatable

kjanceski

Everything works as it should.I use inline edit. When i click outside the cell it calls the update method and after that it calls method for loading the data. Why is that I don't need to reload the data after updating.

editor = new $.fn.dataTable.Editor({
            ajax: "/Controller/UpdateData",
            table: "#example",
            fields: [{
                label: "",
                name: "Name"
            }, {
                label: "",
                name: "LanguageCulture"
            }, {
                label: "",
                name: "Alpha2Code"
            }
            ]
        });

        editor
            .on('open', function (e, type) {
                if (type === 'inline') {
                    // Listen for a tab key event when inline editing
                    $(document).on('keydown.editor', function (e) {
                        if (e.keyCode === 9) {
                            e.preventDefault();

                            // Find the cell that is currently being edited
                            var cell = $('div.DTE').parent();

                            if (e.shiftKey && cell.prev().length && cell.prev().index() !== 0) {
                                // One cell to the left (skipping the first column)
                                cell.prev().click();
                            }
                            else if (e.shiftKey) {
                                // Up to the previous row
                                cell.parent().prev().children().last(0).click();
                            }
                            else if (cell.next().length) {
                                // One cell to the right
                                cell.next().click();
                            }
                            else {
                                // Down to the next row
                                cell.parent().next().children().eq(1).click();
                            }
                        }
                    });
                }
            })
            .on('close', function () {
                $(document).off('keydown.editor');
            });

        $('#example').on('click', 'tbody td:not(:first-child)', function (e) {
            editor.inline(this, {
                submitOnBlur: true
            });
        });

allan

Why is that I don't need to reload the data after updating.

Editor should be doing it for you :-). If your controller is returning data in the manner Editor expects then it will use that data. If it isn't, then it will try to use the data available on the client-side, but really the best option is to return the data, as described here: http://editor.datatables.net/manual/server

Allan

kjanceski

I used code from this example:

https://editor.datatables.net/examples/inline-editing/tabControl.html

In this example after you submit data for updating grid does not reload data from server. In my case it's the opposite. After i submit data for updating servers call mehtod for update and then calls the method for reloading grids data. In my project i have different methods for getting data and different for updating. Maybe that is the problem.

allan

In this example after you submit data for updating grid does not reload data from server

It loads the data for the row that has been edited only. If you have a look in your browser's debugging tools you will be able to see the Ajax request and the response from the server.

In my project i have different methods for getting data and different for updating. Maybe that is the problem.

Possibly. Editor expects the data in the format described int he manual page I linked to above.

Allan

minifiredragon

I am having this same issue as well. I am using the inline edit and my Ajax call returns an object which looks exactly the same as the example. And when it returns it, it immediately does a call to GET the table data again from the server. Which for some reason fails (still have the ...Processing Bar... and anytime I click on a field the console pops up with a too much recursion error.

allan

Hi,

Thanks for the explanation @minifiredragon. It sounds very much like you might be using server-side processing. Is that the case? There is an example of Editor being used with server-side processing here.

Can you link to the page you are working on so I can debug and resolve the error please?

Allan

minifiredragon

@allan,

I am using inline editing. So I used the one for inline editing.

Here is the link to see: http://www.kingofsweetsstore.com/admin/test.cfm

I have turned off the saving changes to database functions as this is semi live data. So any changes u do won't be saved, but it will perform like it did save.

allan

Thanks for the link.

Two things that I notice straight away:

1. The Ajax return from the edit is empty. There is no JSON data, which Editor requires.
2. You should only need server-side processing when you have 50'000+ rows.

Allan

minifiredragon

It is? In my console I get:

for the POST after pressing enter in inline edit

{
    "row": {
        "DT_RowId": "row_901",
        "ID": "901",
        "active": "",
        "amzPrice": "12.77",
        "amzSku": "00053-1a2",
        "asin": "<a href=\"http://www.amazon.com/gp/product/B0009WD25Y\" target=\"blank\">B0009WD25Y</a>",
        "breakEven": "",
        "mailing": "",
        "prodID": "69",
        "qty": "10",
        "sysPrice": "4.04",
        "weight": ""
    }
}

And the GET is the same data sent the 1st time.

As for the count, I limited it to 20 to reduce reload time on error. Eventually there will be a lot of records and multiple people editing the data.

allan

Ah - sorry, I hadn't realised there was lots of white space in the JSON return!

I might know the issue looking at your server-side processing return - you always have:

"draw": 1,

The draw parameter should always reflect the draw data being sent to the server for the request (it is basically a counter). Make sure you cast it as an int for security rather than just echoing it back.

If you could correct that, hopefully that will address the issue.

Allan

minifiredragon

Yes, the draw did fix the issue. I didn't quite get the message when the docs were talking about draw and that it should be returned as it was sent. I had associated it with page number of the document because at the time I was having problems with changing pages so I locked it to 1.

As far as the server side processing. I think you are saying I can store the data local but update the server info? And I assume I keep the AJAX URL in the editor javascript and turn it off in the dataTables script?

allan

I think you are saying I can store the data local but update the server info?

You can. But keep in mind that every time DataTables 'draws' the table (i.e. paging, sorting, filtering) it will aways make an Ajax request if server-side processing is enabled.

Allan