Refresh Kendo Detail Using AnhularJS directives

Question

I am working with a grid that automatically defines a data source and loads a sub-grid for each item.

The markup for this is fairly straightforward

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

In the sub grid detail template, I have a grid column that triggers an event in response to an ng-click event.

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

]

In the controller itself, i have a method that responds to this.

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.

}

How would I go about getting the dataItem's data source so that I can refresh it?

Answer 1

Inside Kendo's template engine you can use data object, which is in fact your dataItem. Try this:

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

If that doesn't works, try reaching the dataItem by DOM:

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

Then:

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

UPDATE

Based on this answer, try this:

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

And ...

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