Kendo Grid Foreign Key template

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--")      
)