kendo grid foreign column selected text being overrriden by client template

Question

I have a kendo grid on MVC proeject with a foreignKey column with a client template on the same column to send the data to the controller (hidden) as I have a header information just above the kendo grid that i want to send to the controller. Everything works fine. But when I select the dropdown in the grid it displays the value rather than the text.

columns.ForeignKey(c => c.studentId, (System.Collections.IEnumerable)ViewData["Students"], "Id", "name")
    .Title("id - name")
    .Width(70)
    .ClientTemplate("#= studentId #" + "<'input type='hidden'  name='MyModel[#= index(data)#].StudentId' value='#= StudentId #' />");

The above is the exact code I currently have.

How can I show the user the selected text (name in this case) rather than the value(Id in this case) on the kendo grid.

Thanks

Answer 1

just had the same problem and found this on the telerik site:

Basically create a function that looks up the text from Foreign Key Drop Down in the grid.

 columns.ForeignKey(c => c.G_ID, plus, "Value", "Text").Title("Plu").Lockable(true).ClientFooterTemplate("Total").ClientTemplate("#= getTextByValue(data)#" +
        "<input type='hidden' name='Schedules[#= index(data)#].G_ID' value='#= G_ID #' />"); //.Hidden();

and the javascript:

var collection;

And the function:

function getTextByValue(data) {
    console.log(data);
    var dGrid = $("#the-dtl-grid").data("kendoGrid");
    //change the index of the column with your index
    valuesCollection = dGrid.options.columns[1].values;

    //if the collection is empty - get it from the grid
    if (!collection) {
        collection = {};
        //Set the correct FKColumn index
        for (var value in valuesCollection) {
            collection[valuesCollection[value].value] = valuesCollection[value].text;
        }
    }
    return collection[data.G_ID];
}