Clarity: Datagrid expandable rows additional features

[brankoleone]

[ ] bug
[x] feature request
[ ] enhancement

Expected behavior

As I'm requesting a feature my questions are:

• Is there any way to expand a row with code?
• and are there some event handlers to know which row expands?

And another minor question

• For the expandable rows per column, we think it would be great to be able to choose individually for each column to replace the content or not?

Right now we can do it by putting the same content twice plus the content which will be shown as the row expands, but from a performance perspective this could be a nice possibility.

Actual behavior

.. its not mentioned in the official documentation that these possibilities are present.

Environment details

• Angular version: 4.0.X

• Clarity version: 0.10.0

• OS and version: [OSX El Capitan 10.11.6 | Linux Ubuntu 16.4]

• Browser: [all]

[youdz]

Haha, actually we were about to add this as part of our *clrIfExpanded unification. Right now you'd still be able to do it, it's just that you need an extra ngProjectAs that we're going to make unnecessary. Here is a plunker showing a working version of what you're trying to do: https://plnkr.co/edit/7Y5wkOcnMnvxisTUTx2q?p=preview

Notice I can both expand rows dynamically, or listen to when they expand or collapse due to user actions.

For the extra minor question, this isn't something we provide or plan on providing. I think the easy workaround you mention (always replace, and just reuse the content of the original cell in the detail if you didn't want to replace for this specific column) is absolutely fine, the performance impact are negligible since the details are only created when the user actually expands the row.

I hope this answers your questions. 😄

[youdz]

Actually, I'm going to close this but link it to #893 and #1240, to make sure we update Datagrid rows for the two-way binding syntax as part of the IfExpanded clean-up.

[brankoleone]

Thanks for the answers,
The ngProjectAs pretty much does the job, but I stumble on an additional bug.
when using

<ng-template ngProjectAs="clr-dg-row-detail" 
    [(clrIfExpanded)]="expanded[i]" [clrDgReplace]="true">

the clrDgReplace no longer works. Do you have any tweak?

[youdz]

@brankoleone: [clrDgReplace] is an input of the <clr-dg-row-detail> component, so it should go on that rather than on the <ng-template>. Once again, I have to make a note to document this properly once we document the unified *clrIfExpanded for all of our components. 😂

So in your case, just to be clear:

<ng-template ngProjectAs="clr-dg-row-detail" [(clrIfExpanded)]="expanded[i]">
    <clr-dg-row-detail [clrDgReplace]="true">... </clr-dg-row-detail>
</ng-template>

[sbabich-nix]

@youdz is there a possibility to not play expanding animation on initial rendering if row is expanded by default?

[youdz]

@sbabich-nix: If you don't mind, we would like questions to be asked on StackOverflow with the tag vmware-clarity. Otherwise we pollute GitHub issues with them, and by asking questions on long-closed issues you risk us completely missing them.

Anyway, the expand animation doesn't play on initial rendering, that's part of @angular/animations itself, it's not up to us. See this stackblitz, there is no animation on initial rendering: https://stackblitz.com/edit/clarity-datagrid-initially-expanded?file=app%2Fapp.component.html

[sbabich-nix]

Thank you.
The one reason I am asking here not on stackoverflow is that I personally think these causes should be covered by documentation.

Sent from my Windows 10 phone

From: Eudes Petonnet-Vincent
Sent: 28 березня 2018 р. 21:58
To: vmware/clarity
Cc: Sergiy Babich; Mention
Subject: Re: [vmware/clarity] Datagrid expandable rows additional features(#1295)

@sbabich-nix: If you don't mind, we would like questions to be asked on StackOverflow with the tag vmware-clarity. Otherwise we pollute GitHub issues with them, and by asking questions on long-closed issues you risk us completely missing them.
Anyway, the expand animation doesn't play on initial rendering, that's part of @angular/animations itself, it's not up to us. See this stackblitz, there is no animation on initial rendering: https://stackblitz.com/edit/clarity-datagrid-initially-expanded?file=app%2Fapp.component.html
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

--
Confidentiality Note: This e-mail and any attachments are confidential
and may be protected by legal privilege. If you are not the intended
recipient, be aware that any disclosure, copying, distribution or use of
this e-mail or any attachment is prohibited. If you have received this
e-mail in error, please notify us immediately by returning it to the sender
and delete this copy from your system. Thank you for your cooperation.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.