title: UI Grid row data to Textarea
body: <p>Following is my angular script :</p>
  
  <pre><code>angular.module('app',  ['ngTouch', 'ui.grid', 'ui.grid.selection'])
  
  .controller('MainCtrl', ['$scope', function ($scope) {
    var vm = this;
  
    vm.gridOptions = { multiSelect:false};
  
    vm.reset = reset;
    function reset() {
      vm.gridOptions.mydata = [];
      vm.gridOptions.columnDefs = [];
    }              
  }])
  
  .directive("fileread", [function () {
    return {
      scope: {
        opts: '='
      },
      link: function ($scope, $elm, $attrs) {
        $elm.on('change', function (changeEvent) {
          var reader = new FileReader();
  
          reader.onload = function (evt) {
            $scope.$apply(function () {
              var mydata = evt.target.result;
  
              var workbook = XLSX.read(mydata, {type: 'binary'});
  
              var headerNames = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]], { header: 1 })[0];
  
              var mydata = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]]);
  
              $scope.opts.columnDefs = [];
              headerNames.forEach(function (h) {
                $scope.opts.columnDefs.push({ field: h });
              });
  
              $scope.opts.data = mydata;
  
              $elm.val(null);
            });
          }
  
          reader.readAsBinaryString(changeEvent.target.files[0]);
        });
      }
    }
  }]);
  
  app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridConstants', function ($scope, $http, $interval, uiGridConstants) {
  
    $scope.mySelections = [];
  
  
    $scope.gridOptions.multiSelect = false;
    $scope.gridOptions.modifierKeysToMultiSelect = false;
    $scope.gridOptions.noUnselect = true;
    $scope.gridOptions.onRegisterApi = function( gridApi ) {
          $scope.gridApi = gridApi;
           $scope.gridApi.selection.on.rowSelectionChanged($scope, function(rows) {
           $scope.mySelections = $scope.gridOptions.data[0];
          var v =  {mySelections};
          var z = document.getElementById("t");
          z.innerHTML.append = v;
  
          });
  
    }
  
    $scope.toggleRowSelection = function() {
      $scope.gridApi.selection.clearSelectedRows();
      $scope.gridOptions.enableRowSelection = !$scope.gridOptions.enableRowSelection;
      $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS);
    };
  
    $http.get('/mydata/500_complex.json')
      .success(function(mydata) {
        $scope.gridOptions.data = mydata;
        $scope.gridOptions.multiSelect.data = false;        
  
        // $interval whilst we wait for the grid to digest the data we just gave it
        $interval( function() {
            $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);}, 0, 1);
            $scope.mySelections = $scope.gridOptions.data[0];
          var v =  {mySelections};
          var z = document.getElementById("t");
          z.innerHTML.append = v;    
      });
  }]);
  </code></pre>
  
  <p>Following is my HTML code :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
  
    &lt;head&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/xlsx.full.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/ods.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.css" /&gt;
      &lt;link rel="stylesheet" href="main.css" type="text/css" /&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div ng-controller="MainCtrl as vm"&gt;
        &lt;button type="button" class="btn btn-success" ng-click="vm.reset()"&gt;Reset Grid&lt;/button&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;div id="grid1" ui-grid="vm.gridOptions" ui-grid-selection class="grid"&gt;
          &lt;div class="grid-msg-overlay" ng-show="!vm.gridOptions.data.length"&gt;
            &lt;div class="msg"&gt;
              &lt;div class="center"&gt;
                &lt;span class="muted"&gt;Select Spreadsheet File&lt;/span&gt;
                &lt;br /&gt;
                &lt;input type="file" accept=".xls,.xlsx,.ods" fileread="" opts="vm.gridOptions" multiple="false" /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;script src="app.js"&gt;&lt;/script&gt;
   &lt;br /&gt;
   **&lt;textarea id = "t" style="width:100%"&gt;&lt;/textarea&gt;**
   &lt;br/&gt;
       &lt;button id="copy" name="copy" type="button" class="btn btn-success" ng-click="vm.copy()"&gt;Copy&lt;/button&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to show selected row in <code>textarea</code>.
  Done selecting row at a time,but not able to show data in textarea?
  Any suggestion appreciated as I am beginner.</p>