Popup_Editor Template - Dropdown

[Joel]

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 or example to this.

Any help would be greatly appreciated.

[Alexander Valchev]

Hello Joel,

The scenario is supported. In order to achieve it you should:

• put select element in the popup editor template
• initialize and configure the DropDown widget via data attributes
• create a dataSource to which the DropDownList will be bound (it should be accessible from the global scope)
• bind the value of the widget to the corresponding model field (from the Grid) via data-bind attribute just like you do with standard inputs

Regards,
Alexander Valchev
Telerik

[Joel]

Alexander,

     Thank you for the clear and concise response.  I was able to get it working following your directions.
For anyone else out there who may be looking for this here are some snippets from my implementation:

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>

Thanks,
Joel