Actualiser le détail du Kendo à l'aide des directives AnhularJS

Question

Je travaille avec une grille qui définit automatiquement une source de données et charge une sous-grille pour chaque élément.

Le balisage pour cela est assez simple

<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> 

Dans le modèle de détail de la grille sous, j'ai une colonne de grille qui déclenche un événement en réponse à un événement 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" 
} 

]

i ai dans le contrôleur lui-même, un procédé qui répond à cette question.

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. 

} 

Comment pourrais-je faire pour obtenir les données de la dataItem source afin que je puisse le rafraîchir?

Answer 1

Dans le moteur de template de Kendo, vous pouvez utiliser l'objet data, qui est en fait votre dataItem. Essayez ceci:

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

Si cela ne fonctionne pas, essayez d'atteindre le DataItem par DOM:

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

Puis:

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

MISE À JOUR

Basé sur this answer , essayez ceci:

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

Et ...

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