Automatically trigger change event in kendo detail grid - angularjs

Question

I have a angular kendo grid similar to the telerik demo.
Main Grid:
$scope.mainGridOptions = {
dataSource: {
transport: {
read: queryurl
},
pageSize: 5,
},
sortable: true,
pageable: true,
detailTemplate: kendo.template($("#template").html()),
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
}
Detail Grid:
$scope.detailGridOptions = function (item) {
return {
dataSource: {
transport: {
read: detailsUrl
},
},
change: $scope.showDocument,
selectable: "row",
dataBound: function (e) {
var row = e.sender.tbody.find("tr:first");
row.addClass("k-state-selected");
row.trigger("change") //doesnt work!
}
}
}
When the user clicks a row in the detail grid a document is rendered in a jquery dialog. This all works as expected.
When the grid loads, the first master-row is expanded. Now I need the change event of the first row in the detailsgrid to fire automatically, so that the first document of the first entry gets displayed automatically, when the app loads.
As I was able to highlight the first detailrow I thought that i could trigger the change event like this: row.trigger("change") but this doesn't seem to work.
Any ideas are much appreciated!

Answer 1

Try using the select method of the grid to select the row instead of manually adding the "k-state-selected" class. It will automatically trigger the change event for you. JsBin example.
(function() {
'use strict';
var grid = $('#grid').kendoGrid({
dataSource: [
{ name: 'Brett', age: 37 },
{ name: 'Susan', age: 38 }
],
selectable: 'row',
change: function (e) {
console.log('change triggered');
},
dataBound: function (e) {
var row = this.tbody.find('tr:first');
this.select(row);
}
}).data('kendoGrid');
})();