KendoUI 网格分配选项答案

【问题标题】：KendoUI Grid assigning optionsKendoUI 网格分配选项
【发布时间】：2012-11-05 22:24:11
【问题描述】：

我试图在我的项目中使用 KendoUI Grid。我想绑定到网格的数据源有很多我不希望作为列的额外部分以及其他几个选项。我想知道是否有一种方法可以从 javascript 设置网格的选项，但是当我尝试时，我似乎遇到了“数据”选项的问题。

<div data-bind="kendoGrid: $parent.kendoGrid"></div>


....
program = ko.observable(null),
kendoGrid = { data: program.BettingInterest, sortable: true, columnMenu: true,
            columns: [{ field: 'BettingInterestProgramNumber', title: 'Post' }, 
                { field: 'PostPosition', title: 'PP' }, { field: 'MLOdd', title: 'ML' },
                { field: 'FractionalOdd', title: 'Odds' }, 'Jockey', 'Trainer', 'Owner', 
                { field: 'WeightCarried', title: 'Weight' }, { field: 'Medication', title: 'Med' },
                { field: 'ClaimingPrice', title: 'Claiming' }, 'Breed'], 
            scrollable: false, resizable: true
        },
....

'program' 在一系列级联下拉列表中的最后一个之后被填充我的网格显示列等但没有实际数据。我想知道我是否只是缺少一些简单的东西......

【问题讨论】：

你能说明program是如何被填满的吗？当program observable 上不存在该属性时，我不确定您是否可以将网格绑定到program.BettingInterest。此外，您可能想在填充program 后尝试在网格上调用.refresh()。 docs.kendoui.com/api/web/grid#refresh

标签： knockout.js kendo-ui

【解决方案1】：

要使这个属性与绑定一起工作，您需要创建一个表示当前程序的 BettingInterest 的计算对象，以便它可以正确跟踪依赖关系。您的视图模型如下所示：

var ViewModel = function() {
    this.program = ko.observable();
    this.programBettingInterest = ko.computed(function() {
       var program = this.program();
        return program ? program.BettingInterest : [];        
    }, this);

    this.myGrid = { data: this.programBettingInterest, sortable: true, columnMenu: true,
        columns: [{ field: 'propA', title: 'propertyA' }, 
            { field: 'propB', title: 'propertyB' }], 
        scrollable: false, resizable: true
    };
};

示例：http://jsfiddle.net/rniemeyer/eqVWs/

【讨论】：

太棒了！没有想到这一点我觉得很傻，因为我在不使用 KendoUI 时也有类似的东西。