Kendo网格数据源

时间:2016-04-19 10:50:59

标签: javascript angularjs kendo-ui dropdown

我知道我要问的是奇怪但是,我有一个包含8行的网格。其中一个列有dropDownListEditor。我想问一下,是否有可能在下拉列表编辑器的每一行中设置唯一的数据源。

以下是我的情况,例如

第1行包含

[{ "ID": 1, "Fruit": "Banana" },  
{ "ID": 2, "Fruit": "Mango" },  
{ "ID": 3, "Fruit": "Apple" }]

as datasource

现在我希望第二行包含下拉数据源

[{ "ID": 1, "Fruit": "Guava" },
{ "ID": 2, "Fruit": "Lichi" }]

有可能吗?

Hello @Nathan我创建了一个网格,如下所示,

<div id="example" ng-app="KendoDemos"> <div ng-controller="MyCtrl"> <kendo-grid options="mainGridOptions"></kendo-grid> </div> </div>

现在在控制器中编写以下代码

angular.module("KendoDemos", ["kendo.directives"]).controller("MyCtrl", function ($scope, $compile) {
var source = [
    {CategoryID: 1, CategoryName: "Beverages"},
    {CategoryID: 2, CategoryName: "Condiments"},
    {CategoryID: 3, CategoryName: "Coffee"},
    {CategoryID: 4, CategoryName: "Bread"},
    {CategoryID: 5, CategoryName: "Green Tea"},
    {CategoryID: 6, CategoryName: "Expresso"}
];

$scope.dataSource = new kendo.data.DataSource({
    pageSize: 20,
    data: products,
    autoSync: true,
    schema: {
        model: {
            id: "ProductID",
            fields: {
                ProductID: {editable: false, nullable: true},
                ProductName: {validation: {required: true}},
                UnitPrice: {type: "number", validation: {required: true, min: 1}}
            }
        }
    }
});

$scope.ddlDataSource = new kendo.data.DataSource({type: "odata", data: source});
$scope.categoryDropDownEditor = function (container, options) {
    var editor = $('<input kendo-drop-down-list required k-data-text-field="\'CategoryName\'" k-data-value-field="\'CategoryID\'" k-data-source="ddlDataSource" data-bind="value:' + options.field + '"/>').appendTo(container);
};

$scope.mainGridOptions = {
    dataSource: $scope.dataSource,
    pageable: true,
    height: 550,
    toolbar: ["create"],
    columns: [{field: "ProductName", title: "Product Name"}, {
        field: "Category",
        title: "Category",
        width: "180px",
        editor: $scope.categoryDropDownEditor,
        template: "#=Category.CategoryName#"
    }, {field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px"}, {
        command: "destroy",
        title: " ",
        width: "150px"
    }],
    editable: true
};

});

现在您可以在链接[dojo.telerik.com/erImu/2]中看到,该列表包含所有行中的Beverages,Condiments等。我希望它只包含在第一行,否则它只能包含TEA。

0 个答案:

没有答案