Clarity: How to iterate and display multiple column wise detail rows for an expanded row?

[shravansofts]

Select one ... (check one with "x")

[x] bug
[] feature request
[] enhancement

Expected behavior

I want to show row(parent) and its related children in expanding row as shown below:

Actual behavior

Using custom component and ngProjectAs="clr-dg-row-detail" syntax it is not possible to loop.

Issue link
https://stackblitz.com/edit/clarity-datagrid-row-expand-iterate-issue?file=app%2Fapp.component.html

Environment details

• Angular version: 5.2.x

• Clarity version: 0.11.x

• OS and version: all

• Browser: all

[gomesjj]

@shravansofts I am not sure how the "my-detail" component would generate a loop on its own, but an ng-template with ngFor works just fine. See this.

Please correct me if I've got the wrong end of the stick…

Jose

[shravansofts]

@gomesjj Thanks for the workaround.
my-detail component had the ngFor directive inside its .html file.

But how could we make it work using a custom component for the same?
Let's say I got the below usecase in future. I have to show some info after children as shown below:

Which could be achieved as shown in below link(without custom component). But going with a custom component will be a cleaner and better approach for extensibility in future.
https://stackblitz.com/edit/clarity-datagrid-row-expand-iterate-issue-query2?file=app/app.component.html

[gomesjj]

@shravansofts I see what you mean now.

Somehow I missed the app.detail.component.html file… The only issue you had there was the wrong ngFor syntax used on an ng-template. This is what you need.

[adityarb88]

@gomesjj: Thanks for taking the time to debug the issue! We really appreciate it.

@shravansofts: I believe you could also use ng-container inside of the my-detail component:

<ng-container *ngFor="let child of children">
    <clr-dg-row-detail *clrIfExpanded>
        <clr-dg-cell>{{child.username}}</clr-dg-cell>
        <clr-dg-cell>{{child.fullName}}</clr-dg-cell>
        <clr-dg-cell>{{child.role}}</clr-dg-cell>
    </clr-dg-row-detail>
</ng-container>

Closing the issue based on the solution provided by @gomesjj.

@shravansofts please feel free to reopen the issue if you have more questions. Also, along with Github another good place to ask how to questions is on StackOverflow with the vmware-clarity tag. We monitor StackOverflow regularly and filing a question over there also helps other users in the community. Thanks!

[shravansofts]

@gomesjj Thanks a lot man!
@adityarb88 thanks for the tip on ng-container and stackoverflow. :+1:

[shravansofts]

@adityarb88 We are using clarity for vCenter plugin development.
When we are using the inline/custom component syntax for datagrid details and doing a data refresh event.
This cannot be replicated in standalone mode(stackblitz). It is showing in vCenter plugin.
We are getting the following error. Can you have a look at actual clarity implementation for any null check missing?

[youdz]

@shravansofts: This error indicates you are somehow destroying the row detail (or one of its parents) before it even had time to initialize. In other words, you're creating a row, and then halfway through the initialization lifecycle, you destroy it immediately. That's something that should not happen, and reveals that there is a problem somewhere in your app.

We had a similar issue a while back, with someone wanting to add extra null checks to suppress an error they had, but it was decided against it because early fails like that help you debug before you hit issues that are impossibly hard to investigate. Here is the link if you're interested in the conversation: #151.

EDIT: Also, please note that data refresh is easy to simulate on StackBlitz, just generate a new array of objects either on a button click or in a setInterval(). If even with that you can't reproduce the issue in StackBlitz, then the problem definitely is somewhere in your application.

[shravansofts]

@youdz Please find a sample angular project(based on plugin-seed 0.9.8 by vmware) that and implemented a sample Users Listing with datagrid row expand feature.
Now as a standalone webapp also it is throwning error while navigating to next page as shown below:

This is a different error from the above one. If you comment the "" in parent component. the error will disappear.

Steps to run project:
prerequisite:
node.js version 6.9 or higher

• npm install
• npm install -g json-server

Run:

1. start json-server to get mock data and load local message bundles(cmd terminal #1)
   npm run json-server
2. run the plugin in dev mode and watches your files for live-reload (cmd terminal #2)
   ng serve

Code Files path "testplugin-ui\src\app\users*"

Here is the project seed with code
testplugin-ui.zip

Please let me know what is wrong in this code/clarity code.

Thanks,
shravan

[youdz]

@shravansofts: Both this error and the one before don't seem to be Clarity errors, they're due to an issue in the app's code. On top of that we can't download, install and build projects just to debug them, that would take way too much time.

Because of this, I recommend you ask your question on StackOverflow with the tag vmware-clarity, with a StackBlitz reproducing the issue. There is absolutely no reason for you to be able to reproduce the bug in a project but not in StackBlitz, and since this isn't a Clarity bug we shouldn't have this conversation here on GitHub.

[shravansofts]

@youdz how do you say it is not clarity bug?
if I comment line.
It's working fine.

As I need to have a rest api server, I had done as a standalone project.
I don't think it will take days of your time to download and run.
At most it may take 5 to 10 mins.

thanks,
shravan

[gnomeontherun]

The best way to report bugs is with a simple isolated StackBlitz. You don't need a server, replace that with static data. It took me 5 minutes to do, and I concur with @youdz that it is not an issue with Clarity but with your lifecycle management of your components. I'd start by reviewing your observables and any async behaviors.

https://stackblitz.com/edit/clarity-light-theme-v11-7e6mxm?file=app/app.component.html

[shravansofts]

@gnomeontherun Thanks for looking into it. I had done the same thing without service call which works fine as yours. But with in-build refresh mechanism(say a refresh button which fetches and updates data) and the error occurs on click of next page.

This seed is given by VMware itself. I had followed the same way of observable how other components(monitorComponent) are there in seed project. Please let me know what is wrong in that.
This will be very helpful for us.

[gnomeontherun]

The seed is most basic, it doesn't even have Observables https://github.com/vmware/clarity-seed/search?q=Observable&type=Code&utf8=%E2%9C%93 so I'm not sure what exactly you're pointing to.

We cannot spend time triaging people's applications, but this error usually means you are changing the value of something twice, so look at your logic for refreshing the page contents for any place you might be setting a value more than once in a change detection cycle.

[shravansofts]

I'm talking about vmware plugin seed.
https://labs.vmware.com/flings/vsphere-html5-web-client?download_url=https%3A%2F%2Fdownload3.vmware.com%2Fsoftware%2Fvmw-tools%2Fvsphere_html_client%2FHTML+Client+SDK+Fling+Overview+and+Release+Notes-6094542.pdf#changelog

[gomesjj]

@gnomeontherun I am not disagreeing with your stance and I think that @shravansofts could have provided a better plunker for troubleshooting. But, to be fair, from my tests so far I have noticed that the errors only occur when pagination is enabled and the clr-dg-row-detail is part of a different component. That occurs whether the data is static or not...

I haven't been able to fully troubleshoot yet because I myself am not much experienced in Typescript and Angular. I will keep trying though, as it is a good learning exercise… :-)

[gomesjj]

@shravansofts I have added an answer to your question on StackOveflow.

[shravansofts]

Thanks @gomesjj

Here is the stackOverflow link for reference:
https://stackoverflow.com/questions/49325539/need-help-in-multiple-ui-issues-in-angular-project-with-clarity-framework/49331238#49331238

[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.