kendo-ui 网格外键列和 mvvm答案

【问题标题】：kendo-ui grid foreign key column and mvvmkendo-ui 网格外键列和 mvvm
【发布时间】：2014-11-27 12:23:48
【问题描述】：

我正在为 kendo-ui 网格外键列和 mvvm 苦苦挣扎

我希望能够将"Foreign Key Column" example 与"MVVM" example 结合起来

我的问题是：“如何对查找字段的值属性进行数据绑定？”

【问题讨论】：

标签： mvvm kendo-ui kendo-grid

【解决方案1】：

所以这是一篇较旧的帖子，但我只需要解决相同的问题并在尝试解决时发现了这个问题。想我会为后代回答这个问题。

“值”属性在 MVVM 的剑道网格中似乎无法 100% 工作。我分两步解决了这个问题。

在“loggerSeverityValues”前面添加“this.viewModel”（其中“viewModel”是您所称的 VM）。这将在编辑字段时为您提供一个下拉列表。
利用模板功能在网格中显示正确的值。我使用了一个小函数来简化此操作：

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;
}

该领域的最终外观将是这样的：

{ field: 'severity', width: 270, values: this.viewModel.loggerSeverityValues, template: '#: getText(severity, this.viewModel.loggerSeverityValues) #' }

请注意，使用 getText() 函数，您可以根据需要覆盖文本和值参数。

无论如何，这对我有用。一种解决方法，但从 2014.3.1411 版本开始，kendo MVVM 绑定似乎无法与外键一起正常工作。

编辑：

对于现在使用 kendo ng2+ 组件的任何人，相同的模式，但使用管道转换。

管道：

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 '';
        }
    }
}

用法：

<kendo-grid-column field="severity" title="Severity" width="150px">
  <template kendoGridCellTemplate let-dataItem="dataItem">
    {{dataItem.severity | getText:'severity':'severityName':loggerSeverityValues}}
  </template>
</kendo-grid-column>

【讨论】：