albert's blog: How to hide column in ng-grid AngularJS

2015/02/13

How to hide column in ng-grid AngularJS

If we are using ng-grid to display data as bellows:

And want to hide issueSeqNo column as bellows:

All you need to do is add visible:false in issueSeqNo column as bellows:

  $scope.itemGrid = {
      data : 'itemData',
      selectedItems: $scope.selectedRow,
      columnDefs : [
          { field : 'issueSeqNo', 
            displayName : 'issueSeqNo', 
            width: 120, 
            cellClass: 'text-left', 
            visible:false},
          { field : 'issueSerial', 
            displayName : '公債代號', 
            width: 150, 
            cellClass: 'text-left'}, 
          { field : 'issueDate',   
            displayName : '發行日期', 
            width: 150, 
            cellClass: 'text-left'}, 
          { field : 'debtName',    
            displayName : '公債名稱', 
            width: 600, 
            cellClass: 'text-left'}],
      enableColumnResize :true,
      i18n:'zh-tw',
      multiSelect : false,
      showFooter: true,
      afterSelectionChange: function () {
          if(!angular.isUndefined($scope.selectedRow[0])){
              alert($scope.selectedRow[0].issueSeqNo);
          }
       }
  };

Reference

[1] http://stackoverflow.com/questions/16954058/how-to-hide-column-in-ng-grid

albert's blog

Total Pageviews

2015/02/13

How to hide column in ng-grid AngularJS

No comments: