I am using Kendo UI Web Grid, not one of the Server Wrappers. I am only displaying a few fields in the grid. The rest of the fields are displayed in the create or edit popup. For this popup I am using a template:

<script id="popup_editor" type="text/x-kendo-template">
    <div class="k-edit-label">
        <label for="Title">Title</label>
    </div>
    <div class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="Title" data-bind="value:Title" required>
    </div>

</script>

and then I am calling it from the grid:

        editable: {
            mode: "popup",
            template: $("#popup_editor").html(),
            confirmation: "Are you sure?"
        }

This works great for input boxes. However I have a foreign key column in my table. I want to display all the options from the foreign key table in a dropdown and select the correct one based on the value in my table. I have searched around quite a bit but haven't been able to find an answer to this.

Any help would be greatly appreciated.

I am using Kendo UI Web Grid, not one of the Server Wrappers. I am only displaying a few fields in the grid. The rest of the fields are displayed in the create or edit popup. For this popup I am using a template:

<script id="popup_editor" type="text/x-kendo-template">
    <div class="k-edit-label">
        <label for="Title">Title</label>
    </div>
    <div class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="Title" data-bind="value:Title" required>
    </div>

</script>

and then I am calling it from the grid:

        editable: {
            mode: "popup",
            template: $("#popup_editor").html(),
            confirmation: "Are you sure?"
        }

This works great for input boxes. However I have a foreign key column in my table. I want to display all the options from the foreign key table in a dropdown and select the correct one based on the value in my table. I have searched around quite a bit but haven't been able to find an answer to this.

Any help would be greatly appreciated.

• javascript
• jquery
• kendo-grid
• foreign-key-relationship
• html-select

1 Answer 1

I solved this myself. If anyone else is looking for this here is the solution.

In the Javascript section create a new data source it can be static:

var facultyRankDS = new kendo.data.DataSource({
    data: [
        { Id: null, Name: "<Please Select>"},
        { Id: 1, Name: "Instructor" },
        { Id: 2, Name: "Assistant Professor" },
        { Id: 3, Name: "Associate Professor" },
        { Id: 4, Name: "Professor" }
    ]
});

or it can be dynamic:

var facultyRankDS = new kendo.data.DataSource({
    transport: {
        read: function(options) {
            $.ajax({
                url: "api/Member.mvc/GetMemberRanks",
                dataType: 'json',

                success: function(result) {
                    options.success(result);
                }
            });
        }
    }
});

Then in the popup_editor section add your dropdown:

<div class="k-edit-label">
    <label for="FacultyRankId">Rank</label>
</div>
<!-- dropdownlist editor for field: "FacultyRankId" -->
<div class="k-edit-field">
    <input name="FacultyRankId"
        data-bind="value:FacultyRankId"
        data-value-field="Id"
        data-text-field="Name"
        data-source="facultyRankDS"
        data-role="dropdownlist"
        data-value-primitive="true" />
</div>