kendo-ui grid foreign key column and mvvm - mvvm

Question

I am struggling with kendo-ui grid foreign key column and mvvm
I would like to be able to combine the "Foreign Key Column" example with the "MVVM" example
My question is: "how do I data-bind the values property of a look-up field?"

Answer 1

So this is kind of an older post, but I just had to work around the same issue and found this while trying to solve. Figured I'd answer the question for posterity.
The "values" property doesn't seem to work 100% in the kendo grid in MVVM. I have worked around this in a two step process.
Tack "this.viewModel" (where "viewModel" is whatever you are calling your VM) in front of the "loggerSeverityValues". This will give you a dropdownlist when editing the field.
Utilize the template functionality to display the correct value in the grid. I use a little function to make this easier:
getText: function (matchValue, valuesArray, text, value)
{
if (text === undefined)
{
text = 'text';
}
if (value === undefined)
{
value = 'value';
}
var retText = "No Value Found";
finalArr = $.grep(valuesArray, function (val, integer)
{
return val[value] == matchValue;
});
if (finalArr.length > 0)
{
retText = finalArr[0].text;
}
return retText;
}
The final look of the field will be something along the lines of this:
{ field: 'severity', width: 270, values: this.viewModel.loggerSeverityValues, template: '#: getText(severity, this.viewModel.loggerSeverityValues) #' }
Note that with the getText() function you can override the text and value parameters if you need to.
Anyway this worked for me. Kind of a workaround, but as of release 2014.3.1411 anyway it doesn't appear that the kendo MVVM bindings will work properly with foreign keys.
EDIT:
For anyone now using the kendo ng2+ components, same pattern but with a pipe transform works.
Pipe:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({ name: 'getText' })
export class GetTextPipe implements PipeTransform {
transform(value: any, idPropertyName: string, valuePropertyName: string, valueArray: any[]): any {
if (value != null && valueArray != undefined) {
let retIndex = valueArray.map(v => v[idPropertyName]).indexOf(value);
return valueArray[retIndex][valuePropertyName];
}
else {
return '';
}
}
}
Usage:
<kendo-grid-column field="severity" title="Severity" width="150px">
<template kendoGridCellTemplate let-dataItem="dataItem">
{{dataItem.severity | getText:'severity':'severityName':loggerSeverityValues}}
</template>
</kendo-grid-column>