I tried to use the TelerikDropDownTree component in my blazor application. When I activate the option ShowClearButton and click on the clear button, there is no update of the bound value or the ValueChanged event will be raised.

I can reproduce my issue with repl https://blazorrepl.telerik.com/wKOcviug54ZSE06146

Image Collection Viewer / Selector Component

A flexible and accessible image viewer / selector for Blazor applications, similar to what popular eCommerce websites use to show products.

Features

• Accessibility: Uses ARIA roles and labels for screen reader support and keyboard navigation.
• Configurable Layout: Supports custom Height and Width parameters to fit various UI needs.
• Aspect Ratio Control: ConstrainImageHeight and ConstrainImageWidth parameters allow precise control over aspect ratio, whether to maintain aspect ratio and/or constrain height and width.
• ImageInfo Model: Accepts a collection of ImageInfo objects, each with a required image source and optional alt text for accessibility.
• Alt Text Support: Ensures all images have descriptive alt text for improved accessibility.
• Scrollbar Handling: Automatically displays a vertical scrollbar if the image list exceeds the constrained height, ensuring all images remain accessible.
• Visual Feedback: Selected and focused images are visually highlighted for clear user interaction.

Sample Code

ImageCollectionViewer.razor

@inject ITelerikStringLocalizer Loc

<LanguageTrackProvider OnInitializeEvent="provider => provider.RegisterComponent(this)" />

@if (Images.Any() && _selectedImage != null)
{
    <div class="d-flex @Class" style="height: @Height; width: @Width;">
        <ul aria-label="@Loc["ImageThumbnails"]" role="radiogroup" class="image-collection-button-container">
            @foreach (var image in Images)
            {
                <li>
                    <button @onclick="() => OnImageSelect(image)"
                            class="@($"image-collection-button{(image.Src == _selectedImage.Src ? " selected" : "")}")"
                            role="radio" aria-checked="@(image.Src == _selectedImage.Src ? "true" : "false")">
                        <img src="@image.Src" alt="@image.Alt" />
                    </button>
                </li>

            }
        </ul>
        <div class="image-collection-image-container">
            <MagnifiableImage Image="@(new ImageInfo(_selectedImage.Src, _selectedImage.Alt))" Class="image-collection-image" MagnifyScale="@MagnifyScale"
                              Height="@(ConstrainImageHeight ? "calc(100% - 2px)" : "auto")" Width="@(ConstrainImageWidth ? "100%" : "auto")" />
        </div>
    </div>
}
else
{
    <TelerikSkeleton ShapeType="@SkeletonShapeType.Rectangle" Height="@Height" Width="@Width" Class="@Class"/>
}

<style>
    .image-collection-button-container {
        flex: 0 0 auto;
        width: 10%;
        height: 100%; 
        min-width: 90px;
        max-width: 110px;
        overflow-y: auto;
        padding: 2px;
        margin: 0;
        scrollbar-color: rgba(1, 1, 1, 0.25) rgba(0, 0, 0, 0);
        scrollbar-gutter: stable;
        list-style: none;
    }
    
    .image-collection-button {
        padding: 0;
        margin-bottom: 1rem;
        border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08));
        border-radius: 0.5rem;
        width: auto;
        aspect-ratio: 1 / 1;
        display: block;
    }
    .image-collection-button:hover {
        filter: brightness(90%);
    }
    .image-collection-button:focus {
        outline: none;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #424242) 50%, transparent);
    }
    .image-collection-button.selected {
        box-shadow: 0 0 0 2px var(--kendo-color-primary, #1274AC);
    }
    .image-collection-button img {
        width: 100%;
        height: 100%;
        min-width: 70px;
        min-height: 70px;
        max-width: 90px;
        max-height: 90px;
        object-fit: cover;
        border-radius: 0.5rem;
        display: block;
    }
    
    .image-collection-image-container {
        flex: 0 0 auto;
        width: 90%;
        padding: 2px;
    }
    
    .image-collection-image {
        border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    }
</style>

ImageCollectionViewer.razor.cs

using Microsoft.AspNetCore.Components;
using Telerik.Blazor.Components;

namespace RazorLibrary.Components.Images;

/// <summary>
/// <para>
/// Displays a collection of selectable image thumbnails provided by <see cref="Images"/> and a main image display area.
/// If <see cref="Images"/> is empty, displays a <see cref="TelerikSkeleton"/> placeholder instead. Supports
/// accessibility, configurable height via <see cref="Height"/>, width via <see cref="Width"/>, aspect ratio control
/// via <see cref="ConstrainImageHeight"/> and <see cref="ConstrainImageWidth"/>, and alt text for images.
/// </para>
/// <para>
/// Usage: 
/// <code>
/// @using RazorLibrary.Components.Images
///
/// 
/// &lt;ImageCollection Images="myImages" Height="300px" Width="100%" /&gt;
///
/// 
/// @code {
///     private List&lt;ImageInfo&gt; myImages = new()
///     {
///         new ImageInfo("img1.jpg", "First image"),
///         new ImageInfo("img2.jpg", "Second image")
///     };
/// }
/// </code>
/// </para>
/// </summary>
public partial class ImageCollection
{
    /// <summary>
    /// The collection of images to display in the image collection.
    /// </summary>
    [Parameter] public IEnumerable<ImageInfo> Images { get; set; } = [];

    /// <summary>
    /// The overall height of the image collection component (e.g., "200px", "100%", or "auto"). Default is "auto".
    /// </summary>
    [Parameter] public string Height { get; set; } = "auto";
    /// <summary>
    /// The overall width of the image collection component (e.g., "200px", "100%", or "auto"). Default is "auto".
    /// </summary>
    [Parameter] public string Width { get; set; } = "auto";

    /// <summary>
    /// If true, sets the main image display height to 100%, which constrains it to the value specified by <c>Height</c>.
    /// If false, height is auto. Maintains aspect ratio unless both <c>FixImageHeight</c> and <c>FixImageWidth</c> are true.
    /// Default is false.
    /// </summary>
    [Parameter] public bool ConstrainImageHeight { get; set; } = false;
    /// <summary>
    /// If true, sets the main image display width to 100%, which constrains it to the value specified by <c>Width</c>.
    /// If false, width is auto. Maintains aspect ratio unless both <c>FixImageHeight</c> and <c>FixImageWidth</c> are true.
    /// Default is true.
    /// </summary>
    [Parameter] public bool ConstrainImageWidth { get; set; } = true;

    /// <summary>
    /// The magnification scale for the magnifier. Default is 3 (3x magnification).
    /// </summary>
    [Parameter] 
    public double MagnifyScale { get; set; } = 3;
    
    /// <summary>
    /// Applies additional CSS classes to the ImageCollection's root element for custom styling and visual modifications.
    /// </summary>
    [Parameter] public string Class { get; set; } = string.Empty;

    private ImageInfo? _selectedImage;

    /// <inheritdoc />
    protected override void OnInitialized()
    {
        _selectedImage = Images.FirstOrDefault();
    }

    private void OnImageSelect(ImageInfo imageInfo)
    {
        _selectedImage = imageInfo;
    }
}

ImageInfo.cs

namespace RazorLibrary.Components.Images;

/// <summary>
/// Information about an image, including the source URL and alt text.
/// </summary>
/// <param name="Src">The image source URL. Required.</param>
/// <param name="Alt">The image alt text. Optional.</param>
public record ImageInfo(string Src, string? Alt = null);

Note

The sample code uses the MagnifiableImage component, which is another feature request. The MagnifiableImage component can be replaced with a img element.

After upgrading to 12.0.0, the Content does not change when clicking tabs. I always see the Content of the first tab.

My project targets .net8.

Using the TelerikTabSrip, If the first tab is not visible when rendered, the tab content for all tabs doesnt render.

Replicated here https://blazorrepl.telerik.com/cpEWGOPk22VW8be254

If you change the code to make the first tab visible, all is well.

You can make other tabs invisible, and all is well.

In our application we use some large datasets and present them in a TelerikGrid. We use WPF + Blazor Hybrid and noticed, that in some cases the memory usage of the Web View process grows up to some gigabytes.

Here a screenshot of the task manager with a lot of RAM usage for the web view.

Here a screenshot of the detached DOM elements after a two navigations. The container divs are not garbage collected.

I tracked down the issue to come from the TelerikGrid, because when I remove it from the pages, everything runs fine. I also removed all GridColumns and the issue is still present. In the developer tools I noticed that one of the parent div elements remains in memory every time I navigate back and forth.

I also created a blank Blazor WebAssembly Standalone application and added a simple instance of the grid. Here, the issue is also present. I attach the one blazor page that causes the issue.

I've tested all major versions from 5.1 upwards, every version is affected.

I've noticed this warning is now shown since version 9.0.0. I checked the release notes and don't see any notes reflecting this change. I also checked the documentation and don't see any information about the OnUpdate event. Can we please update the documentation to document the changes? I would like to understand the behavior of OnUpdate so I can move away from ValueChanged.

"warning CS0618: 'TelerikFilter.ValueChanged' is obsolete: 'Use OnUpdate instead.'"

Blazor Filter Events - Telerik UI for Blazor

Hello:

I am using column menu in a gantt component. In version 8.1.1 the selection of columns to display was working correctly, but when upgrading to version 9.0.0 I get an error using the same implementation. The error received is:

blazor.web.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Blazor.Components.Common.ColumnMenu.ColumnMenu`1.<OnColumnChooserColumnVisibilityChange>d__188[[BlazorRepl.UserComponents.__Main.FlatModel, BlazorRepl.UserComponents, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at Telerik.Blazor.Components.Common.ColumnMenu.ColumnMenuChooser.OnApplyClick()
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

You can replicate the error from online examples just by adding or removing visible columns.
https://www.telerik.com/blazor-ui/documentation/components/gantt/gantt-tree/columns/menu

I need to use this functionality with Telerik® UI for Blazor version 9.0.0.

When is it planned to solve this error? Is there a workaround I can apply?

Regards.

I would like to have possibility to put sorting and filtering icons in second row or at least second line in TelerikGrid header. To follow our project design I need to have 1 header row with header titles, and second row with sorting and filtering. Or at least one table header row with sorting and filtering icons in 2 line. Is this somehow possible to achieve?

Hi, 

Are you planning to add a loader to the grid in the feature?

E.g as an isLoading attribute or exepnd the build-in one?

With method OnRead to fetch data, when grid is not yet loaded with data, it displays no records available.

Also when chenging data, loading is not starting, but there is an unsmooth transition after some time. 

Thanks in advance for your time, Kacper

I have a scenario in which we have user definable columns for a grid, including hundreds if not thousands that need to be ported from the old version of our product. This means these column keys would be strings that may contain spaces or even special characters - and as such cannot be a valid C# property name (which means using an ExpandoObject approach will not work)

It would be really beneficial if the TelerikGrid component could be given Data of an IEnumerable<Dictionary<string, object>> where the Field property of GridColumn (or a new property) would line up with a key in that dictionary rather than a field name for the component to then use reflection with.

A customer with multiple modules of our product installed may very well have columns with similar names, i.e "Some Key", "SomeKey", "Some_Key", "Some & Key" - so simply replacing spaces or special characters may not always still give unique keys.

We are using Telerik UI for Blazor (V6.2.0) grid. The first 3 columns (Delivery No, Spot Check, Spotcheck Status) of the grid are frozen/locked. While horizontal scrolling the header text gets overlapped. We have used custom CSS to change the header color.

<TelerikGrid @ref="@GridRef" Data="@dashboardData"
             Reorderable="true"
             SortMode="@SortMode.Single"
             Pageable="true"
             FilterMode="GridFilterMode.FilterRow"
             PageSize="10"
             EnableLoaderContainer="true"
             Sortable="true" Context="inboundContext" OnRowRender="@OnRowRenderHandler" Width="1800px" Height="500px">

Creating a new WebApp project template through the extension fails to build. This is caused by incorrect icon type in the MainLayout.razor file.

To make sure the app is correctly built, the Icon type should be FontIcon.

<TelerikButton Icon="@FontIcon.Menu"
               FillMode="@ThemeConstants.Button.FillMode.Clear"
               OnClick="@( () => DrawerExpanded = !DrawerExpanded )" />

It appears there are some issues with encoding special characters in the DataSourceExtensions.ToODataString extension method.

See snippet below. 

var ds = new DataSourceRequest()
{
	Filters = [new FilterDescriptor("FieldName", FilterOperator.IsEqualTo, "Route #")],
	Sorts = []
};
{

Console.WriteLine(ds.ToODataString());

After reading your documentation, it appears that the Pager Position enum only allows for the grid pager to be at the top OR the bottom of the grid.

It would be most excellent to allow it to be BOTH. For very large grids, it would be convenient for the user to see the grid at the very top, but if they do happen to need to scroll to the very bottom of the grid, seeing the pager component there would also be convenient for the user.

This is in regard to this page:
https://www.telerik.com/blazor-ui/documentation/components/grid/paging

Please add a .Both option to the PagerPosition enum that allows both Top and Bottom at the same time.

Thanks! :)

=== EDITED BY TELERIK ===

When using nullable enums, their DisplayNameAttrute doesn't show in the Grid.

https://blazorrepl.telerik.com/QTOlwiaM456Yh9Xp33

The bug is related to Enum DisplayName attributes are ignored in view mode of the Grid

=== ORIGINAL POST CONTENT ===

Sample Code to reproduce the error: 

https://blazorrepl.telerik.com/QzYPGLFj11s0rZwp47

If you change line 44 to a non-nullable field type, it crashes the grid with an error message in the CSS file.  I have included the error message I get in my blazor app with the same code above, console then sources:

Within the grids, be able to filter and group using And & Or statements.  The following is our design.

I recently had a breakthrough moment in my journey learning and using Telerik Blazor that I believe highlights a crucial area for improvement in your documentation strategy. I believe that this will significantly help me learn and use your components,  I suspect others may still fall into the same trap as me.  I'm confident that implementing this suggestion will make the learning process considerably easier for all users.

As a developer with over 35 years of experience, my initial approach to learning new technologies is to rely heavily on official documentation. I expect to find comprehensive resources that facilitate a smooth learning curve. However, after years of struggling with Telerik Blazor components, I stumbled upon the Component Demos section (https://demos.telerik.com/blazor-ui). This discovery, triggered by a specific Google search for "telerik blazor drawer submenu," is a game-changer.

The Component Demos contain a wealth of practical examples for each component, offering invaluable "cut-and-paste" starting points. Before this, I primarily relied on StackOverflow and other online resources and until today, I finally landed on the Telerik Blazor Component demos. The fact that I have been unaware of this resource for so long represents a significant shortcoming in the current documentation.  How easy it would be to add a link in the overview to the component's demos which would have saved me countless hours of trying to solve problems that have already been solved on the demos page, like the Drawer submenu mentioned above.

   Integrating direct links to each component's respective demo page within the main documentation would dramatically improve the discover-ability of these demos and empower users to independently solve many common challenges. Currently, the limited examples within the documentation are insufficient for comprehensive understanding.

In summary, prominently featuring the Component Demos within the core Telerik Blazor documentation would vastly enhance the learning experience, reduce support requests, and empower developers to utilize the full potential of your components.

Peter