This is a migrated thread and some comments may be shown as answers.

Multiple Animation Containers in Grid

1 Answer 27 Views
Grid
This is a migrated thread and some comments may be shown as answers.
George
Top achievements
Rank 1
Veteran
George asked on 03 Dec 2020, 11:15 PM

I have a grid and I want to pop up an animation container with content specific to a row when a button is clicked in that row.

How do I reference the correct animation container?  No matter which button I click, it always loads the last animation container.

I've set @ref="notesPopup" for the animation container in the grid template

 

In code:

TelerikAnimationContainer notesPopup;

async Task ToggleNotes()
{
await notesPopup.ToggleAsync();
}

 

I think the question is how do I dynamically set the @ref and reference it in code?

 

Thank you

1 Answer, 1 is accepted

Sort by
0
Nadezhda Tacheva
Telerik team
answered on 08 Dec 2020, 05:29 PM

Hello George,

There is a couple of approaches to achieve the desired results in your case. 

I have attached an example using AnimationContainer component outside of the Grid to display content specific to a row when a button is clicked in that row (see AnimationContainer.zip)

The Notification component is a relatively new component that you also might try in this case. I have attached an example of its implementation to represent its behavior when it comes to generating specific content in different notifications (see Notification.zip)

Another option is to go for the Tooltip component - is has a ShowOn parameter that you can easily modify and choose between click on a button or a hover. You may also find useful this sample on adding tooltips to grid rows and loading their data on demand: Tooltips for grid columns with load-on-demand

Last but not least, the Window component could also be useful in your scenario. Its benefit is that it can be modal, so the user is unable to interact with the rest of the page until it closes (in case that is behavior that you might want to go for).

As for the issue with the component references - this is a problem you'd hit every time you try to use a component reference of components generated in a loop - if you declare that component in the loop, but only one reference field, only the last component will populate that reference. So, you should either use one instance outside the loop (like in my example), or prepare an array of reference fields so you can populate the corresponding  component reference in its place. This can easily become difficult to maintain.

Regards,
Nadezhda
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
George
Top achievements
Rank 1
Veteran
Answers by
Nadezhda Tacheva
Telerik team
Share this question
or