Kendo UI web drop down list in grid on edit event

Question

I have using the Kendo UI Web grid and when I edit a record in the grid I have a drop down list to select values. The problem that I can't seem to over come is how do I set the value of the drop down, when the edit button is clicked, to the value that was present in the table (grid) before the edit.

I have my code below that I have tried and every time it displays blank when I right it out to the console.

    $("#project-numbers-grid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: "/Project/GetProjectNumbers",
                    dataType: "json",
                    data: {
                        q: function () {
                            var model = {
                                projectid: "@Model.Id"
                            };
                            return JSON.stringify(model);
                        }
                    }
                },
                update: {
                    url: "/Project/UpdateProjectNumber",
                    dataType: "json"
                },
                destroy: {
                    url: "/Project/DeleteProjectNumber",
                    dataType: "json"
                },
                create: {
                    url: "/Project/CreateProjectNumber",
                    dataType: "json",
                    complete: function (e) {
                        $("#project-numbers-grid").data("kendoGrid").dataSource.read();
                    }
                },
                parameterMap: function (options, operation) {
                    //if (operation !== "read" && options.models) {
                    //    return { models: kendo.stringify(options.models) };
                    //}
                    if (operation === "read") {
                        return options;
                    }

                    var model = {
                        id: options.Id,
                        projectid: "@Model.Id",
                        number: options.Number,
                        active: options.Active,
                        projectphase: options.ProjectPhase
                    };
                    return model;
                }
            },
            pageSize: 4,
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { editable: false },
                        ProjectPhase: { validation: { required: true } },
                        Number: { validation: { required: true } },
                        Active: { type: "boolean" }
                    }
                }
            }
        },
        toolbar: ["create"],
        edit: function (e) {
            var d = $('#project-phases').data('kendoDropDownList');
            d.value(e.model.ProjectPhase);
            console.log(d.value());
        },
        columns: [
            {
                title: "Project Phase",
                field: "ProjectPhase",
                editor: projectPhaseEditor,
                template: "#= ProjectPhase #"
            },
            {
                title: "Project Number",
                field: "Number"
            },
            "Active",
            {
                title: "&nbsp",
                command: ["edit", "destroy"]
            }
        ],
        editable: "inline",
        pageable: {
            refresh: true
        }
    });
});

function projectPhaseEditor(container, options) {
    $('<input required id="project-phases" data-text-field="ProjectPhase" data-value-field="Id" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataTextField: "ProjectPhase",
            dataValueField: "Id",
            dataSource: {
                transport: {
                    read: {
                        dataType: "json",
                        url: "/Project/GetProjectPhases"
                    }

                }
            }
        });
}

Here is some old code I found that were used with the telerik MVC helpers and I want this exact behavior except to work with the kendo code above.

<script type="text/javascript">
    function onProductManufacturerEdit(e) {
        $(e.form).find('#Manufacturer').data('tDropDownList').select(function (dataItem) {
            return dataItem.Value == e.dataItem['ManufacturerId'];
        });
    }
</script>

Any help on setting the drop down value from the table grid value on edit is much appreciated. Thanks

EDIT: I have tried the following, without success...

   $("#project-phases").attr("data-value-field", e.model.ProjectPhase);

EDIT: I have made the following changes without any success...

 function projectPhaseEditor(container, options) {
    $('<input required id="project-phases" data-text-field="ProjectPhase" data-value-                                                                        
    field="ProjectPhaseId" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataTextField: "ProjectPhase",
            dataValueField: "ProjectPhaseId",
            dataSource: {
                transport: {
                    read: {
                        dataType: "json",
                        url: "/Project/GetProjectPhases"
                    }
                }
            }
        });
}

And my updated code:

 var d = $('#project-phases').data('kendoDropDownList');
            d.value(e.model.ProjectPhaseId);

The problem is there is no ProjectPhaseId on e.model. There is an e.model.Id but that id is the one of the projectnumber entity from the database not the id of the project phase.

Answer 1

I was able to successfully select the value that was present in the table. I did this by changing my data model on the server side to include a "ProjectPhaseModel" and then the key on the client is when you are defining your columns to map the dropdown column to the property on your server model that is a class that holds the dropdown information. Here is the column information on the client side:

           {
                title: "Project Phase",
                field: "ProjectPhase",
                editor: projectPhaseEditor,
                template: "#= ProjectPhase.ProjectPhase #"
            }

And the server side model:

public class ProjectNumberModel : BaseModel
{
    public ProjectPhaseModel ProjectPhase { get; set; }

    public string Number { get; set; }

    public bool Active { get; set; }

    public int ProjectId { get; set; }

    public ProjectNumberModel()
    {
        ProjectPhase = new ProjectPhaseModel();
    }
}

public class ProjectPhaseModel
{
    public int ProjectPhaseId { get; set; }
    public string ProjectPhase { get; set; }
}