CODEWITHSUNDEEP
angularjskendo-uikendo-grid
Ronak Shah
Ronak Shah

Reputation: 389235

Display the data from kendo-grid to html using angularjs

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>

Upvotes: 0

Views: 1323

Answers (2)

111
111

Reputation: 1779

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

  • Set Kendo grid as selectable sortable: true
  • Define $scope.handleChangeEvent function

Code: 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"
               }]
           };
       });

Upvotes: 0

Mohamed Shaaban
Mohamed Shaaban

Reputation: 1169

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

Upvotes: 1

Related Questions