Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 14 Mar 2023 10:34 by ADMIN
Release 4.1.0 (15/03/2023)
ManojKumar
Created on: 19 Feb 2023 19:14
Category: UI for Blazor
Type: Feature Request
1
TelerikWindow: Visible completely removes the DOM from tree, expose an API to hide/show

The Visible parameter removes the underlying render fragment when set to false.

Please expose APIs (maybe Show/Hide methods) to keep the DOM in tree but only modify visibility / display CSS attributes to hide/show the telerik window element. This would allow developer to retain content / state of the window which may need to be displayed very frequently.

5 comments
ADMIN
Nadezhda Tacheva
Posted on: 14 Mar 2023 09:50

Hi ManojKumar,

The majority of components expose this Class parameter to allow one add custom class and then access the wrapping element of the component to style it as needed.

The case with the modal Window is a bit different though, as it has specific rendering. When a Window is modal, it is wrapped in a `<div class="k-dialog-wrapper">` which contains both the component and the overlay. The Data Id is added to the actual component, the Window, and not to the "k-dialog-wrapper" element. You may inspect the rendering to verify that yourself.

I've created a knowledge base article which demonstrates how one may handle the scenario in two different approaches depending on whether the Window is modal or not.  The resource is still under review but you may check the suggested solutions here: https://github.com/telerik/blazor-docs/pull/1353.

Regards,
Nadezhda Tacheva
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ManojKumar
Posted on: 07 Mar 2023 12:15

Thank you for the sample, I'm aware of the Class parameter on Window but this trick does not work for a Modal window as the modal container is rendered above the window element.

Also, whenever I want to get the native HTML element of any Telerik Component, its much more difficult without the Data ID thats internally used in your components. This is one example where I needed Data ID to access the modal container in the DOM tree.

 

ADMIN
Nadezhda Tacheva
Posted on: 07 Mar 2023 11:58

Hi ManojKumar,

It is currently possible to set a unique CSS class to the Window through its Class parameter. This will allow you to target the component and toggle its visibility with CSS.

The solution I suggested in my previous post also includes a custom close command that you may handle to hide the Window with CSS.

Generally speaking, this solution is currently achievable: https://blazorrepl.telerik.com/GdkQmCvw59wXTDWg45. The issue here is that the behavior is affected by a bug with the component that we recently registered.

It will be fixed in 4.1.0. and this is why my recommendation is to use this approach once the fix is live.

Regards,
Nadezhda Tacheva
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/.

ManojKumar
Posted on: 28 Feb 2023 17:17
Thank you, but It would be nice if the Data ID is accessible on the component, as of now (4.0.1) I assign an id to my content and get the closest element to toggle visibility.
ADMIN
Nadezhda Tacheva
Posted on: 28 Feb 2023 13:07

Hi ManojKumar,

This requirement can be achieved with a custom "Close" action. Instead of modifying the Visible parameter of the Window, this custom action will alter its visibility with CSS. Thus, the Window content will remain in the DOM.

I will publish a knowledge base article with some more details and an example of the approach. It will be live in our upcoming 4.1.0 version. It is scheduled for release on March 15th.

Once live, I will post an update containing the resource link.

Regards,
Nadezhda Tacheva
Progress Telerik

Learn about the important changes coming in UI for Blazor 4.0 in January 2023!
Create an account Log In
View
Type
Status
Category