Questions on UI for Blazor Forum

1 answer

25 views

Handling AggregateFunctionsGroup.Key Deserialization in Server Grouping

Hi Telerik Team,
Telerik is the best! Keep growing!

I'm using Telerik Blazor Grid with server-side grouping, and I’m manually group returned JSON structure with AggregateFunctionsGroup. I'm deserializing the result using a helper like this:

public static List<AggregateFunctionsGroup>? DeserializeGroups<TGroupItem>(this List<AggregateFunctionsGroup> groups)
{
    if (groups is null) return null;

    for (int i = 0; i < groups.Count; i++)
    {
        var group = groups[i];

        // Workaround for JsonElement -> string
        if (group.Key is JsonElement elem && elem.ValueKind == JsonValueKind.String)
        {
            group.Key = elem.GetString();
        }

        if (group.HasSubgroups)
        {
            var subGroups = group.Items
                .Cast<JsonElement>()
                .Select(x => x.Deserialize<AggregateFunctionsGroup>())
                .ToList();

            group.Items = DeserializeGroups<TGroupItem>(subGroups);
        }
        else
        {
            var items = group.Items
                .Cast<JsonElement>()
                .Select(x => x.Deserialize<TGroupItem>())
                .ToList();

            group.Items = items;
        }
    }

    return groups;
}

And just for some context:

public async Task ReadItems(GridReadEventArgs args)
{
    if (!ModelIsReady) return;
    if (_readItemsPending) return;
    if (string.IsNullOrWhiteSpace(PreparedQuery.Id)) return;
    _readItemsPending = true;

    try
    {
        var result = await ApiService.QueryDataSourceAsync<UniversalDSModel>(PreparedQuery.QueryId, args.Request, CancellationToken.None);
        if (result is null) return;

        if (args.Request.Groups.Count > 0)
        {
            args.Data = result?.GroupedData.DeserializeGroups<UniversalDSModel>();
        }
        else
        {
            args.Data = result?.CurrentPageData.Cast<object>().ToList();
        }

        if (result?.AggregateResults != null)
        {
            args.AggregateResults = result.AggregateResults;
        }

        if (result != null) { args.Total = result.TotalItemCount; }
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error loading data: {ex.Message}");
        ApiRequestFailed = true;
    }
    finally
    {
        _readItemsPending = false;
        LoaderContainerVisible = false;
    }
}

My main concern:
group.Key always arrives from the backend as a JsonElement, so we have to inspect the ValueKind manually to convert it (e.g. to string).
This feels fragile — what if the key is a bool, int, DateTime, or some complex object, is it converted to string no matter what - for grouping???
Without additional metadata, it's hard to confidently deserialize Key to its intended type.

My question:
Is this the expected approach for deserializing grouped data with AggregateFunctionsGroup?
Would you consider adding a KeyType or some metadata in the grouped result to help with type-safe deserialization?
Is there a recommended way to deserialize group.Key if the grouping field can vary in type (e.g., string, int, bool)?
Thanks in advance — just want to ensure I’m handling this correctly and not missing a simpler or more robust pattern.

Best regards,
Bohdan

Grid

answered on 04 Aug 2025

0 answers

15 views

While uploading [Note: Inporgress of uploading ] the file if i click remove next to file it remove from ui but it still present somewhere

so issue was when i uploading file that still in upload phase if i click the cancel button next upload progress bar the file is removes from ui but somewhere is still present

so i have used OnSelectHandler event to handle to duplicate uploading and some extra validation added in OnSelectHandler event but my issue is

when i am uploading file and immediately click [ Before upload process is done ] cancel then it remove from ui but somewhere is present after that remove click again try to add show my validation error that is duplicate message

Expected Result-

Clicking Cancel should stop the upload process entirely, and no file should be uploaded or stored.

Please Refer Below Attachment

Step 1 => Select file eg. dummy.pdf and select Note : AutoUpload is true and check below screenshot and i click cancel button

Step 2 => The file removed from UI see below screenshot

Step 3 => If i try to add again same file i.e dummy.pdf the my custom validation msg show that is file is already present see below screenshot

Below is My Code :

<TelerikUpload DropZoneId="dropzone-id" @ref="@UploadRef" Id="uploadFile"
SaveUrl="@UploadSaveUrlPath"
Class="@UploadClass"
OnSuccess="@OnUploadSuccess"
OnRemove="@OnUploadRemove"
OnError="@OnUploadError"
OnProgress="@OnUploadProgress"
Multiple="true"
OnSelect="@OnSelectHandler" >

</TelerikUpload>

private async void OnUploadSuccess(UploadSuccessEventArgs args)
{
if (args.Operation != UploadOperationType.Upload) return;

isUploadedSuccess = true;
uploadedInfoCache = await LoadUploadedFilesAsync();

foreach (var file in args.Files)
{
var match = uploadedInfoCache?.FirstOrDefault(f =>
f.FileName == file.Name &&
f.Size == file.Size);

if (match != null)
{
file.Id = match.FileId; // Set ID for later removal
}
}
}

private void OnUploadError(UploadErrorEventArgs e) => isUploadedSuccess = false;

private async Task OnSelectHandler(UploadSelectEventArgs e)
{
// Early exit if already full
if (selectedFiles.Count > MaxAttachmentFile)
return;

foreach (var file in e.Files.ToList())
{
// 1. Check max file size
if (file.Size > MaxFileSize * 1024 * 1024)
{
await DialogSvc.AlertAsync(Resources.Attachments,
string.Format(Resources.MaxAllowedFileSizeShould, MaxFileSize, Math.Ceiling((double)file.Size / 1024 / 1024)));

e.Files.Remove(file); // exclude large file
continue;
}

// 2. Check for duplicate name (uploaded or selected)
bool isDuplicate = Attachments.Any(a => a.FileName.Equals(file.Name, StringComparison.OrdinalIgnoreCase)) ||
selectedFiles.Any(a => a.Name.Equals(file.Name, StringComparison.OrdinalIgnoreCase));

if (isDuplicate)
{
await DialogSvc.AlertAsync(Resources.TitleDuplicateAttachment,
string.Format(Resources.DuplicateAttachmentMsg, file.Name));

e.Files.Remove(file); // exclude duplicate
}
}

// 3. File count check after all filtering
if (selectedFiles.Count + e.Files.Count > MaxAttachmentFile)
{
e.IsCancelled = true;
await DialogSvc.AlertAsync(Resources.MaxFileUploadedTitle, MaxFileErrorMsg);
return;
}

// 4. Add only valid files
selectedFiles.AddRange(e.Files);

// 5. Final file-level validations
isUploadedSuccess = e.Files.All(file =>
!file.InvalidExtension &&
!file.InvalidMinFileSize &&
!file.InvalidMaxFileSize);
}

private async void OnUploadRemove(UploadEventArgs args)
{
foreach (var file in args.Files)
{
selectedFiles.RemoveAll(f => f.Id == file.Id);

var match = uploadedInfoCache.FirstOrDefault(f => f.FileName == file.Name && f.Size == file.Size);
if (match == null) continue;

var content = new FormUrlEncodedContent(new[]
{
new KeyValuePair<string, string>("fileId", match.FileId)
});

await HttpClient.PostAsync(ToAbsoluteUrl(RemoveFileUrlPath), content);
}

if (!selectedFiles.Any())
{
UploadRef.ClearFiles();
await HttpClient.GetAsync(ToAbsoluteUrl(CleanFilesUrlPath));
}
}

DropZone

FileSelect

Upload

asked on 01 Aug 2025

1 answer

20 views

When using chunked upload the success response body is always empty

I am using the TelerikUpload component with UploadChunkSettings defined.
Telerik.UI.for.Blazor version 9.0.0

When not using a chunked upload I can return a response body a read it in the success handler, however when code was changed to use chunks the response body is always empty.

Is this a bug when using chunked upload, or do I need to return a different response in the Controller?

Code from the save method in Api Controller:

string chunkMetaData = formData["chunkMetaData"].ToString();

ChunkMetaData chunkData = JsonConvert.DeserializeObject<ChunkMetaData>(chunkMetaData);

// Append chunks to file
// ...


if (chunkData.TotalChunks - 1 == chunkData.ChunkIndex)
{
     uploadComplete = true;
     fs.Flush();
}

// More code omitted ...

if (uploadComplete)
{
	Response.StatusCode = StatusCodes.Status200OK;
	await Response.WriteAsync(result.ResultId.ToString());

	return new EmptyResult();
}
else
{
	Response.StatusCode = StatusCodes.Status201Created;
	await Response.WriteAsync("Chunk upload successful.");
	
	return new EmptyResult();
}

OnSuccess handler:

protected async Task SuccessHandler(UploadSuccessEventArgs args)
{
	int resultid = 0;

	if (int.TryParse(args.Request.ResponseText, out resultid))
	{
		//  do something with the resultid
		//  ...
		//  args.Request.ResponseText is always empty when using chunked upload
	}
}

Upload

answered on 01 Aug 2025

1 answer

15 views

DockManager resetting layout

Documentation says to reset the layout by calling: dockManager.SetState(null);

Doing this via code doesn't seem to do anything. I've tried all combinations of the commented out code below.

<TelerikDockManager Height="100vh" OnStateChanged="OnStateChanged" OnStateInit="OnStateInit" @ref="dockManager">
...

</TelerikDockManager>
<TelerikButton Icon="SvgIcon.ArrowRotateCcw" OnClick="ResetState">Reset page layout</TelerikButton>
@code{
    public TelerikDockManager dockManager { get; set; }

    public async Task ResetState()
    {
        dockManager.SetState(null);
        //dockManager.GetState();
        //dockManager.Refresh();
        //StateHasChanged();
        await InvokeAsync(() => StateHasChanged());
    }
}

DockManager

answered on 01 Aug 2025

1 answer

20 views

How can I show a Notification at startup when using InteractiveServer

I want to show an error if data load fails in OnInitializedAsync. I will save the message in a variable and show it in OnAfterRenderAsync or OnAfterRender.

The toast work when the page is fully loaded and I press the button
I am very open for suggestion on showing messages in another way

I have tried all the life cycle handler but in theory this should work.

public partial class TelerikTest
{
    [Inject] public IJSRuntime JsRuntime { get; set; }
    [Inject] public NavigationManager Navigation { get; set; }
    private TelerikNotification NotificationReference { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender && Navigation.Uri.StartsWith("https"))
        {
            StateHasChanged();
            ShowErrorNotification();
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && Navigation.Uri.StartsWith("https"))
        {
            await JsRuntime.InvokeVoidAsync("console.log", "Component rendered!");
            StateHasChanged();
        }
    }
    
    private void ShowErrorNotification()
    {
        NotificationReference.Show(new NotificationModel
        {
            Text = "An error has occurred!",
            ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
            Closable = true,
            CloseAfter = 20000
        });
    }
}

Notification

answered on 01 Aug 2025

1 answer

34 views

Memory Leaks in 9.1.1

We upgraded to 9.1.1 recently and was put into production in Azure. Immediately we started to have memory usage issues and a memory dump showed lots of event handler leaks possibly deep in the Telerik code. We reverted back to 8.1.1 and so far are not seeing any of these eventhandler leaks from Telerik. Just curious if this is a known issue or if others have experienced this.

Grid

answered on 31 Jul 2025

1 answer

27 views

Setting grid filter operator is lost if clear the filter value

Hi, i have a grid with row filter.

1. I change filter operator from the relative button

2. I edit the search field column

The grid show me the correct results.

Now if i clear the search field column, the filter operator automatically reset to the default value and not keep the settings i choose in step 1.

You can reply the issue with the first example in grid documentation: https://www.telerik.com/blazor-ui/documentation/components/grid/overview

The filter operator must keep my initial settings

It's a bug? how to solve?

Thanks

Grid

answered on 28 Jul 2025

1 answer

23 views

VS 2022 17.14.9 - NuGet Package Manager - Telerik source spinning "Loading"?

I just get a spinning wheel when I bring up NuGet Package Manager and have the source set to Telerik.

If I select other package sources they load and display quickly.

Any suggestions?

General Discussions

answered on 24 Jul 2025

1 answer

33 views

Custom Filter along with Default filter

I’m trying to build a custom filter for a column in the Telerik Grid. I’d like to have both the custom filter and the default filter available in the column's filter menu. I’ve managed to get the custom filter displaying and working correctly, but the default filter is not appearing in the filter menu for that column. I’ve attached the code — could you please help me figure out what’s missing or incorrect?

Many Thanks

<GridColumn Field="@nameof(StockVehicleRowDTO.PerformanceGrading)"
Title="Grade"
Lockable="true"
TextAlign="@ColumnTextAlign.Center"
Locked="true"
Width="120px"
Filterable="true">
<FilterMenuTemplate Context="context">
<div class="p-2">


<TelerikGridFilterMenu Context="context" />

<hr />


<div>
<strong>Quick Grade Filter:</strong>
@foreach (var grade in GradeFilterOptions)
{
<div>
<TelerikCheckBox
Value="@(IsGradeChecked(context.FilterDescriptor, grade))"
ValueChanged="@((bool value) => OnGradeFilterChanged(value, grade, context.FilterDescriptor))"
Id="@($"grade_{grade}")">
</TelerikCheckBox>
<label for="@($"grade_{grade}")">@grade</label>
</div>
}
</div>
</div>

</FilterMenuTemplate>
<Template>
@{
var vehicleRow = (context as DDD.Application.Vehicles.ViewModels.StockVehicleRowDTO);
var grade = vehicleRow?.PerformanceGrading;
}
<GradeChip Grade="@grade" />
</Template>
</GridColumn>

Backend code..

// Grade filter options for the filter menu (dynamic from data)
public List<string> GradeFilterOptions => StockPageVehicles?.ActiveVehicles
.Select(v => v.PerformanceGrading)
.Distinct()
.OrderBy(g => g)
.Select(g => g.ToString())
.ToList() ?? new List<string>();

// Helper to check if a grade is selected in the filter descriptor
public bool IsGradeChecked(CompositeFilterDescriptor filterDescriptor, string grade)
{
return filterDescriptor.FilterDescriptors.Any(f => (f as FilterDescriptor)?.Value?.ToString() == grade);
}

// Handler for checkbox changes in the Grade filter menu
public void OnGradeFilterChanged(bool value, string grade, CompositeFilterDescriptor filterDescriptor)
{
var filter = filterDescriptor.FilterDescriptors.FirstOrDefault(f => (f as FilterDescriptor)?.Value?.ToString() == grade);
filterDescriptor.LogicalOperator = FilterCompositionLogicalOperator.Or;
int gradeInt;
if (!int.TryParse(grade, out gradeInt)) return;
if (value && filter == null)
{
filterDescriptor.FilterDescriptors.Add(new FilterDescriptor(nameof(StockVehicleRowDTO.PerformanceGrading), FilterOperator.IsEqualTo, gradeInt));
}
else if (!value && filter != null)
{
filterDescriptor.FilterDescriptors.Remove(filter);
}
}

Grid

answered on 22 Jul 2025

1 answer

23 views

TelerikTimePicker is somehow validated when using inside TelerikCard

Hi,

I've some TelerikCard components that host different other components but when using lets say the TelerikTimePicker then as soon as you try to input a time via keyboard it gets a red border and seems to invalidate the input.

When using the TelerikTimePicker outside in a simple div then it seems to work.

Also when using the popup to set the time it works. Only keyboard input seems to trigger some sort of validation.
When losing focus the timepicker resets to 00:00:00.

Here's the code of the razor page to replicate the problem:

<TelerikCard Width="20rem">
    <CardHeader>
        <CardTitle>Time Selector</CardTitle>
    </CardHeader>
    <CardBody>
        Startzeitpunkt<br>
        <TelerikTimePicker @bind-Value="@SelectedStartTime" Format="HH:mm:ss" Width="6rem" />
        <br>
        Endzeitpunkt<br>
        <TelerikTimePicker @bind-Value="@SelectedEndTime" Format="HH:mm:ss" Width="6rem" />
        <br>
    </CardBody>
    <CardSeparator></CardSeparator>
    <CardFooter>
        footer
    </CardFooter>
</TelerikCard>

@code {
    protected DateTime SelectedStartTime { get; set; }
    protected DateTime SelectedEndTime { get; set; }
}

I use the latest telerik blazor components 9.1.0 and VS 2022 17.14.9.

Maybe someone has a hint what's wrong with it.

Regards,
Thomas

TimePicker

answered on 18 Jul 2025