Embedded Drop Down List not returning data in a format the grid can handle

[David]

I have created a drop down list embedded within my grid using the demo: https://demos.telerik.com/kendo-ui/grid/editing-custom

For some reason when I select an option within the drop down it doesn't send the data back in a format the grid can use, however the default value (if I don't touch drop down) works just fine.

 

My datasource designed as such: 

schema: {
    model: {
        id: "SwitchID",
        fields: {
            SwitchID: { editable: false, type: "number" },
            switchperson: {
                type: "string",
                validation: { required: true, message: "Switchperson information is required." },
            },
            phoneNum: { type: "string" },
            Location: { type: "string" },
            SwitchPersonType: { defaultValue: { switchPersontypeValue: "Employee", switchPersontypeID: 1 } },
            //SwitchPersonType: { type: "string" },

        },
    },
},

and the kendo grid:

$("#switchpersonTable").kendoGrid({
    dataSource: switchpersonDataSource,
    scrollable: true,
    sortable: true,
    filterable: false,
    pageable: true,
    toolbar: [{ name: "create", text: "Add Switchperson" }],
    columns: [
        { field: "switchperson", title: "Switchperson", width: "200px" },
        { field: "phoneNum", title: "Phone #", width: "200px" },
        { field: "Location", title: "Location", width: "200px" },
        {
            field: "SwitchPersonType",
            title: "Type",
            width: "150px",
            template: "#=SwitchPersonType.switchPersontypeValue#",
            editor: switchPersonTypeDropDownEditor,
        },
        { command: ["edit", "destroy"], title: " ", width: "200px" },
    ],
    editable: "inline",
});

The editor is the built like this:

$(
    '<input required name="' + options.field + '" data-text-field="switchPersontypeValue" data-value-field="switchPersontypeID" data-bind="value:' +
        options.field +
        '"/>'
)
    .appendTo(container)
    .kendoDropDownList({
        autoBind: false,
        dataSource: {
            data: ddlSwitchPersonType,
        },
    });

and the data source for the drop down list:

var ddlSwitchPersonType = [
    {
        switchPersonTypeID: 1,
        switchPersontypeValue: "Employee",
    },
    {
        switchPersonTypeID: 2,
        switchPersontypeValue: "Contractor",
    },
];

If I create an item in the grid and don't touch the dropdown I get the following back in the e.data:

Location: ""
SwitchID: 0
SwitchPersonType:
            switchPersontypeID: 1
            switchPersontypeValue: "Employee"
__proto__: Object
phoneNum: ""
switchperson: "sdaf"
__proto__: Object

But if I select an option (even the default) the data doesn't come back as an object.  It only sets a field called SwitchPerson 

Location: ""
SwitchID: 0
SwitchPersonType: "Employee"
phoneNum: ""
switchperson: "sdf"
__proto__: Object

Any thoughts on the cause of this?

Thanks in advance

[David]

This was a rookie mistake... I was not consistent with my variable naming and had a lower case in my ID field when I should have had an upper case.

[Viktor Tachev]

Hello David,

I am glad that the issue is resolved. Thank you for sharing the solution with the community. This can help someone facing similar behavior. 


Regards,
Viktor Tachev
Progress Telerik