使用AnhularJS指令刷新Kendo细节
问题描述:
我正在使用自动定义数据源并为每个项目加载子网格的网格。使用AnhularJS指令刷新Kendo细节
此标记是相当简单的
<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
的数据源,这样我可以刷新吗?
答
在剑道的模板引擎里面你可以使用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);
}
UPDATE
基于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);
}
'data'似乎不定,'this'返回$范围对象 - 我已经添加标记,以便更好地显示这是怎么设置。 – Joe
@Joe检查更新。 – DontVoteMeDown
明白了 - 谢谢! – Joe