Question

我正在使用一个网格，该网格自动定义数据源并为每个项目加载子网格。

此标记非常简单

<div class="thegrid"
     kendo-grid
     k-data-source="vm.GeneralData"
     k-options="vm.gridMainOptions">
    <div k-detail-template>
        <div kendo-grid k-options="vm.detailGridOptions(dataItem)"></div>
    </div>
</div>

在子网格详细信息模板中，我有一个网格列，可触发事件以响应ng-click事件。

columns: [
{
    field: "Id",
    editable: false,
    hidden: true
},
{
    title: "",
    width: "160px",
    editable: false,
    template:
    "<span class='glyphicon glyphicon-remove remove-template'  
           ng-click='vm.removeItem(dataItem)'></span><",
    attributes: {
    "class": "managing-templates-column",
    "title": "Delete This Template"
}

在控制器本身，我有一个响应这个的方法。

function removeItem(dataItem) {

    console.log("remove", dataItem);
    //removed code that makes an ajax call to actually delete item

    //... and now need to refesh that datasource that this belongs to.

}

我如何获取dataItem的数据源以便我可以刷新它？

Answer 1

在Kendo的模板引擎中，您可以使用data对象，实际上是您的dataItem。试试这个：

"<span class='glyphicon glyphicon-remove remove-template' ng-click='vm.removeItem(data)'></span>"

如果这不起作用，请尝试通过DOM访问dataItem：

"<span class='glyphicon glyphicon-remove remove-template' ng-click='vm.removeItem(this)'></span>"

然后：

function removeItem(span) {
    var $tr = $(span).closest("tr"),
        grid = $tr.closest(".k-grid").data("kendoGrid"),
        dataItem = grid.dataItem($tr);
}

<强>更新

根据this answer，试试这个：

"<span class='glyphicon glyphicon-remove remove-template' ng-click='vm.removeItem($event)'></span>"

而且......

function removeItem($event) {
    var $tr = $($event.currentTarget).closest("tr"),
        grid = $tr.closest(".k-grid").data("kendoGrid"),
        dataItem = grid.dataItem($tr);
}

使用AnhularJS指令刷新Kendo详细信息

1 个答案: