kendo-ui grid foreign key column and 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.

1. 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.
2. 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>