I've got a Blazor WebApp and want to open a page (with several Telerik components) in a new tab. Unfortunately I can't use NavLink or NavigationManager.NavigateTo(url) as they won't open in a new tab/window.

After googling I realized the general consensus is to use javascript: await JS.InvokeVoidAsync("open", <url>, "_blank");

This works fine as long as the page url doesn't contain any parameters (url "/TestPage") but whenever I pass along a parameter (url "/TestPage/dummyParam") the page loads but the styling for the Telerik components are wrong (missing?)

As a sidenote, I get exactly the same weird behavior with a <a href="/TestPage/dummyParam" target="_blank"> so not an option.

Depending on what kind of Telerik components I've added to the opened page I get different errors.
A TelerikButton simply looks ugly but if I add a TelerikTextBox I get an exception  "Error: Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initTextBox' ('TelerikBlazor' was undefined)."

Were thinking maybe components were rendered too early so tried to show them only after OnAfterRender(), but still the same problems. Changing to prerender: false ( @rendermode="new InteractiveServerRenderMode(prerender: false) ) didn't help at all but I'm mostly grabbing at straws at this time..

I've made a very simple sample app demonstrating this problem, see zip.

1. Start page, all looks ok.

2. Pressing  "open in new tab, no param" button, the TestPage is opened in new tab and everything looks fine, correct visuals etc.

3. Back to Home, press "open in new tab, one param" button, exactly the same TestPage is opened in a new tab but styles are now missing, layout is wrong and exceptions reported depending on what controls have been added.

4. Back to Home, pressing the href link, same behavior as nr 3.

Does the "open in new tab" break the SPA boundaries? The answer to my problem is probably obvious, but I just can't see it at the moment.

Does Telerik UI for Blazor have a Timeline component similar to MudBlazor's?

https://mudblazor.com/components/timeline#opposite

I can't seem to find anything similar. Is there someway to create it out of other components?

Trying to install from telerik.ui.for.blazor.6.0.0.commercial.msi on Windows 11 running on Parallels Desktop 19 for MAC.

The Mac host is a Macbookpro with the Apple M2 Pro chip.

The error message is: This application requires .NET SDK 6.0 or later. Please install...

I have the following sdks installed:

7.0.409 [C:\Program Files\dotnet\sdk]
8.0.300 [C:\Program Files\dotnet\sdk]

I was able to unzip the telerik.ui.for.blazor.6.0.0.commercial.zip file to the destination and reference the folder from VisualStudio 2022 and all seems to be well. Just wondering should it be possible to install from the .msi

Many thanks,

Michael.

What could cause this appearance?

Background: I'm upgrading a Blazor Server site from .NET Core 3.1 and Bootstrap 4 to .NET 8 and Bootstrap 5.  Upgraded the Telerik Blazor nuget package and regenerated the CSS file using ThemeBuilder.

Razor markup is:

        <TelerikDropDownList TextField="Key" ValueField="Value" Data="@Sizes" @bind-Value="@Size" Width="150px"><DropDownListSettings><DropDownListPopupSettings Height="auto"></DropDownListPopupSettings></DropDownListSettings></TelerikDropDownList>

The shift starts if the viewport is greater than 1500px in width.  If it's 1500px or less I see:

<div class="k-animation-container telerik-blazor" data-id="d53dbb0d-7b8c-49d1-bb05-a173229fa149" role="region" aria-label="Options list" id="7b6577ed-d3c0-4d2c-b473-0ea9fa03f32d" dir="ltr" style="height: auto; left: 12px; top: 99px; width: 150px; z-index: 10002; display: none;">

1600px shows:

<div class="k-animation-container telerik-blazor k-animation-container-shown" data-id="d53dbb0d-7b8c-49d1-bb05-a173229fa149" role="region" aria-label="Options list" id="7b6577ed-d3c0-4d2c-b473-0ea9fa03f32d" dir="ltr" style="height: auto; left: 56px; top: 99px; width: 150px; z-index: 10002;">

The inline left property increases in value as the viewport increases in width.

Hi, I'm not adding a ChartLegend element to a pie chart, but the legend is still showing up to the right of the pie chart? How can I remove the legend entirely from the Pie chart?

See here for demo: https://blazorrepl.telerik.com/cSupwSbA500BPvKK06

These three questions may seem simple, but for some reason I have not been able to find how to style the context menu nor have I been able to achieve this through css:

1. How can I remove the "border" around the top-most context menu item (in attached pic1, the 'Filter by value' item)

2. How can I change the "reddish" hover color to a color of my choosing? (in attached pic1, the background of 'Open faceplate' item)

3. How can I change the "red" background selection color to a color of my choosing? (in attached pic2, the background of 'Open faceplate' item)

Much thanks

I have a GridCommandButton with a custom action.

If I click directly on the button, the select row is not set. How can I get the content of the row when I click the button?

<GridCommandButton Command="SyncWithAD" Icon="@FontIcon.Lock" Title="Sync to Azure" Enabled="CanEdit" OnClick="@ShowSyncUserWithAdDialog"></GridCommandButton>

Use the GridCommandEventArgs.Item

private async Task ShowSyncUserWithAdDialog(GridCommandEventArgs args)
    {
        if(args.Item is not JasminExternalUser user) return;
        
        Progress.Visible = true;
        var props = new JasminUserAdProperties { Email = user.Email, Name = user.Name, Groups = [] };
        AdProperties = await UserService.GetUserAdProperties(props);
        Progress.Visible = false;
    }

Hi, I have a object with a collection that I want to bind to checkboxes.

public class JasminUserAdProperties()
{
    [Required]
    public string Email { get; set; }
    [Required]
    public string Name { get; set; }

    /// <summary>
    /// Used for checkboxes
    /// </summary>
    public List<AdGroupDto> Groups { get; set; } = [];
}

And this is the form / component

@using Zeus.Shared.DTO

<TelerikWindow Width="450px" Centered="true" Visible="@(AdProperties != null)" Modal="true">
    <WindowTitle>
        <strong>Set Jasmin roles</strong>
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" OnClick="@CancelUpdateJasminRoles"/>
    </WindowActions>
    <WindowContent>
        <TelerikForm Model="@AdProperties" OnValidSubmit="@UpdateJasminRoles">
            <FormValidation>
                <DataAnnotationsValidator/>
            </FormValidation>
            <FormItems>
                @{
                    <FormItem>
                        <Template>
                            <label for="selectAllCheckbox">Selected All</label>
                            <TelerikCheckBox Id="selectAllCheckbox"
                                             Value="@SelectAllValue"
                                             ValueChanged="@((bool value) => ValueChanged(value))"
                                             Indeterminate="@SelectAllIndeterminate"/>
                        </Template>
                    </FormItem>
                    foreach (var group in AdProperties.Groups.OrderBy(g => g.Name))
                    {
                        <FormItem>
                            <Template>
                                <label for="@group.Id">@group.Name</label>
                                <TelerikCheckBox @bind-Value="@group.Selected" Id="@group.Id" Name="@group.Id"/>
                            </Template>
                        </FormItem>
                    }
                }

            </FormItems>
            <FormButtons>
                <TelerikButton Enabled="@CanEdit" ButtonType="ButtonType.Submit" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Save</TelerikButton>
                <TelerikButton OnClick="@CancelUpdateJasminRoles">Cancel</TelerikButton>
            </FormButtons>
        </TelerikForm>
    </WindowContent>
</TelerikWindow>

@code {

    [Parameter] public EventCallback<JasminUserAdProperties> UpdateRoles { get; set; }

    [Parameter] public EventCallback CancelUpdateRoles { get; set; }


    [Parameter] public JasminUserAdProperties AdProperties { get; set; }

    [Parameter] public bool CanEdit { get; set; }


    private bool SelectAllValue => AdProperties.Groups.All(eq => eq.Selected);
    private bool SelectAllIndeterminate => AdProperties.Groups.Any(eq => eq.Selected);

    private void ValueChanged(bool value)
    {
        AdProperties.Groups.ForEach(eq => { eq.Selected = value; });
    }

    private void CancelUpdateJasminRoles()
    {
        if (CancelUpdateRoles.HasDelegate)
        {
            CancelUpdateRoles.InvokeAsync();
        }
    }

    private void UpdateJasminRoles()
    {
        if (UpdateRoles.HasDelegate)
        {
            UpdateRoles.InvokeAsync(AdProperties);
        }
    }

}

I am getting this error(s) in spades.

Have been looking at Bind to nested (navigation) properties in complex objects but its not for lists.

What am I doing wrong?