standalone - collections: keyless error on update

montoyam

for one of my pages I am trying to use the Editor standalone collections example. The page is displaying correctly, but when I got to edit one of the records I get the message:

Conversion failed when converting the nvarchar value 'keyless' to data type int.

I can't find 'keyless' anywhere and am not sure what is going on.

here is my code:

var editor; // use a global for the submit and return data rendering in the examples

// Template function to display the information panels. Editor will
// automatically keep the values up-to-date with any changes due to the use of
// the `data-editor-field` attribute. It knows which panel to update for each
// record through the use of `data-editor-id` in the container element.
function createPanel(data) {
    var id = data.DT_RowId;

    $(
        '<div class="panel" data-editor-id="' + id + '">' +
        '<i class="edit fa fa-pencil" data-id="' + id + '"/>' +
        '<i class="remove fa fa-times" data-id="' + id + '"/>' +
        '<dl>' +
            '<dt>Week Of:</dt><dd data-editor-field="EmployeeCounts.WeekOfDate">' + data.EmployeeCounts.WeekOfDate + '</dd> ' +
            '<dt>FT Worksite</dt><dd data-editor-field="EmployeeCounts.FT_Worksite">' + data.EmployeeCounts.FT_Worksite + '</dd>' +
            '<dt>FT Teleworking</dt><dd data-editor-field="EmployeeCounts.FT_Teleworking">' + data.EmployeeCounts.FT_Teleworking + '</dd>' +
            '<dt>FT Need Work</dt><dd data-editor-field="EmployeeCounts.FT_NeedWork">' + data.EmployeeCounts.FT_NeedWork + '</dd>' +
            '<dt>FT Out</dt><dd data-editor-field="EmployeeCounts.FT_Out">' + data.EmployeeCounts.FT_Out+ '</dd>' +
        '</dl>' +
        '<dl>' +
        '<dt>PT Worksite</dt><dd data-editor-field="EmployeeCounts.PT_Worksite">' + data.EmployeeCounts.PT_Worksite + '</dd>' +
        '<dt>PT Teleworking</dt><dd data-editor-field="EmployeeCounts.PT_Teleworking">' + data.EmployeeCounts.PT_Teleworking + '</dd>' +
        '<dt>PT Need Work</dt><dd data-editor-field="EmployeeCounts.PT_NeedWork">' + data.EmployeeCounts.PT_NeedWork + '</dd>' +
        '<dt>PT Out</dt><dd data-editor-field="EmployeeCounts.PT_Out">' + data.EmployeeCounts.PT_Out + '</dd>' +
        '</dl>' +

        '</div>'
    ).appendTo('#panels');
}

$(document).ready(function () {
    editor = new $.fn.dataTable.Editor({
        ajax: "api/EmployeeCounts",
        fields: [
            { label: "Week Of:", name: "EmployeeCounts.WeekOfDate" },
            { label: "FT Worksite:", name: "EmployeeCounts.FT_Worksite" },
            { label: "FT Teleworking:", name: "EmployeeCounts.FT_Teleworking" },
            { label: "FT Need Work:", name: "EmployeeCounts.FT_NeedWork" },
            { label: "FT Out:", name: "EmployeeCounts.FT_Out" },
            { label: "PT Worksite:", name: "EmployeeCounts.PT_Worksite" },
            { label: "PT Teleworking:", name: "EmployeeCounts.PT_Teleworking" },
            { label: "PT Need Work:", name: "EmployeeCounts.PT_NeedWork" },
            { label: "PT Out:", name: "EmployeeCounts.PT_Out" },

        ]
    });

    // Create record - on create we insert a new panel
    editor.on('postCreate', function (e, json) {
        createPanel(json.data[0]);
    });

    $('button.create').on('click', function () {
        editor
            .title('Create new record')
            .buttons('Create')
            .create();
    });

    // Edit
    $('#panels').on('click', 'i.edit', function () {
        editor
            .title('Edit record')
            .buttons('Save changes')
            .edit($(this).data('EmployeeCounts.EmployeeCountID'));
    });

    // Remove
    $('#panels').on('click', 'i.remove', function () {
        editor
            .title('Delete record')
            .buttons('Delete')
            .message('Are you sure you wish to delete this record?')
            .remove($(this).data('EmployeeCounts.EmployeeCountID'));
    });

    // Load the initial data and display in panels
    $.ajax({
        url: 'api/EmployeeCounts',
        dataType: 'json',
        success: function (json) {
            for (var i = 0, ien = json.data.length; i < ien; i++) {
                createPanel(json.data[i]);
            }
        }
    });
});

montoyam

ah, I see (and I found other posts about 'keyless' in the forums. I am not getting a record ID.

in this code:

    $('#panels').on('click', 'i.edit', function () {
        editor
            .title('Edit record')
            .buttons('Save changes')
            .edit($(this).data('EmployeeCounts.EmployeeCountID'));
        console.log($(this).data());
    });

in the console log I am only seeing : {id: "row_1"}
I thought I was to use the ID field name.

allan

$(this).data('EmployeeCounts.EmployeeCountID')

Is that not returning undefined or null? I don't see where EmployeeCounts.EmployeeCountID is being defined as a data property anywhere on the i element?

Allan

montoyam

correct, I was thinking the data was returning my controller data and that I needed to change the ID in the example to match my data.

I changed it back to .edit($(this).data('id')) like in the example and it worked just fine.