Question

I am using an editor template to display a dropdown list via popup for a Kendo grid. The initial query to fill the grid uses /?$expand=ContactType, where ContactType is a lookup value and Contact is the parent record. This works fine and the grid displays the correct data and associated ContactType. Clicking on edit also works as I have defined an editor template to display the dropdown and the correct value in the dropdown is selected.

However my problem is in adding a new record. When I click add I get

ContactType is undefined.

This make sense as ContactType is not explicitly defined in the datagrid’s datsource schema since I am using expand. I can add ContactType to the model definition, no problem, and the error goes away – but when sending the update ContactType is an empty string and not picking up the actual selected value. ContactType is a related entity to Contact and from my understanding you cannot define a Model with related entities they do have HierarchicalDataSource but that only works with treeview.

So given a dropdown list in a popup editor for a grid, how do you get the Add new to send the selected dropdown value?

Here is some code, TIA for any help

<script id="popup_editor" type="text/x-kendo-template">
    <div class="k-edit-label">
    <label for="firstName">First Name</label>
    </div>
    <input type="text" name="firstName"  data-bind="value:firstName" />

    <div class="k-edit-label">
    <label for="middleName">Middle Name</label>
    </div>
    <input type="text" name="middleName"  data-bind="value:middleName" />

    <div class="k-edit-label">
    <label for="lastName">Last Name</label>
    </div>
    <input type="text" name="lastName"  data-bind="value:lastName" />

    <input name="ContactType" data-source="myDropdownDS" data-text-field="name"
    data-value-field="__KEY" data-bind="value:ContactType.__KEY" data-role="dropdownlist" />
</script>

<script>

    //Local
    var crudServiceBaseUrl = "http://127.0.0.1:8081/cors/";
    var myGridDS = new kendo.data.DataSource({
        type : "json",
        transport : {
            read : {
                url : crudServiceBaseUrl + "Contact" + "/?$expand=ContactType",
                dataType : "json",
                type : "GET",
                complete : function(jqXHR, textStatus) {
                    textStatus = "read";
                }
            },
            update : {
                url : crudServiceBaseUrl + "Contact" + "/?$method=update",
                dataType : "json",
                type : "POST",
                complete : function(jqXHR, textStatus) {
                    textStatus = "update";
                }
            },
            destroy : {
                url : crudServiceBaseUrl + "Contact" + "/?$method=delete",
                type : "GET",
                complete : function(jqXHR, textStatus) {
                    textStatus = "destroy";
                }
            },
            create : {
                url : crudServiceBaseUrl + "Contact" + "/?$method=update",
                dataType : "json",
                type : "POST",
                complete : function(jqXHR, textStatus) {
                    textStatus = "create";
                }
            },
            errors : function(response) { 
                var errorData = $.parseJSON(e.responseText);
                alert(errorData.errorMessage);
                //$("#loading").innerHtml = "error";
            },
            parameterMap : function(options, operation) {
                if (operation == "create") { 
                    return JSON.stringify({
                        "__ENTITIES" : options.models
                    });
                } else if (operation == "update") { 
                    var isEdit = true
                    var myParentEntity = "Contact"
                    var myData = options.models[0];
                    //uri gets added after first edit from Wakanda response, not needed and causes update to fail so delete
                    // delete myData.uri;
                    //

                    configureDataRowRelations(myParentEntity, myData, isEdit)
                    return JSON.stringify({
                        "__ENTITIES" : options.models
                    });
                }

            }
        },
        serverPaging : true,
        serverSorting : true,
        serverFiltering : true,
        batch : true,
        pageSize : 30,
        schema : {
            model : {
                id : "__KEY",
                fields : {
                    __KEY : {
                        type : "string"
                    },
                    __STAMP : {
                        type : "number"
                    },
                    ID : {
                        editable : false,
                        nullable : true
                    },
                    firstName : {
                        type : "string",
                        validation : {
                            required : true
                        }
                    },
                    middleName : {
                        type : "string"
                    },
                    lastName : {
                        type : "string",
                        validation : {
                            required : true
                        }
                    },
                    ContactType : {}
                }
            },
            data : "__ENTITIES"
        }
    });

    var myDropdownDS = new kendo.data.DataSource({
        type : "json",
        transport : {
            read : {
                url : crudServiceBaseUrl + "ContactType",
                dataType : "json",
                type : "GET",
            }
        },
        batch : true,
        pageSize : 30,
        schema : {
            model : {
                id : "__KEY",
                fields : {
                    __KEY : {
                        type : "string"
                    },
                    __STAMP : {
                        type : "number"
                    },
                    ID : {
                        editable : false,
                        nullable : true
                    },
                    name : {
                        type : "string",
                        validation : {
                            required : true
                        }
                    }
                }
            },
            data : "__ENTITIES"
        }
    });



    $('#PopupContactContactTypeGrid').kendoGrid({
        selectable : "row",
        filterable : true,
        pageable : true,
        sortable : true,
        dataSource : myGridDS,
        toolbar : ["create"],
        columns : [{
            field : "ID"
        }, {
            field : "firstName",
            title : "First Name"
        }, {
            field : "middleName",
            title : "Middle Name"
        }, {
            field : "lastName",
            title : "Last Name"
        }, {
            field : "ContactType.name",
            title : "Contact Type"
        }, {
            command : ["edit", "destroy"],
            title : "&nbsp;",
            width : "210px"
        }],
        editable : {
            mode : "popup",
            template : $("#popup_editor").html()
        },

    });

Answer 1

If the value is not populated to the input in your case this, could be caused by using a name different than the field name

So I changed data-bind="value:ContactType.__KEY"
to data-bind="value:ContactType"

Because of lack of good docs and examples which is not usually an issue with Telerik, this has taken a long time to solve.