Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] "selected" CSS class on the row based on selection in PblDataSource.selection #202

Open
spali opened this issue Jul 14, 2021 · 2 comments

Comments

@spali
Copy link

spali commented Jul 14, 2021

Please describe the feature you would like to request.

would like to have "selected" CSS class on the row based on selection in PblDataSource.selection.

What is the use-case or motivation for this proposal?

I try to build a reusable table component based on ngrid for an application. For that, I created a plugin directive which does support selection based on rowClick from the targetEvents plugin. It also has a feature to use shift select to select multiple rows. Because I don't want to have the additional select checkbox, I want to highlight the rows by inverting the row colors.
I got it managed by setting the rowClassUpdate to return a custom class for selected rows and temporary set rowClassUpdateFreq = 'ngDoCheck' and force a detectChanges(). and then set the rowClassUpdateFreq back to the origin value.
But the rowClassUpdate feature feels more like for the user to be used for custom stuff and I would like to have a solution without setting this function and to occupy it for the user.
Also I don't want to mess with the focus feature, because I want the user of the component to decide if he want's to use this feature and how.

I see two possible solutions:

  • Having kind of an internal API for plugins that allows to add infinite amount of callbacks to control row CSS classes without messing with the only single solution for the user to do it.
  • If ngrid would just set a predefined CSS class on selected rows based on the selection model (not the focus feature) and let the user define his own style for it. For my specific use-case, this would be the most simple solution.
@laryk9
Copy link
Contributor

laryk9 commented Jul 14, 2021

Hey, @spali I agree with you and I also think this feature is necessary.
In the meantime, I suggest you use the custom row feature (see reference: custom row).
With custom row, you can just define a simple ng-class instead of toggling the rowClassUpdate and running the change detector.

@spali
Copy link
Author

spali commented Jul 14, 2021

Hi @laryk9
Thanks for your response. Yes, I started with the custom row feature. But since the select functionality is in a directive plugin I don't have access to a template from there. Sure it would be possible to do it in the reusable component that I build on top of that directive.
So I have even two possible workarounds till the feature will come ;)
But at the end of the day which workaround doesn't make a difference for me, because I'm currently also in control of the component, so anyway the user does not have access to the rowClassUpdate when not using the directive directly. And I assume the performance is almost the same.

@spali spali changed the title "selected" CSS class on the row based on selection in PblDataSource.selection [Feature] "selected" CSS class on the row based on selection in PblDataSource.selection Jul 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants