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 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.