4

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?

2 Answers 2

1

You can Hide them like this:

md-checkbox .md-icon {
    visibility: hidden;
}
Sign up to request clarification or add additional context in comments.

2 Comments

I asked about it author of md-data-table Daniel Nagy olmost a year ago, he gave me the same answer. I see I did't add this. xD
Cool! Sorry I'm all late I just ran into the same issue. Mine was that it was hidden but it was still showing the space. I realized If I wanted to hide the space it was taken up I had to use display: none instead.
1

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.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.