how to write a rowtemplate when pinning exsits

when I set pinning and rowTemplate together,the rowTemplate repeat 3 times in single row

I think it is influenced by the pinning col,but i don't know how to fix it

here's the plunker: http://plnkr.co/edit/XoXMbmqa1IjegT1RQ297?p=preview

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning']);

app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
  $scope.gridOptions = {};

  $scope.gridOptions.columnDefs = [
    { name:'id', width:50, enablePinning:true, hidePinLeft: false, hidePinRight: true },
    { name:'name', width:100, pinnedLeft:true },
    { name:'age', width:100, pinnedRight:true  },
    { name:'address.street', width:150  },
    { name:'address.city', width:150 },
    { name:'address.state', width:50 },
    { name:'address.zip', width:50 }
  ];
  $scope.gridOptions.rowTemplate='<div>helloworld</div>'
  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });
}]);

.grid {
  width: 100%;
  height: 400px;
}

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" class="grid" ui-grid-pinning></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

I'm trying to make a table with multi headers to show date info,and each row has a name as the first column ,the second column is a line chart which can show business data.

I draw a pic to show this

Solution

Assuming you can do without pinning, I would remove the pinning extension from your grid. This makes working with header templates easier... You would otherwise run into the same issue with your header (three repeated headers).

See this plunker: http://plnkr.co/edit/nvuUKIQczdY2E6KuMEVG?p=preview

I removed pinning, removed rowTemplate, used a single headerCellTemplate (placeholder) to accomodate your calender header, and used a cellTemplate to accomodate you graph logic.

Html:

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" class="grid"></div>
</div>

Javascript:

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
  $scope.gridOptions = {};

  $scope.gridOptions.columnDefs = [
    { field:'id', name:'id', width:'25'},
    { field:'name', name:'name', width:'*' },
    { name:'chart', headerCellTemplate:'<div>Include header code here', width:'*', cellTemplate: '<div>include graph code here</div>'  }
  ];
  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });
}]);

Hope I interpreted your goal correctly and I hope this helps :)