Row selection in table about md-data-table HOT 33 CLOSED

Yes, I've been meaning to implement this. I think selecting a row by clicking anywhere within the row should be a feature that is opted into via an additional attribute. The reason for this is, in the future, if you have a cell with inline editing it may be undesirable for the row to be selected if you click on the cell to edit it.

The ripple effect would be neat. The only thing the specification defines is the background color of a selected row. I'm also not sure if, once a row is selected, the darker background should persist or only the most recently selected row is darker. In my opinion, it looks odd when all the rows are selected and they all display the darker background. What do you think?

from md-data-table.

btw, is it possible to disable row selection for the datatable?

from md-data-table.

@daniel-nagy I think the dark background color must persist for every selected row. I don't think it looks that bad when all the rows are selected and display darker background.
And regarding selecting the row by clicking anywhere, what you say is true. Making it an attribute sounds cool. We should not select the row while we edit stuff in the table.

from md-data-table.

@ahmadhsalim do you mean disable completely? Just omit the md-row-select attribute.

Currently there is no support for condition row selection. I have been contemplating whether or not I should make this a feature. My first impression is that it should be an all or nothing deal and if you find yourself needing to conditionally disable rows you should rethink if you should use row selection at all. However, I can see cases were this could be necessary.

from md-data-table.

@chinnichaitanya I'm going to go with you on this, I'll allow the darker background to persist. Currently I'm working on refactoring the style sheets, to try to clean things up a bit, and adding sort icons to the column names. I think this issue is next on my priority list. Hopefully I will have it complete sometime tonight or tomorrow.

from md-data-table.

@daniel-nagy oh, thanks, that's what i wanted. But there's one more issue, is it possible to disable/enable md-row-select from javascript through perhaps a boolean check?

from md-data-table.

In fact, I would prefer to be able to set anything programmatically. Like, numeric, unit, precision etc.

from md-data-table.

I think you can use ng-attr to conditionally apply attributes. Something like,

ng-attr-md-row-select="{{my javascript}}"

this stack overflow may help.

from md-data-table.

Resolved in version 0.4.0

@chinnichaitanya no ripple effect atm. Possibly in a future release, I'll have to take a look at injecting Angular Materials $mdInkRipple service.

from md-data-table.

@daniel-nagy Looks good. But there is a small issue. If i select a few rows and go to the next page, and again comeback, all the selections are gone. I guess this shouldn't be the case.

from md-data-table.

@chinnichaitanya I think the selection is always for the current page. It should be cleared when a new page is loaded. At least that's what I want on my project.

from md-data-table.

@ahmadhsalim Why ? The selection must always be for the whole table right ? Not for individual pages of a table.

from md-data-table.

@chinnichaitanya In my case, the data is populated using ajax requests. A request must be made for each page. Once the page is changed the data of the previous page is lost, therefore the selection too cannot remain.

from md-data-table.

@daniel-nagy btw, my md-row-select is not working. the array "selected" doesn't get set at all.

from md-data-table.

@chinnichaitanya @ahmadhsalim Clearing the selected rows on page change is the intended behavior of the table. Actually the selected rows are cleared whenever the set you are repeating changes. This is useful when data is being received in chucks from the server.

If you are doing client side filtering and want the selected rows to persist, ngRepeat has a filter pipe that you can use to do pagination without actually removing elements from the set you are repeating. All you would have to do in your filter function is return true for the items with indexes in the range for the current page and false otherwise.

I haven't tried this but I believe if you use ngRepeat to do pagination the selected row should remain selected because the set itself is not changing. I may be wrong though. Another thing to keep in mind is, when you change page, the user can no longer see the rows that are selected and may not know they are still selected. One way to solve this is to use an alternate header to display the number of selected items in the table like in the demo.

from md-data-table.

I agree, you have answered for @chinnichaitanya's issue.

However I'm having another issue. Regarding md-row-select="selected". The variable "selected" is always empty, even if I have selected some rows. Therefore my alternate headings are not displayed at all.

from md-data-table.

@ahmadhsalim Try opening the developer tools in the browser and use the select tool to select somewhere in the table and in the console type angular.element($0).scope().selected and see if the array contains any elements.

from md-data-table.

it says undefined

from md-data-table.

@ahmadhsalim When you select a row, does the background color darken and remain darken?

from md-data-table.

Yes, the checkboxes work too. I can check and uncheck just fine. the only thing that doesn't get set is the selected.

from md-data-table.

Okay, the array is indeed being populated then because I use it to apply the CSS classed to the rows. I may need to see some code to help you further. I'm guessing you either have a syntax/spelling error somewhere or some weird scoping issue is occurring.

from md-data-table.

@daniel-nagy I'm having the same issue, the checkboxes and row selection all work fine, but the binding in md-row-select isn't being updated.

It works with the old $scope style, like in your examples, but fails with controllerAs syntax. I put together a quick plunker to show the issue: http://plnkr.co/edit/R1e0pzDEhq03kVv87so9

Thanks for the awesome module :)

from md-data-table.

@jameswyse Thank you for the plunker, it clearly demonstrates the issue. When I run the app locally and use the controllerAs syntax it works fine so I'm a little puzzled at the moment. I'll need to look into this more this afternoon when I get off work.

from md-data-table.

@jameswyse Please see this updated plunker.

from md-data-table.

Hey @daniel-nagy, just had a quick look and in mdDataTableController.js:18 we have:

$parse($attrs.mdRowSelect).assign($scope.$parent.$parent, self.selectedItems);

The directive has an isolate scope so $scope.$parent should reference the correct (parent) scope.. however it's assigning to the grandparent.. is there some case where this is needed?

Changing it to the following fixes the problem, at least in my app:

$parse($attrs.mdRowSelect).assign($scope.$parent, self.selectedItems);

from md-data-table.

oh, you fixed it already! thanks 👍

from md-data-table.

@jameswyse The directive needs to be agnostic of the scope the variable is declared in. We both wrongly assumed we could predict which scope it would be in. For my app it was the grandparent but for your app it was the parent. The only solution I can think of is to force the developer to define the array in their controller to ensure two-way data binding works properly.

from md-data-table.

Good point, I think that's a fair compromise :)

from md-data-table.

hey sorry i couldn't respond before. but it works now with the new update. thanks

from md-data-table.

@ahmadhsalim 👍

from md-data-table.

This change has unfortunately seemingly broken tables that do not have row selection enabled. By moving the initialisation of selectedItems here, paginating a table tries to splice selectedItems that has not yet been initialised.

from md-data-table.

@scooper91 thank you for catching this, fixed in version 0.4.2

from md-data-table.

Thanks!

from md-data-table.