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

bidirectional binding to Visible property fail

1 Answer 759 Views
Loader
This is a migrated thread and some comments may be shown as answers.
Juan Angel
Top achievements
Rank 1
Veteran
Juan Angel asked on 09 Nov 2020, 11:20 AM

With this code 

<TelerikLoader @bind-Visible="isLoading" />

 

return this error: Object of type 'Telerik.Blazor.Components.TelerikLoader' does not have a property matching the name 'VisibleChanged'.

 

I only wan't show the loader when isLoading it's true.

1 Answer, 1 is accepted

Sort by
0
Svetoslav Dimitrov
Telerik team
answered on 11 Nov 2020, 03:37 PM

Hello Juan,

You could show the Loader by changing the value of the property bound to it. Below, I have made a couple of examples. More information on the Loader can be found in our documentation.

Example: Show the Loader on button click.

<TelerikButton OnClick="@(_ => showLoader = true)">Show Loader</TelerikButton>

<TelerikLoader Visible="@showLoader"></TelerikLoader>

@code {
    public bool showLoader { get; set; }
}

Example 2: Show loader while fetching data from a database

This example would use Task.Delay simulating the usage of a database.

@if (!MyData.Any())
{
    <TelerikLoader Visible="true"></TelerikLoader>
}
else
{
    @MyData.FirstOrDefault()
}


@code {
    public List<string> MyData { get; set; } = new List<string>();

    public async Task LoadData()
    {
        MyData.Add("Some Data");
    }

    public bool showLoader { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(2000);
        await LoadData();
    }
}

Example 3: Loading Panel

A sample implementation of a loading panel can be found in our documentation.

If I could further assist you in any way do not hesitate to open a support ticket or follow up on this conversation.

Regards,
Svetoslav Dimitrov
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/.

Rafael
Top achievements
Rank 1
commented on 13 Nov 2022, 10:21 PM | edited

This does not seem to work for me.

I have a modal component where I wanted the parent component to signal the ModalDialog that it wants to show the TelerikLoader via two way binding, but it seems like the binding doesn't have any effect. Any ideas?


<TelerikDialog @bind-Visible="@ShowModal"
               ShowCloseButton="false"
               ButtonsLayout="DialogButtonsLayout.End">
    <DialogTitle>
        <TelerikIcon IconClass="k-icon k-i-exclamation-circle"></TelerikIcon>
        <strong>@Title</strong>
    </DialogTitle>
    <DialogContent>
        <strong>@Text</strong>
    </DialogContent>
    <DialogButtons>
        @switch (DialogType)
        {
            case ModalDialogType.OkCancel:
                <TelerikButton 
                    ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" OnClick="@ModalOk">
                    Ok
                    <TelerikLoader ThemeColor="light" Visible="@_showLoader"/>
                </TelerikButton>
                <TelerikButton OnClick="@ModalCancel">Cancel</TelerikButton>
                break;
            case ModalDialogType.YesNo:
                <TelerikButton ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" OnClick="@ModalOk">
                    Yes
                    <TelerikLoader ThemeColor="light" Visible="@_showLoader"/>
                </TelerikButton>
                <TelerikButton OnClick="@ModalCancel">No</TelerikButton>
                break;
            default:
                <TelerikButton ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" OnClick="@ModalOk">
                    @ConfirmText
                    <TelerikLoader ThemeColor="light" Visible="@_showLoader"/>
                </TelerikButton>
                <TelerikButton OnClick="@ModalCancel">@CancelText</TelerikButton>
                break;
        }
    </DialogButtons>
</TelerikDialog>

 

 

public partial class ModalDialog: ComponentBase
    {
        [Parameter] public bool ShowModal { get; set; }

        [Parameter]
        public bool ShowLoader
        {
            get => _showLoader;
            set
            {
                if (_showLoader == value) return;
                _showLoader = value;
                InvokeAsync(StateHasChanged);
                ShowLoaderChanged.InvokeAsync(value);
            }
        }
        [Parameter] public string Title { get; set; } = "";
        [Parameter] public string Text { get; set; } = "";
        [Parameter] public string ConfirmText { get; set; } = "Confirm";
        [Parameter] public string CancelText { get; set; } = "Cancel";
        [Parameter] public ModalDialogType DialogType { get; set; }
        [Parameter] public EventCallback OnClose { get; set; }
        [Parameter] public EventCallback OnConfirm { get; set; }
        [Parameter] public EventCallback<bool> ShowLoaderChanged { get; set; }

        private bool _showLoader;

        private  Task ModalOk() => OnConfirm.InvokeAsync();

        private Task ModalCancel() => OnClose.InvokeAsync();
    }

 

 

****From the Parent****

<ModalDialog ShowModal="@_showModal"
             Text="@_modalText"
             @bind-ShowLoader="@_showLoader"
             Title="@_modalTitle"
             DialogType="ModalDialogType.YesNo"
             OnClose="@OnCancel"
             OnConfirm="@OnConfirm"/>
Svetoslav Dimitrov
Telerik team
commented on 16 Nov 2022, 01:00 PM

Hello Rafael,

The Loader component exposes just a parameter that controls the visibility - Visible. The VisibleChanged event is not implemented, thus two-way value binding is not exposed. I have prepared a basic sample with a Telerik Dialog that has a Loader in its content and it seems to work for me as expected:

Modal Dialog:

<TelerikDialog Visible="@DialogVisible"
               VisibleChanged="@(async (bool v) => await InvokeDialogVisibleChanged(v) )"
               Title="@Title">
    <DialogContent>
        A new version of <strong>Telerik UI for Blazor</strong> is available. Would you like to download and install it now?
    </DialogContent>
    <DialogButtons>
        <TelerikLoader Visible="@LoaderVisible"></TelerikLoader>
        <TelerikButton OnClick="@(() => { DialogVisible = false; })">Skip this version</TelerikButton>
        <TelerikButton OnClick="@(() => { DialogVisible = false; })">Remind me later</TelerikButton>
        <TelerikButton OnClick="@(() => { DialogVisible = false; })" ThemeColor="primary">Install update</TelerikButton>
    </DialogButtons>
</TelerikDialog>

@code {
    [Parameter]
    public bool DialogVisible { get; set; }
    [Parameter]
    public bool LoaderVisible { get; set; }

    [Parameter]
    public EventCallback<bool> DialogVisibleChanged { get; set; }

    private async Task InvokeDialogVisibleChanged(bool value)
    {
        DialogVisible = value;

        if (DialogVisibleChanged.HasDelegate)
        {
            await DialogVisibleChanged.InvokeAsync(DialogVisible);
        }
    }

    private string Title { get; set; } = "Software Update";
}

Usage:

<ModalDialog @bind-DialogVisible="@isDialogVisible" LoaderVisible="@isLoaderVisible"></ModalDialog>


@code {
    private bool isDialogVisible {get;set;} = true;
    private bool isLoaderVisible {get;set;} = true;
}

Can you try the same approach and get back to me if it works as expected?

Jose Antonio
Top achievements
Rank 1
commented on 18 Jan 2023, 11:56 AM

Hi Svetoslav Dimitrov,

this code works for me ... thanks !!!

Tags
Loader
Asked by
Juan Angel
Top achievements
Rank 1
Veteran
Answers by
Svetoslav Dimitrov
Telerik team
Share this question
or