Kendo Grid Foreign Key template - asp.net-mvc-4

Question

I have a foreign key inside my kendo grid, and I have created an editor for this foreign key. It's working Ok in saving, but the problem is that when the grid displays data, the foreign key value is undefined. I know I have to change the template to show correct value. I have added the function intemplate to show the correct value, but it's not working for me.
Can you help me please? Here is my code:
var collection;
$("#mygrid").kendoGrid({
dataSource: dataSource,
pageable: true,
toolbar: [{ name: 'create', text: 'My create' }],
columns: [
{ field: "ForeignKeyColumn", editor: categoryDropDownEditor, template: "#=getTextByValue(data)#" },
{ field: "NOTES", title: "Notes" },
{ command: ["edit", "destroy"], title: " ", width: "160px" }],
editable: "popup",
});
//update model when choose value from dropdown list
var grid = $("#mygrid").data("kendoGrid");
grid.bind("save", grid_save);
function grid_save(e) {
if (e.model.ForeignKey) {
//change the model value
e.model.ForeignKeyColumn = 0;
//get the currently selected value from the DDL
var currentlySelectedValue = $(e.container.find("#typeCombo")[0]).data().kendoDropDownList.value();
//set the value to the model
e.model.set('ForeignKeyColumn', currentlySelectedValue);
}
}
//Editor template
function categoryDropDownEditor(container, options) {
$('<input id="typeCombo" required data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataSource: {
type: "json",
transport: {
read: {
url: '#Url.Action("SomeAction", "SomeController")',
type: "POST",
contentType: "application/json",
}
}
}
});
}
//Show template
function getTextByValue(data) {
//if the collection is empty - get it from the grid
if (!collection) {
grid = $("#GridName").data("kendoGrid");
valuesCollection = grid.options.columns[1].values;//Set the correct FKColumn index
collection = {};
for (var value in valuesCollection) {
collection[valuesCollection[value].value] = valuesCollection[value].text;
}
}
return collection[data.ForeignKeyColumn];
}
Note: valuesCollection value is undefined when I trace.

Answer 1

Try this,
I think it's necessary for binding foreign key column in grid. Please do not change the .cshtml view name or folder name.
Store in this location:
Location: - YourViews -> Shared -> EditorTemplates -> GridForeignKey.cshtml
GridForeignKey.cshtml:
#(Html.Kendo().DropDownListFor(m => m)
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
.OptionLabel("--Not Category--")
)