Question

我指的是此处的链接作为我的参考：http://demos.telerik.com/kendo-ui/grid/angular

我想要的只是几行，然后当我点击时我想要kendo-grid展开并向我显示有关该行的详细信息：

我的html如下所示：

   div kendo-grid="importSelectionDetailsGrid"
     k-options={{mainGridOptions}}
     k-data-source={{packages.packages}}
     class="locus-details-grid str-locus-details-grid table-frame">

    <div k-detail-template>   
            <div>
                This is where all the details go                    
        </div>      
    </div>

我的角度控制器如下所示：

 $scope.packages = {
            "packages": [
        { "PackageContents": "54 samples", "CreatedBy": "kdesai@illumina.com", "Createdon": "06 Oct 2016 at 2:46PM", "Size": "3GB" },
         { "PackageContents": "22 samples", "CreatedBy": "kdesai@illumina.com", "Createdon": "06 Oct 2016 at 2:46PM", "Size": "2GB" },
         { "PackageContents": "5 samples", "CreatedBy": "kdesai@illumina.com", "Createdon": "06 Oct 2016 at 2:46PM", "Size": "1GB" }
            ]
        };

        $scope.mainGridOptions = {
            dataSource: $scope.packages.packages,
            dataBound: function () {
                this.expandRow(this.tbody.find("tr.k-master-row").first());
            },
            columns: [{
                field: "PackageContents",
                title: "Package Contents",
                width: "120px"
            }, {
                field: "CreatedBy",
                title: "Created By",
                width: "120px"
            }, {
                field: "Createdon",
                title: "Created On",
                width: "120px"
            }, {
                field: "Size",
                title :"Size",
                width: "120px"
            }]
        };    

        };

它成功显示了行但未显示任何详细信息。我也无法从示例中清楚地看出哪个特定部分负责呈现细节，因为示例中定义了许多我不一定需要的选项。

Answer 1

所以，我拿了链接的剑道/角度示例并用你的主要网格替换（语法调整以匹配他们的语法），他们的详细模板与你的，以及他们的控制器与你的，它似乎做你做的想。

工作演示： http://dojo.telerik.com/@Stephen/oxocu

注意：我对angular一无所知，但我使用的是jQuery Kendo。这就是为什么我只是用你的代码替换他们的代码而不是提供深入的答案。

要回答有关负责在演示中显示详细信息的部分的问题：它是<div kendo-grid k-options="detailGridOptions(dataItem)"></div>

在详细信息模板中，以及执行此操作的$ scope.detailGridOptions定义。

使用Angular在Kendo Grid中显示详细信息似乎不起作用

1 个答案: