Question

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

<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'在一系列Cascading Drop Downs中的最后一个之后被填充我的网格显示列，但没有实际数据。我想知道我是否只是错过了一些简单的事情......

Answer 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网格分配选项

1 个答案: