In my code I'm setting the ExpandedItems and SelectedItems (single item). I have my TreeView in a scrollable div. Once the TreeView has expanded, I want to scroll the selection into view. In javascript I'm getting the DOM element with the aria-selected="true" tag and calling "scrollIntoView". 

The problem is, that tag doesn't exist until after the TreeView has expanded.  There doesn't seem to be any event tied to after the TreeView has expanded. At the OnAfterRenderAsync event, the TreeView hasn't expanded yet.

I can invoke the javascript with a button and it works fine - once the TreeView has expanded. But, I don't want the user to have to click a button to view the selection. Is there a better way to do this?

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

My telerik grid will occasionally place <GridColumn> components out of order from what I expect from the code. Is there a way to enforce the order that the columns will be placed on the grid? I've attached some code below and as you can see the grid columns "Total Pieces" and "Total % Total" should be the last two columns but for some users they will load in the middle of the grid.

<TelerikGrid 
                    Data="@myGridData" 
                    @ref="@Grid"
                    Width="100%"
                    Height="100%"
                    Groupable="true"
                    Pageable="false" 
                    Sortable="true"
                    EnableLoaderContainer="@ShowLoading"
                    FilterMode="@GridFilterMode.FilterMenu">
                    <GridColumns>
                        <GridColumn Field="field1" Width="110px" FieldType="@typeof(string)" Title="Field 1"/>
                        <GridColumn Field="field2" Width="80px" FieldType="@typeof(int)" Title="Field 2"/>
                        <GridColumn Field="field3" Width="130px" FieldType="@typeof(string)" Title="Field 3"/>
                        @if (UnitNumberColumnNames is not null && UnitNumberColumnNames.Any())
                        {
                            foreach (var lengthColumnName in UnitNumberColumnNames)
                            {
                                <GridColumn Width="90px" Field="@lengthColumnName" FieldType="@typeof(decimal)" Title="@lengthColumnName"/>
                            }    
                        }
                        <GridColumn Field="Total Pieces" FieldType="@typeof(decimal)" Title="Total Pieces"/>
                        <GridColumn Field="Total % Total" FieldType="@typeof(decimal)" Title="Total % Total"/>
                    </GridColumns>
                </TelerikGrid>

I would like to change the buttons to display the filter menu in the column headings since it will be unfamiliar to our users.

Is it possible to replace the filter icon that looks like a funnel with the word "Filter"?

Thanks

I'm using the Template override specific background color:

 <ItemTemplate>

                @{
                    var appointment = context as ShiftCalendarBindingModel ?? new ShiftCalendarBindingModel();
                }
                <div style="height: 100%; width:100%; background-color:@(new MarkupString(appointment.BackGroundColor))">
                    <strong>@appointment.ProductionLineName</strong><br />
                    <p>Shift: @appointment.ShiftNumber </p>
                </div>
</ItemTemplate>

The issue is that the appointment background color is clipped off (see attached image) and it shows either the schedule color or the resource color (if used), instead of the appointment color as assigned in the code above. 

Any suggestions on how to assign the background color and have the appointment fully painted, without having to override CSS, which may effect other controls/color/formatting?

Why not have a color property on the appointment itself.  It would be so easy to assign that color property when loading the data, and we could programmatically assign the color any way we'd like based upon the resource, the appointment/appointment type or any type of contextual data we need.   The property would eliminate any "clever" work arounds such as the example code provided.

I've attached an image that shows the "clipping" at the end of the appointment.  Note the colors seen at the clipping is the Resource color.  It would be "white" the calendar background if the resources were not used.

Thanks,

Curt

Probably I do something very simple wrong but I try to follow the single instance per app example and if I debug my code I can see the cascading variable getting the instance.

I can send the following code without any error in the code or in the console of my browser

Notification.Instance.Show(new NotificationModel
{
    Text = "TEST",
    ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
    CloseAfter = 30000,
    Closable = true
});

But I will not see the notification on screen.
It doesn't matter if this is somewhere in the code or in the 

protected override async Task OnAfterRenderAsync(bool firstRender)

or 

protected override void OnInitialized()

Hi

I want create a Blazor Server web app that we need use from mobile env.

The only issue is that using TextBox and similar sometimes soft-keyboard overlap the editing area.

Do you have any advise to optimize o minimize this issue ?

Is there any way I put a carriage return in the message for the Dialog?

I have tried putting <br/> in the string as well as Environment.NewLine and \n\r and nothing seems to work.

await Dialogs.ConfirmAsync("There are un-saved changes to the Account Detail. {I want a line break here} Do you want to save them before continuing?", "Un-saved Changes");

I would like to have the the scheduler show appointments in alphabetical order, regardless of start stop, even if it introduces a "gaps".  Is there a way to override the order the control paints in the appointments?  It appears that no matter the order of the Data (appointment) list, the appointments get painted the same way.

Thanks,

Curt