Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 03 Jun 2019 12:30 by Andrew
Andrew
Created on: 31 May 2019 07:38
Category: UI for Blazor
Type: Feature Request
4
Add "Visible" property to all controls

All controls (such as TelerikGrid, TelerikDropDownList, etc) should have a "Visible" property. This bindeable boolean value controls whether the control is visible on the page or not:

<TelerikGrid Visible="@IsVisible" />

@functions {

protected bool IsVisible

}

This is a much better method than surrounding the entire control's markup in an @if(IsVisible) block, since that causes the control to get removed/added to the dom at runtime. This can cause many issues such as the control's constructors being fired multiple times, the dom getting "jiggled" about unecessarily.

I feel the "Visible" property is a cleaner way to hide controls.

2 comments
Andrew
Posted on: 03 Jun 2019 12:30

OK I understand your position. I have implemented the CSS style workaround that you so kindly provided.

 

Thank you!

ADMIN
Marin Bratanov
Posted on: 31 May 2019 10:54
Hello Andrew,

If such a property were implemented in the component itself, it would still use an @if(@Visible) block, and so - toggling it would still add/remove the entire component from the DOM, together with the underlying re-initialization that may take place. This is the expected behavior of a Blazor component.

For example, the Window component that already implements such a property uses the following as an approach:

@if (@Visible)
{
    <div class=". . . .">
        . . . .
    </div>
}

If you want to use CSS to hide the component, I'd suggest toggling the display attribute of a parent element, or the Class parameter of the component to include a class that will hide it. I believe the point of Blazor to be to clean up the DOM when something is not being used, so I am not sure this would be a very positive practice, but here's a basic example of toggling a class:

@using Telerik.Blazor.Components.Grid
 
<style>
    .hidden {
        display: none;
    }
</style>
 
<button onclick="@ToggleGridDisplay">Toggle Grid Display</button>
 
<TelerikGrid Class="@(@isHidden ? "hidden": "")" Data="@MyData" Height="300px" Pageable="true" Sortable="true">
    <TelerikGridColumns>
        <TelerikGridColumn Field="@(nameof(SampleData.Id))" />
        <TelerikGridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
        <TelerikGridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </TelerikGridColumns>
</TelerikGrid>
 
@functions {
    bool isHidden { get; set; }
 
    void ToggleGridDisplay()
    {
        isHidden = !isHidden;
    }
 
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        HireDate = DateTime.Now.AddDays(-x)
    });
 
    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }
 
    //in a real case, consider fetching the data in an appropriate event like OnInitAsync
    //also, consider keeping the models in dedicated locations like a shared library
    //this is just an example that is easy to copy and run
}


Regards,
Marin Bratanov
Progress Telerik UI for Blazor

Create an account Log In
View
Type
Status
Category