Experimenting with the KendoUI AngularJS Grid detail template has been quite insightful. I am currently facing an issue where I want to update a panel based on a row selected in the detail template grid.
Although I have successfully set up the onChange event to choose a value from the detail template grid, I am encountering difficulties in updating a variable on the $scope object. The value seems to remain unchanged, sticking to the default value.
What could be causing this inconsistency in updating the variable on the #scope object?
<div id="example">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions">
<div k-detail-template>
<kendo-tabstrip>
<ul>
<li class="k-state-active">Orders</li>
<li>Contact information</li>
</ul>
<div>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</div>
<div>
<ul class="contact-info-form">
<li><label>Country:</label> <input class="k-textbox" ng-model="dataItem.Country" /></li>
<li><label>City:</label> <input class="k-textbox" ng-model="dataItem.City" /></li>
<li><label>Address:</label> {{dataItem.Address}}</li>
<li><label>Home phone:</label> {{dataItem.HomePhone}}</li>
</ul>
</div>
</kendo-tabstrip>
</div>
</kendo-grid>
<div class="panel panel-default">
<div class="panel-heading">Content</div>
<div class="panel-body">
{{content}}
</div>
</div>
</div>
<script>
angular.module("app", [ "kendo.directives" ])
.controller("MyCtrl", function ($scope) {
$scope.content = 'test';
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: true,
selectable: true,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "120px"
},{
field: "City",
width: "120px"
},{
field: "Title"
}]
};
$scope.detailGridOptions = function(dataItem) {
return {
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
id: "OrderID"
}
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
},
scrollable: false,
sortable: true,
selectable: true,
change: onChange,
pageable: true,
columns: [
{ field: "OrderID", title:"ID", width: "56px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "190px" }
]
};
};
function onChange(arg) {
console.log("The selected product id: [" + this.dataItem($(this.select()[0]).closest("tr")).id + "]");
$scope.content = this.dataItem($(this.select()[0]).closest("tr")).id;
}
})
I have tested an inline Kendo provided onChange function like this:
<div kendo-grid k-options="detailGridOptions(dataItem)" k-on-change="handleChange(data, dataItem, columns)"></div>
It doesn't seem to work as intended due to the scope of data being the parent grid.