Hello,

I noticed that all component of ComboBox (DropDownList, DropDownTree, MultiColumnComboBox) which have a GroupField doesn't provide a GroupTemplate

It would be very helpful to have one to further customize how we want the group to render

For example in my case, I want to customize items and groups to add checkbox on each level and parent checkbox will select/unselect children, but because I don't have access to group template I can't do it.

I think I can work something with the DropDownTree, but it will be kind of ugly as the component is not suited for multi selection and will not be related to the component selections

Thanks
Regards
Thomas

Window, Dialog, and other popups render as children of TelerikRootComponent, which makes CSS Isolation difficult. Current strategy says to use containment selector or global scope css styles.

To allow CSS isolation to pass through, I'd like to see an additional "CssScope" attribute. For example:

<TelerikWindow CssScope="my-custom-scope">
</TelerikWindow>

Then when the window is rendered:

<div ... my-custom-scope>
....
</div>

The Telerik UI for Blazor TimePicker currently does not appear to expose an equivalent to the Kendo UI for jQuery TimePicker "focusTime" option.

https://github.com/telerik/kendo-ui-core/blob/master/docs/api/javascript/ui/timepicker.md#focustime-datedefault-null

In Kendo UI for jQuery, focusTime allows the popup to open with a specific time focused without actually setting the selected value. This is useful when the picker has no value yet.

For example, let's say we want the time-picker to open up with the placeholder value of 08:00, how would we achieve this in Telerik UI for Blazor? Currently it defaults the placeholder to the current time.

Thanks

Hello,

 after playing with AI chat integration with telerikgrid, few bumps up shows:

lets have this scenario- request from aichat, to perform some filtering/operations on grid with clumn names like col1,col2,col3... generic.

        public async Task<GridAIResponse> GetGridAIData(GridAIRequestDescriptor request)
        {
            var options = new ChatOptions();
            var columnsx = JsonSerializer.Deserialize<List<GridAIColumn>>(JsonSerializer.Serialize(request.Columns));
              options.Tools = new List<AITool>();
               options.Tools.Clear();
     1)   //describe the columns or general behavior like "aprox, arround, near"
            var ff = ChatOptionsExtensions.GetFilter(columnsx);
            ForceSetDescription(ff, @"
If users enters phrases like 'aprox', 'arround', 'near',
operate with field value in between ±10 %.
Example: 'dimensions arround 1000'  results in: 'dimension >= 900 AND dimension<= 1100'.
");

            options.Tools.Add(ff);
options.Tools.Add(ChatOptionsExtensions.GetSort(columnsx));

ChatResponse completion = await _chatClient.GetResponseAsync(conversationMessages, options);
....
return completion.ExtractGridResponse();
}

how to extend "GridAIRequestDescriptor"?
1) - ability to describe column(add). but Description is readonly (coders should add titles or any text manually from column definition - be aware. grid IColumn is accessible only by reflection just now)
OR
2) - ability to specify the "meaninfgull name" (place, where coders can add this)
OR
3)- instead of using just "Fieldname"  of the column, use/add the Title(which is more understandable for LLM)
OR
4) field mapping translation layer. GridColumn.Field -> something descriptive and back after fetching response from LLM

fieldnames are mostly "system DB name" and cannot be changed. So FieldName="Column44qty" and Title="qty available stock", you get the point which one tells you more.

new[]
{
new {
Field = "Column44qty",
Title = ""qty available stock",
Type = "number",
Description = "......",
Values = new[] { "x", "yyy", "zzz" }
},...
}

all points 1-4 are not needed, just one of them is ok.

Hi

I have an TelerikMenu with a mix of internal and external links. The menu is using Data binding to a list of menu items. When using the mouse and clicking the external links it works as expected.
However when using the tab to set focus into the menu, then using the arrow keys to navigate to a menu item then hit Enter key, the link opens in the current tab, even if it set to target="_blank".

In this REPL the Enter key does nothing when at Telerik/Documentation and hitting Enter: 
https://blazorrepl.telerik.com/mgYflMuM27MjqZrD54

In my case, the URL is opened in the current tab, instead of a new tab.
I'm using ItemTemplade to render the links and my template for external links looks like this:

if (item.IsExternal)
        {
                <ahref="@item.Url"class="@cssClass"target="_blank"rel="noopener noreferrer"
                   @onclick="() => { if (isMobile) CloseMobileMenu(); }"
                   @onclick:stopPropagation="!isMobile">
                    @item.Text
                    <TelerikSvgIconIcon="@SvgIcon.HyperlinkOpen"Size="@ThemeConstants.SvgIcon.Size.Small"Class="@(isMobile ? "ms-2" : "ms-2")"/></a>
        }
 
The rendered HTML looks like this:

    <li data-id="595df6d2-0580-42fd-999d-37f73afedcb6" tabindex="-1" class="k-item k-menu-item " role="menuitem" aria-live="polite"><span class="k-link k-menu-link "><div class="d-flex align-items-center justify-content-between w-100 px-2"><a href="https://theurl.com/an/l/45" class="k-menu-link-text" target="_blank" rel="noopener noreferrer">Go to external page<!--!-->
                    <!--!--><span class="telerik-blazor ms-2 k-icon-sm k-icon k-svg-icon k-svg-i-hyperlink-open" aria-hidden="true"><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!--><path d="M32 480h448V256h-32v192H64V64h192V32H32zM320 32l56.9 56.9.5.5L224 242.7l45.3 45.3 153.3-153.4L480 192V32z"></path></svg></span></a></div></span></li>

 
                   
                   
I'd rather nog involve js-hacks to solve this issue. Is this a known bug or am i doing it wrong?

With an active Blazor trial, the Telerik Document Processing NuGet packages are not found in the Visual Studio Package Manager and in the Terminal as well:

Issue: Opening and closing a window will cause the window to reopen with each following OnClick. This seems to have been introduced with the upgrade to .net10

Code: Below is an example used on the basic Telerik Blazor template. Copy this and replace Home.razor with it.

@page "/"

<PageTitle>Telerik Blazor App | Home</PageTitle>

<div id="home-page">
    <HomeSvg />

    <h1>Hello, Telerik UI for Blazor!</h1>

    <p>Welcome to your new Telerik Blazor app.</p>

    <TelerikButton OnClick="OpenWindow1">Click Here First</TelerikButton>
    <TelerikButton OnClick="OpenWindow2">Click Here Second</TelerikButton>
    <TelerikButton OnClick="@(async () => {await Task.Delay(100);})">Unrelated OnClick</TelerikButton>


</div>

<TelerikWindow Visible="ShowWindow1">
    <WindowActions>
        <WindowAction OnClick="CloseWindow1" Name="Close"></WindowAction>
    </WindowActions>
    <WindowContent>
        <span>Moving window now will help find this window in next step, but not necessary to replicate bug.</span>
        <br />
        <span>Close window using 'X'.</span>
    </WindowContent>
</TelerikWindow>

<TelerikWindow Visible="ShowWindow2">
    <WindowActions>
        <WindowAction OnClick="CloseWindow2" Name="Close"></WindowAction>
    </WindowActions>
    <WindowContent>
        <span>Window 1 shouldn't be appearing now, but it it is. Window 1 may be behind this window if you didn't drag in previous step.</span>
        <br />
        <span>If you close these windows, and click the 'Unrelated OnClick' button, both of these windows will reappear, despite just firing Task.Delay(100)</span>
    </WindowContent>
</TelerikWindow>

<style>
    #home-page {
        margin-left: auto;
        margin-right: auto;
        max-width: max-content;
        text-align: center;
        font-size: var(--kendo-font-size-xl);
    }

    @@media (min-height: calc(56px + 50px + 400px)) {
        /* header + footer + home page container*/
        #home-page {
            margin-top: calc(50vh - 28px - 25px - 200px);
        }
    }
</style>

@code {
    public bool ShowWindow1 { get; set; }
    public bool ShowWindow2 { get; set; }

    public async Task OpenWindow1()
    {
        ShowWindow1 = true;
    }

    public async Task OpenWindow2()
    {
        ShowWindow2 = true;
    }

    public void CloseWindow1()
    {
        ShowWindow2 = false;
        StateHasChanged();
    }

    public void CloseWindow2()
    {
        ShowWindow2 = false;
    }
}

Description

When the dropdown is open, the input's aria-activedescendant attribute references an id that does not exist in the DOM. Since aria-activedescendant must point to the id of an actually rendered option element, the attribute is invalid and assistive technologies cannot determine which option is currently active.

Input renders:

aria-activedescendant="b45bcb14-4093-4de8-ad31-cae8ec8ca9c4"

Steps to Reproduce

1. Add a TelerikMultiSelect using the standard Telerik example (source below).
2. Open the dropdown and inspect the HTML or run a Lighthouse audit.

<TelerikMultiSelect Data="@Hobbies"
@bind-Value="@SelectedHobbyIds"
ValueField="@nameof(HobbiesDto.HobbyId)"
TextField="@nameof(HobbiesDto.HobbyName)"
Placeholder="Select your favourite sport..."
Id="multiselect"
Width="100%"
Rounded="@ThemeConstants.DropDownList.Rounded.Medium"
FillMode="@ThemeConstants.AutoComplete.FillMode.Outline"
TagMode="@MultiSelectTagMode.Single"
ShowClearButton="false">
    <MultiSelectSettings>
        <MultiSelectPopupSettings Height="@CustomThemeConstants.Multiselect.PopupHeight" MaxHeight="@CustomThemeConstants.Multiselect.PopupMaxHeight" />
    </MultiSelectSettings>
</TelerikMultiSelect>

@code {
    public List<int> SelectedHobbyIds { get; set; } = [];

    public IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
    {
        new HobbiesDto(1, "Basketball"),
        new HobbiesDto(2, "Golf"),
        new HobbiesDto(3, "Baseball"),
        new HobbiesDto(4, "Table Tennis"),
        new HobbiesDto(5, "Volleyball"),
        new HobbiesDto(6, "Football"),
        new HobbiesDto(7, "Boxing"),
        new HobbiesDto(8, "Badminton"),
        new HobbiesDto(9, "Cycling"),
        new HobbiesDto(10, "Gymnastics"),
        new HobbiesDto(11, "Swimming"),
        new HobbiesDto(12, "Wrestling"),
        new HobbiesDto(13, "Snooker"),
        new HobbiesDto(14, "Skiing"),
        new HobbiesDto(15, "Handball"),
    };

    public class HobbiesDto
    {
        public int    HobbyId   { get; set; }
        public string HobbyName { get; set; } = string.Empty;

        public HobbiesDto() { }

        public HobbiesDto(int id, string name)
        {
            HobbyId = id;
            HobbyName = name;
        }
    }
}

Description

When the dropdown is open, the button's aria-controls attribute references a value that matches the popup's data-id, not its actual id. Since aria-controls must point to an element's id, the attribute is invalid and no element in the DOM matches the reference, breaking the accessible relationship between the button and its popup. 

Button renders:

aria-controls="50dc5df2-b83e-41bd-8c34-98470aba77c6"

Popup element has:

data-id="50dc5df2-b83e-41bd-8c34-98470aba77c6"
id="8630d4e4-2f22-4eaf-b96c-7cae113b70ed"

Steps to Reproduce

1. Add a TelerikDropDownButton using the standard Telerik example (source below).
2. Open the dropdown and inspect the HTML or run a Lighthouse audit.

<TelerikDropDownButton Icon="@SvgIcon.Share" OnClick="@(()=>OnItemClick("Primary"))">
    <DropDownButtonContent>Share</DropDownButtonContent>
    <DropDownButtonItems>
        <DropDownButtonItem Icon="@SvgIcon.Facebook" OnClick="@(()=>OnItemClick("Facebook"))">Facebook</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Twitter" OnClick="@(()=>OnItemClick("Twitter"))">Twitter</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Linkedin" OnClick="@(()=>OnItemClick("Linkedin"))">Linkedin</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Reddit" OnClick="@(()=>OnItemClick("Reddit"))">Reddit</DropDownButtonItem>
    </DropDownButtonItems>
</TelerikDropDownButton>

Hello,

We want the grid column chooser to have a search bar for the user to search what column they need to add/remove to the grid.
We use many non-visible columns in our grid and allow the user to customize what they want to see via the column chooser.  
However, since the user cannot search the available columns they have to scroll with their mouse through a large list to find what they want.
(Notice the scroll bar in the following screenshot)

Thank you

Hi, 

   I have a new laptop with a fresh install of visual studio and telerik etc etc.  When I went to get the ai coding assistants to work, nothing I did worked.  Spent hours trying to figure it out when Claude suggested I install NODE.  After I did that, and went the the telerik blazor extension to "Configure MCP server globally" the ai worked.

   First, have the configuration check to see if node is working and installed and give a warning if it is not, or let people know that it needs to be installed to make it work.  Secondly, add this to the documentation.  Such a pain in the ass when the documentation isn't complete.  The amount of time i spent on this is stupid compared to how simple the solution was.

Peter

Hello

I notice that zoom on chart with numeric values make the axis values with a lot of decimal and didn't find a way to round them.

We can see it directly in the documentation here

Is there a way to keep the axis to rounded value ?

Thank you
Regards,
Thomas

The following exception occurs:

Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.

............

at Telerik.Blazor.Components.Common.Loader.ComponentLoaderContainer.DisposeAsync()

When the user closes the browser and the web page contains any of the below components:

• DockManager
• FileManager
• Grid
• ListView
• PdfViewer
• PivotGrid
• Scheduler
• SpreadSheet
• TreeList