how to display the editing(changes) of an older row without duplicating it, when creating a new row?

John Z

I am working with datatable 1.10.10 and Editor 1.5.4 and everything is working great.

but little stuck here.

I have one table with a Permanent inline checkboxes, like in the example https://datatables.net/blog/2014-09-09#Displaying-the-input-checkbox
it works great with edit, but not when adding a new row to the table(using the new Button).
I want to have at all time only one checked by the user.

if one is checked I uncheck the other checked, if there is one of course, and check the new value.

    exampleEditor = new $.fn.dataTable.Editor({
        ajax: {
            url: "../example/MyTable?user=" + user,
            data: function (d) {
                return JSON.stringify(d);
            },
            type: "POST",
            contentType: "application/json; charset=UTF-8"
        },
        table: "#MyTable",
        fields: [{
                label: "LastName:",
                name: "data.lastName"
            }, {
                label: "FirstName:",
                name: "data.firstName"
            }, {
                label: "chosen:",
                name: "data.chosen",
                type: "checkbox",
                DefaultValue: false,
                separator: "|",
                options: [
                    {label: '', value: true}
                ]
            }
        ]
    });


    //initialize Datatable
    var table = $("#MyTable").DataTable({
        dom: "<'row'<'col-sm-6'B><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-2'l><'col-sm-10'p>><'row'<'col-sm-12'i>>",
        ajax: "../example/MyTable?user=" + user,
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        columns: [

            {data: 'data.firstName'},
            {data: 'data.LastName'},               
            {
                data: "data.Chosen",
                orderable: false,
                render: function (data) {
                    return '<input type="checkbox" style="width:15px;height:15px;margin-left:35px" ' + (data ? 'checked' : '') + ' >';

                }
            }
        ],
        order: [1, 'asc'],
        select: {
            style: 'os',
            selector: 'td:not(:last-child)'
        },
        buttons: [
            {extend: "create", editor: exampleEditor},
            {extend: "edit", editor: exampleEditor},
            {extend: "remove", editor: exampleEditor},
            'excel'
        ]
    });


    $('#MyTable').on('click', 'td:last-child input', function () {

        if ('data.Chosen', $(this).prop('checked') ? true : false === true) {  
            var row = table.row($(this).closest('tr')).data();
            last = row.data.lastName;

            $('#rowSelectedlastName').html('[' + lastName + ']');
            } else {
            $('#rowSelectedlastName').html('nothing selected');
        }
        exampleEditor
                .edit($(this).closest('tr'), false)
                .set('data.Chosen', $(this).prop('checked') ? true : false)  //Or 1 and 0
                .submit();
    });


    //Post Create
    //clusterChangesTblEditor.on('postCreate', function () {
       //         loadPageAgain();   // (it works fine when loading the Page Again, which means I need to do some changes to the front end.)
    // });      


    json response from inventory Service(From the create Method)
    {"data":[{"DT_RowId":52,"data":{"lastName":"Doe","firstName":"John","chosen":false},{"DT_RowId":87,"data":{"lastName":"Steel","firstName":"jack","chosen":true}]}

//DT_RowId: 52(an existring row) is not replacing the older row, but it is duplicating with only difference is that the checkbox is unchecked(which is what I want) but I also want it to replace the older DT_rowId not duplicating it.

//Row DT_RowId: 87(new row) is working fine.

allan

Hi,

Sorry for the delay in getting back to you about this!

if one is checked I uncheck the other checked, if there is one of course, and check the new value.

I don't quite understand this point I'm afraid. There is only one checkbox field that I can see in the above code per row. Which is the other one you want to uncheck?

Thanks,
Allan

John Z

Hi Allan,

yes I want only one field with checkbox in each row.

what I meant is that I want one Row only checked by the user, so if the user checks one row the inventory sends back JSON that's unchecks the previous row checked(if there was one checked). it works well with EDIT or with inline by simply checking them,

but when I create a new row with the Create button, and if I check the checkbox, the datatable is duplicating the previously checked row with same row(only difference being that it is unchecked) which is what I want, but it is not replacing the older checked row, it is duplicating it with only difference that it is unchecked.

Example
My Datatable rows

first last chosen
John Doe [X]

after Create button
firstName : Jack
lastName: Steele
Chosen: [X] //checked the box

the result of Json would be:
{"data":[{"DT_RowId":52,"data":{"lastName":"Doe","firstName":"John","chosen":false},{"DT_RowId":87,"data":{"lastName":"Steel","firstName":"jack","chosen":true}]}

and the datatable is giving me

John Doe [X]
John Doe [ ]
Jack Steele [X]

instead of
John Doe [ ]
Jack Steele [X]

allan

Oh I see! Thanks for the clarification.

So what I think you would need to do here is trigger an edit after the new row has been created (or a row has been edited). That could be done with submitComplete. Check to see if there are two rows which are checked and use the API (edit(), val() and submit()) to remove the checked state on the one which wasn't created / edited (which you can determine from the JSON return).

A better solution would be to use a server-side event to remove the checked state of the other row and have that automatically update the client-side. Unfortunately, Editor has an optimisation in it so that only the rows that have been created / edited can be modified by the Ajax return (I might remove that in future!). If you take that approach, you'd need to reload the table in submitComplete.

Allan