kendo-ui grid外键列和mvvm

时间:2014-11-27 12:23:49

标签: mvvm kendo-ui kendo-grid

我正在努力使用kendo-ui网格外键列和mvvm

我希望能够将"Foreign Key Column" example"MVVM" example

结合起来

我的问题是:“我如何对查找字段的values属性进行数据绑定?”

Want binding expression for loggerSeverityValues property in my ViewModel

1 个答案:

答案 0 :(得分:2)

所以这是一篇较老的帖子,但我只是在处理同样的问题并在尝试解决时发现了这个问题。我想回答后人的问题。

"价值观"在MVVM的kendo网格中,属性似乎不能100%工作。我通过两个步骤解决了这个问题。

  1. Tack" this.viewModel" (" viewModel"是您调用VM的任何内容)在" loggerSeverityValues"前面。这将在编辑字段时为您提供下拉列表。
  2. 利用模板功能在网格中显示正确的值。我使用一个小功能来使这更容易:
  3. 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()函数,您可以根据需要覆盖text和value参数。

    无论如何这对我有用。有一种解决方法,但是从版本2014.3.1411开始,它似乎没有出现剑道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>
    &#13;
    &#13;
    &#13;