I'm currently dealing with a grid which automatically sets up a data source and loads a sub-grid for each item. This makes the markup fairly easy to work with.
<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>
Within the detail template of the sub grid, there's a column that triggers an event when an ng-click is detected.
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"
}
]
Inside the controller, there's a method set up to handle this event.
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.
}
I'm trying to figure out how to access the dataItem's data source in order to refresh it. Any suggestions?