Telerik Forums
UI for Blazor Forum
1 answer
118 views

Hi,

I was wondering the reason for this change?  I can have many LoaderContainers on my screen, and now if a dialog appears, depending on positioning it may or may not be hidden -- and sometimes even just partially hidden!  

Example: https://blazorrepl.telerik.com/mSEsmjbL50qFUO1p20

Depending on your window size you may or may not be able to click OK!

Dimo
Telerik team
 answered on 02 Sep 2024
0 answers
83 views

Hello.  Is there a way to override "No Records Available" message while the page is loading, for TalerikLoaderContainer for Blazor?

Found this https://docs.telerik.com/blazor-ui/components/grid/templates/no-data-template, but I was hoping to find something that's specific for loading. 

Haewon
Top achievements
Rank 1
 updated question on 13 Aug 2024
1 answer
287 views
I have the following TelerikLoaderContainer definition with a custom GIF:

        <TelerikLoaderContainer Visible="@IsBusy">
            <Template>
                <div style="background:white;color:black;padding:1em;">

                    <img src="/images/IsBusyV1.gif"
                         width="100" height="100" alt="loading animation" />

                </div>
            </Template>
        </TelerikLoaderContainer>

When the value IsBusy runs, I see my gif inside a small white box.  Instead, I'd like to change the "gray" color that, I assume, is defined by changing the zindex layer's transparency value to a lesser value.  

How do I change this to show just the IsBusy.gif?  E.g. I don't want the background to be "gray" or I want to change it to a different "light gray" value when it runs.
Georgi
Telerik team
 answered on 04 Dec 2023
0 answers
82 views

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.

David
Top achievements
Rank 1
 updated question on 23 Oct 2023
0 answers
88 views

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

George
Top achievements
Rank 1
Iron
Iron
 asked on 19 Sep 2023
1 answer
105 views

How does one change the picture animation this control uses?

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

Thanks

Deasun.

Svetoslav Dimitrov
Telerik team
 answered on 08 Feb 2023
1 answer
277 views

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:

@* LoaderContainer with transparent panel *@
<TelerikLoaderContainer Class="no-panel"
                        ThemeColor="@ThemeConstants.Loader.ThemeColor.Dark" />
<style>
    .no-panel .k-loader-container-panel {
        background-color: transparent;
        border-width: 0;
    }
</style>
<TelerikGridLayout>  
    <GridLayoutColumns>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>    
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="6%"></GridLayoutColumn>
        <GridLayoutColumn Width="7%"></GridLayoutColumn>
    </GridLayoutColumns>
    <GridLayoutRows>        
        <GridLayoutRow Height="100px"></GridLayoutRow>        
        <GridLayoutRow Height="100px"></GridLayoutRow>     
        <GridLayoutRow Height="100px"></GridLayoutRow>           
        <GridLayoutRow Height="100px"></GridLayoutRow>        
        <GridLayoutRow Height="100px"></GridLayoutRow>          
        <GridLayoutRow Height="100px"></GridLayoutRow>          
        <GridLayoutRow Height="100px"></GridLayoutRow>           
        <GridLayoutRow Height="100px"></GridLayoutRow>          
        <GridLayoutRow Height="100px"></GridLayoutRow>          
        <GridLayoutRow Height="100px"></GridLayoutRow>         
        <GridLayoutRow Height="400px"></GridLayoutRow>               
    </GridLayoutRows>

</TelerikGridLayout>

Those heights are to simulate my long page :).

 

Dimo
Telerik team
 answered on 01 Feb 2023
1 answer
190 views

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! ";
            };       
        }

Hristian Stefanov
Telerik team
 answered on 16 Sep 2022
0 answers
117 views

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

 

 

Deasun
Top achievements
Rank 3
Bronze
Bronze
Bronze
 asked on 09 Sep 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?