I want to inline edit a Datatable and store the edited values in my DB

Sowmya90

Hi,

I am using Datatables in an asp.net Project which uses c# and SQL DB. I have to display a huge amount of data, so I chose datatable instead of Gridview.In the application, I built, the user will inline edit some data in the table and that edited data will be stored in the DB. To achieve this I used jquery datatable editor and I am able to inline edit the rows but, couldn't able to retain the edited values. The controls are textboxes and dropdownlist in the datatable. can anyone help me with this?

below is my code

    var editor; // use a global for the submit and return data rendering in the examples
    $(document).ready(function () {

        editor = new $.fn.dataTable.Editor({
            ajax: "URL",
            table: "#example",
            idSrc: 'ID',
            fields: [{
                label: "Level,
                name: "Level",
                type: "select",
                options: [
                    { label: "No", value: 0 },
                    { label: "Yes", value: 1 }
                ],
            },  {
                label: "Title",
                name: "Title"
            }
            ]
        });

        // Activate an inline edit on click of a table cell
        $('#example').on('click', 'tbody td:not(:first-child)', function (e) {

            editor.inline(this, {
                onBlur: test
            });


        });
        BindTable();
    });
    function BindTable() {
        debugger;
        $.ajax({
            type: "POST",
            url: "URL",

            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            async: true,
            cache: false,
            beforeSend: function () {
                $("#divresponseLoading").addClass("loadingGif");

            },

            success: function (result) {
                var obj = $.parseJSON(result.d);
                $("#example").DataTable({
                    responsive: true,
                    destroy: true,
                    bAutoWidth: true,
                    "aaData": obj,
                    "lengthMenu": [[100, 250, 500], [100, 250, 500]],
                    "aoColumns": [

                        { "sTitle": "ID", "mData": "ID" },
                        { "sTitle": "Name", "mData": "name" },
                        { "sTitle": "Level", "mData": "LEVEL" },
                        { "sTitle": "Title", "mData": "Title" },

                  ],




                });

            },
            error: function (error) {

                AlertMessage("Unable to process data, please contact admin.");
            },
            complete: function () {

            }
        });
    } /* End of table binding */

    function test() {
        alert('Test');
        return true;
    }

colin

Hi @Sowmya90 ,

Are you seeing any console errors when you inline edit? It would also be worth checking the browser's developer tools to see what the response from the server is after the edit - that also may contain an error.

Cheers,

Colin

Sowmya90

Hi @colin,

I cannot see any errors.

you can see the attachment

colin

Hi @Sowmya90 ,

How about the server response? That's the other important thing to check.

Cheers,

Colin