In my current project, I have a parent component responsible for making an AJAX call to fetch data from the backend to populate a grid. To render the grid data, I created a child component where I pass the list as an in-binding. However, I noticed that whenever I update the list in the parent component, the child component fails to trigger the onchange event. Below is a snippet of my code. Additionally, both the parent and child components are nested under another component that uses a Kendo tabstrip.
Parent Component:
<div layout="column">
<md-content>
<div layout="row">
<member-mvlicense-grid member-id="vm.memberId"></member-mvlicense-grid>
</div>
</md-content>
</div>
Child Component:
<md-content>
<div kendo-grid="vm.grid" options="vm.gridOption" ng-style="{'height':vm.gridHeight}"
k-on-change="vm.handleChange(data, dataItem, columns)"></div>
</md-content>
Parent onchange Event:
public $onChanges(onChangesObj: angular.IOnChangesObject): void {
//this.dataList = new Array<model.member.IMembersMVLicensesResult>();
if (this.memberId && this.memberId.toString().toLowerCase() != "add") {
this.membersMVLicensesService.getByMemberId(this.memberId).then((response) => {
this.timeString = new Date().getTime().toString();
let someValue = response;
this.dataList = someValue;
console.log(this.dataList);
}, (error) => {
});
}
}