I am working on this . It displays the data using kendo - grid. However, what I need is when I click on a particular row in the table, all its content get fetched in an object and using that object I can display its fields below the table. How can I achieve that? Also, I believe we need to modify this code as well if we are using objects to display the fields. Any help would be appreciated.
First Name: {{FirstName}}<br>
Last Name: {{LastName}}<br>
Country: {{Country}}<br>
City: {{City}}<br>
It seems you need to listen for row selection (change event), and get the selected row, then bind it to angular variable inside your scope as describe in this update
The key here is the change event triggered upon selection/deselection
grid configs
...
change: function(e) {
var selection = this.select(),
selectedItem
;
if(selection && this.dataItem(selection)) {
$scope.selectedItem = this.dataItem(selection).toJSON();
} else {
$scope.selectedItem = {};
}
$scope.$apply();
}
...
grid configs
Two changes required in your code:
1) in HTML add on-change event handler function <kendo-grid options="mainGridOptions" k-on-change="handleChangeEvent(data, dataItem, columns)"> </kendo-grid>
2) in JavaScript
sortable: true$scope.handleChangeEvent functionCode: HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions" k-on-change="handleChangeEvent(data, dataItem, columns)"> </kendo-grid>
<h5>You selected: </h5>
First Name: {{FirstName}}<br>
Last Name: {{LastName}}<br>
Country: {{Country}}<br>
City: {{City}}<br>
</div>
</div>
</body>
</html>
And JavaScript:
angular.module("KendoDemos", ["kendo.directives"])
.controller("MyCtrl", function ($scope) {
$scope.handleChangeEvent = function(data, dataItem, columns) {
$scope.FirstName=dataItem.FirstName;
$scope.LastName=dataItem.LastName;
$scope.Country=dataItem.Country;
$scope.City = dataItem.City;
};
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
selectable: "row",
sortable: 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"
}]
};
});
