Remove Column Separators from default ng grid angularjs

Question

I am using default ui-grid and now i want to remove column separator line (the line in between 2 columns for separation) from my grid. As You can see in plunkr, name and gender is separated by a thin grayish line. i have checked various solutions but i could not remove that separator. Instead of separator i need a space between columns here is my code. How can i achieve that... Plunkr Source

$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
showTreeExpandNoChildren: false,
columnDefs: [
  { name: 'name', width: '30%' },
  { name: 'gender', width: '20%' },
  { name: 'age', width: '20%' },
  { name: 'company', width: '25%' },
  { name: 'state', width: '35%' },
  { name: 'balance', width: '25%', cellFilter: 'currency' }
],
onRegisterApi: function( gridApi ) {
  $scope.gridApi = gridApi;
  $scope.gridApi.treeBase.on.rowExpanded($scope, function(row) {
    if( row.entity.$$hashKey === $scope.gridOptions.data[50].$$hashKey && !$scope.nodeLoaded ) {
      $interval(function() {
        $scope.gridOptions.data.splice(51,0,
          {name: 'Dynamic 1', gender: 'female', age: 53, company: 'Griddable grids', balance: 38000, $$treeLevel: 1},
          {name: 'Dynamic 2', gender: 'male', age: 18, company: 'Griddable grids', balance: 29000, $$treeLevel: 1}
        );
        $scope.nodeLoaded = true;
      }, 2000, 1);
    }
  });
}

};

I mean the line in between 2 columns for separation. That's the column separator — Zaid Iqbal
– Zaid Iqbal, Commented Jul 15, 2015 at 6:20
You can see in plunkr, name and gender is separated by a thin grayish line — Zaid Iqbal
– Zaid Iqbal, Commented Jul 15, 2015 at 6:22

michelem · Accepted Answer · 2015-07-15 06:27:38Z

2

You can play with columnDefs and cellClass, please check this

JS Snip:

   columnDefs: [
      { name: 'name', width: '30%', cellClass: 'noborder' },
      { name: 'gender', width: '20%', cellClass: 'noborder' },
      { name: 'age', width: '20%', cellClass: 'noborder' },
      { name: 'company', width: '25%', cellClass: 'noborder' },
      { name: 'state', width: '35%', cellClass: 'noborder' },
      { name: 'balance', width: '25%', cellClass: 'noborder', cellFilter: 'currency' }
    ],

CSS:

.noborder {
  border: none;
}

You can do almost the same for the header row with headerClassor headerCellTemplate

answered Jul 15, 2015 at 6:27

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zaid Iqbal Over a year ago

for Headers headerClass:'noborder' is not working... It still shows the border around headers

michelem Over a year ago

Try using headerCellTemplateand add the noborder class to the cell template

Collectives™ on Stack Overflow

Remove Column Separators from default ng grid angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related