CODEWITHSUNDEEP
angularjsangular-material
Adam Michalski
Adam Michalski

Reputation: 1792

Hide checkboxes in md-data-table when using single item selection

How can I use single item selection with md-on-select in Material Design Data Table for Angular Material and have checkboxes hidden? I think when we can select one item, checkboxes are no more needed and I want to hide them.

Single item selection achieved by selected item swap:

in row usage:

<tr md-row md-select="item" md-on-select="onSelect" ng-repeat="item in items"></tr>

onSelect method:

$scope.onSelect = function (item, key) {
  if($scope.selected.length >= 2) {
    $scope.selected.shift();
  }
}

enter image description here

When i use md-row-select="false" i lose ability to select single row.

How can I hide checkboxes and still select single row?

Upvotes: 4

Views: 3314

Answers (2)

Flash
Flash

Reputation: 1014

You can Hide them like this:

md-checkbox .md-icon {
    visibility: hidden;
}

Upvotes: 1

Adam Michalski
Adam Michalski

Reputation: 1792

I created it some time ago.

Get git repo.

Edit files:mdSelect, mdHead

for hiding row checkbox: mdSelect

Add inside postLink function in mdSelect and mdHead

function noCheckbox() {
  if(attrs.mdNoCheckbox === 'true') {
    return true;
  }      
  return false;
}

and use it inside mdSelect enableSelection:

function enableSelection() {
  if(!noCheckbox()){
    element.prepend(createCheckbox());
  }

  if(autoSelect()) {
    element.on('click', toggle);
  }
}

Inside mdHead attachCheckbox:

function attachCheckbox() {
  ...
  if(!noCheckbox()){    
    children.eq(children.length - 1).prepend(createCheckBox());
  }
}

and add parameter to scope mdHead and mdSelect: noCheckbox: '@mdNoCheckbox'

Compile and it works with 

<thead md-head md-no-checkbox ...
<tr md-row md-no-checkbox ...

and

<thead md-head md-no-checkbox="true" ...
<tr md-row md-no-checkbox="false ...

Single row selection by:

if (vm.options.singleRowSelect) {
      if (vm.selected.length >= 2) {
      vm.selected.shift();
   }
}

I will send pull request this weekend.

Upvotes: 1

Related Questions