In a TelerikSplitter when I click a button that causes data to load, every element at that level and lower gets the attribute tabindex="-1" for a split second and then the property is removed. Is there any function of the Splitter or Loader/LoaderContainer that would do this? This causes explicitly set tabindex attributes to be completely removed.

Update/Solution: 

I determined that this was the result of an intermediate Blazor component calling some JavaScript to disable tabbing on load. This issue is unrelated to the Telerik LoaderContainer.

I have a TelerikGrid and the TelerikLoader is showing when data is OnRead.

My rows have detail template, that when you expland the row, I want another Loader window displayed while the detail data is retrieved.

I have tried the samples from Telerik but cannot get it to work. Either the Loader does not show at all, OR, I can get it to show and never hide

pls halp

G

How does one change the picture animation this control uses?

Can you use a custom image, my own gif say?

Thanks

Deasun.

How does one move the text msg & animation higher up the page?

It seems to default to the center of the page.

Example:

I would like that animation and the text message up near the top of the page.

Code:

I recall being told I would have access to source code once I buy a licence.

Now that I have a licence, how do I get access to the source so I can do a local build?

I would like to use this control but I am not getting very far. Sad!

The loading does not appear! and my app looks like tis doing nothing for a minute or so.

Then the grid with the data appears.

HOw do I set this up to have the loader appear before the data is done and then disappear when the grid is done?

My razor page looks like this:

<PageTitle>SodaTools</PageTitle>

<TelerikGridLayout>
    <GridLayoutColumns>
        <GridLayoutColumn Width="5%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="5%"></GridLayoutColumn>
        <GridLayoutColumn Width="5%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="5%"></GridLayoutColumn>
    </GridLayoutColumns>
    <GridLayoutRows>
        <GridLayoutRow Height="23%"></GridLayoutRow>
        <GridLayoutRow Height="1%"></GridLayoutRow>
        <GridLayoutRow Height="75%"></GridLayoutRow>
        <GridLayoutRow Height="1%"></GridLayoutRow>
    </GridLayoutRows>
    <GridLayoutItems>
        <GridLayoutItem Column="2" Row="1">
            <div hidden="@blnHideMe">
                <b>Message:</b>
            </div>
        </GridLayoutItem>
        <GridLayoutItem Column="3" Row="1" ColumnSpan="9">
            <div hidden="@blnHideMe" style="align-content:center;background-color:yellow">
                @* <TelerikTextBox @bind-Value="@strAppMsg" Id="AppMsg" />*@
                <p style="white-space: pre-line">@strAppMsg</p>
            </div>
        </GridLayoutItem>
        <GridLayoutItem Column="2" Row="2">
        
        </GridLayoutItem>
        <GridLayoutItem Column="3" Row="2">
        
        </GridLayoutItem>
        <GridLayoutItem Column="10" Row="2">
        
        </GridLayoutItem>    
        <GridLayoutItem Column="2" Row="3" ColumnSpan="10">
            <TelerikLoaderContainer Visible="@( @GridData == null )" Text="Please wait..." />

            <div hidden="@blnHideGrid">                    
                <TelerikGrid Data="@GridData" AutoGenerateColumns="true"
                             Pageable="true"
                             Sortable="true"
                             FilterMode="@GridFilterMode.FilterRow"
                             Class="custom-row-colors">
                    <GridToolBar>
                        <GridCommandButton Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
                        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" /> Export All Pages</label>
                    </GridToolBar>
                    <GridExport>
                        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@OnBeforeExcelExport" />
                    </GridExport>                
                </TelerikGrid>
            </div>
        </GridLayoutItem>
    </GridLayoutItems>
</TelerikGridLayout>

Codebehind looks like this:

private List<LoadStatsResult> GridData { get; set; }
   
        protected override async Task OnInitializedAsync()
        {
            base.OnInitialized();
            strAppMsg = "I am in Load Stats!";
            getData();       
        }

 private async void getData()
        {
            strAppMsg = "This be an app msg: You clicked my Load Stats Button!";
            setAppMsg();

            // how do I connect to my DAS cls
            List<LoadStatsResult> LoadStatsResults = new List<LoadStatsResult>();
            LoadStatsResults = clsDataAccessService.doLoadStats(GlobalStuff.msDBEnvir);

            GridData = LoadStatsResults;

            if (GridData.Count > 0)
            {
                strAppMsg = "How to Use:" + Environment.NewLine
                            + "1) Click the [Export to Excel] button to export displayed rows." + Environment.NewLine
                            + "2) To export all the pages, first click the [Export All Pages] button. Then the [Export to Excel] button." + Environment.NewLine
                            + "3) Filter a column by typing value into textbox on left-handside of the beaker icons." + Environment.NewLine
                            + "4) Filter rules can be gotten by clicking on the full beaker icon. A drop down list of available rules will appear." + Environment.NewLine
                            + "5) Filter clearing is done by clicking on the crossed out beaker icon." + Environment.NewLine
                            + "6) Paging is done by clicking on the Left and right paging icons at the bottom of the grid.";
            }
            else
            {
                strAppMsg = "Sorry nothing found! ";
            };       
        }

I have my Blazor app, based it off the Demo app that comes with VS.

How does one integrate this loader control into the app?

I have a number of pages in the app and some have a telerik btn and grid on it.

I would like after the button is clicked for this loader to show while the grid gets its data from the server.

When done then have this loader disappear.

Then demo when running looks like what I want. just dont know where to stick stuff and how to turn on and off.

the Grid and buttons are within divs within telerik layout control.

HOw that helps.

Thanks

Deasun

Hello,

I'm trying to comply with accessibility standards and I'm unable to get the Loader text to be read by screen readers.

I've tried wrapping the Loader component in an aria-live element, using templates, and even loaded up your GitHub loader examples to no avail. 

Can you shed some light on what may potentially be happening and how to get it picked up by the screen readers?

Thanks

Hi I have added the LoadContainer to the MainLayout. Now I can inject it like this

[CascadingParameter] protected ShowProgressIndicator Progress { get; set; }

MainLayout.razor

<TelerikRootComponent>
    <NavMenu/>
    <div class="page">
        <TelerikNotification @ref="@Notification.Instance"
                             HorizontalPosition="@NotificationHorizontalPosition.Right"
                             VerticalPosition="@NotificationVerticalPosition.Top"
                             Class="bi-notification">
        </TelerikNotification>
        <TelerikLoaderContainer Visible="@ProgressIndicator.Visible" Text="Working on it .." Size="@LoaderSize.Large"/>

        <CascadingValue IsFixed="true" Value="@Notification">
            <CascadingValue Value="@ProgressIndicator">
                @Body
            </CascadingValue>
        </CascadingValue>

    </div>
</TelerikRootComponent>

@code
{
    Notification Notification { get; } = new();
    ShowProgressIndicator ProgressIndicator { get; } = new();
}

What I can't get to work is setting the loading text on the LoadContainer. It's always using the default text "Loading ..."

Show/Hide works fine.

Progress.Visible = true;

public class ShowProgressIndicator
    {
        public TelerikLoaderContainer LoaderContainer { get; set; }

        public bool Visible { get; set; }
        public string Text { get; set; } = "Working on it ..";
        
        // public void Show()
        // {
        //     Text = "Working on it ..";
        //     Visible = true;
        // }
        //     
        // public void Hide()
        // {
        //     Visible = false;
        // }
    }