Data Table Editor

dwithnall

Hi,

I'm experiencing an issue with the DTE that I'm hoping is something silly on my part.

The problem is that the editing field does not close initially after submitComplete fires.
The field successfully updates, and the data returns in the required format (see below)

However the field does not close itself.
As seen here - http://imgur.com/mXQFNrw

If I then click on another row in the table, the field does close but it collapses and the cell data is removed.
As seen here http://imgur.com/XTsbZ1p

This is occurring in a bootstrap modal if that makes a difference in Chrome, Edge & IE

Javascript used to trigger this is included below.

Any assistance you can provide would be much appreciated.

// Server response after edit
{
  "data":{
    "TotalRecords":0,
    "Id":209,
    "Name":"AP Pit 1_T11",
    "CreatedOn":"\/Date(1461852000000)\/",
    "CreatedBy":4,
    "IsDeleted":false,
    "UpdatedOn":
    "\/Date(1465518020070)\/"
  }
}


// Set up the modal
$(document).ready(function () {
    debugger;
    MapId = $("#Id").val() !== "" ? $("#Id").val() : 0;

    // Configure the editor for locations
    unusedLocationsDataTableEditor = new $.fn.dataTable.Editor({
        ajax: {
            type: "PUT",
            url: "/Location/UpdateLocation"
        },
        idSrc: "Id",
        table: "#mapUnusedLocationsTable",
        fields: [
            {
                name: "Name"
            }
        ]
    });

    // Configure the unused location data table
    unusedLocationsDataTable = $("#mapUnusedLocationsTable").DataTable({
        processing: false,
        serverSide: false,
        ajax: {
            url: "/Map/GetMapUnusedLocations/" + MapId,
            type: "GET"
        },
        idSrc: "Id",
        dom: "rfti",
        paging: false,
        scrollY: "250px",
        scrollCollapse: false,
        select: {
            style: "os",
            selector: "td:first-child"
        },
        order: [1, "asc"],
        columns: [
            {
                data: null,
                defaultContent: "",
                className: "select-checkbox",
                orderable: false,
                searchable: false
            },
            {
                data: "Name",
                orderable: true
            }
        ]
    });

    // Handle submission responses for location edits as we're returning non standard error responses
    unusedLocationsDataTableEditor.on("submitComplete", function (e, json) {
        if (json.error) {
            unusedLocationsDataTableEditor.field("Name").error("Error: " + json.error);
        } else {
            alertify.success("Location Updated");
        }
    });

    // Enable double click to edit existing locations
    unusedLocationsDataTable.on("click", "tbody td:not(:first-child)", function () {
        unusedLocationsDataTableEditor.inline(this);
    });

dwithnall

I have built a simple live demo that replicates the issue.

http://id-traingraph-webui-dev.azurewebsites.net/Test

If anyone out there knows what is going wrong I would greatly appreciate your input.

allan

Hi,

Thanks very much for posting the link to the test case. When I edit a field I can see the following JSON response:

{
    "data": {
        "TotalRecords": 0,
        "Id": 75,
        "Name": "Almoola1",
        "CreatedOn": "\/Date(1461888000000)\/",
        "CreatedBy": 4,
        "IsDeleted": false,
        "UpdatedOn": "\/Date(1465545621150)\/"
    }
}

Although that is exceptionally close to the response format required, it isn't quite right. Editor requires that the data property be an array, so it should in fact look like:

{
    "data": [ {
        "TotalRecords": 0,
        "Id": 75,
        "Name": "Almoola1",
        "CreatedOn": "\/Date(1461888000000)\/",
        "CreatedBy": 4,
        "IsDeleted": false,
        "UpdatedOn": "\/Date(1465545621150)\/"
    } ]
}

The reason for this is Editor's support for multiple row editing. Although not directly relevant to inline editing (since only a single field can be edited) the format used is common to all submission types.

Let me know how you get on with that little change - looking at the page, that should be the only one required.

Regards,
Allan

dwithnall

Arrrgghhh I am now head butting the table because I missed a couple of braces. dammit!