Telerik Forums
UI for Blazor Forum
1 answer
4 views
I use "Telerik.UI.for.Blazor 9.1.0" for build Blazor application. And I need to create "Collapse panel" can you sugget me solution using "Telerik.UI.for.Blazor 9.1.0" components. I have researched all available components of the "Telerik.UI.for.Blazor 9.1.0" in source code and documentations (manual) as result I cannot find any mention about "ExpansionPanel" or "Collapse panel" or "Accordion" or other similar panels or components which allow open or Collapse content.

I need to use  "Collapse panel" which will be default close and user could open it. Content of my "Collapse panel" is going to be form inputs or other elements. When user opens "Collapse panel" first time I need to make request for load a lot of data  for my form (inputs, dropdown lists, etc.) in this way I need to show loader/spinner during i try to load and compute my form data.

Key point of the "Accordion Collapse panel" :
1) User can open and close "Accordion Collapse panel";
2) User can set default state of the "Accordion Collapse panel"  - open or close;
3) "Accordion Collapse panel"  has events for open "Accordion Collapse panel"  and close "Accordion Collapse panel"  and other events;
4) For long calculation and computing my "Accordion Collapse panel"  has ability to show loader/spinner;
5) "Accordion Collapse Panel" has some expanded mode which  can allow user only one Accordion Panel item to be expanded at a time or any Accordion Panels can expanded at the same time;

Could you help me with this solution  of the "Collapse panel" ?

Alexey
Top achievements
Rank 1
Iron
 answered on 10 Aug 2025
0 answers
4 views

When a user makes a selection in a dropdown in the first row of a Blazor Grid I want to be able to hide the same column in all the remaining rows to prevent them from making selections in those dropdowns. Is this possible?

 

George
Top achievements
Rank 1
 asked on 07 Aug 2025
1 answer
10 views

If I want to restrict the number of selected rows to just three, can I do this with a configuration or a property?  I am looking at the following demo.  Thanks!

https://demos.telerik.com/blazor-ui/grid/row-selection

Hristian Stefanov
Telerik team
 answered on 07 Aug 2025
1 answer
12 views

hi,

 

C:\SQ_AzureDevOps\BlazorApp1\BlazorApp1>dotnet nuget remove source telerik.com
La source de package nommée telerik.com a été correctement supprimée.

C:\SQ_AzureDevOps\BlazorApp1\BlazorApp1>dotnet nuget add source "https://nuget.telerik.com/v3/index.json" --name telerik.com --username "...@..." --password "....." --store-password-in-clear-text
La source de package nommée telerik.com a été correctement ajoutée.

C:\SQ_AzureDevOps\BlazorApp1\BlazorApp1>dotnet add package Telerik.UI.for.Blazor

Générer a réussi dans 0,7s
info : La validation de la chaîne de certificats X.509 utilisera le magasin de confiance par défaut sélectionné par .NET pour le code de signature.
info : La validation de la chaîne de certificats X.509 utilisera le magasin de confiance par défaut sélectionné par .NET pour le timestamp.
info : Ajout de PackageReference pour le package 'Telerik.UI.for.Blazor' dans le projet 'C:\SQ_AzureDevOps\BlazorApp1\BlazorApp1\BlazorApp1.csproj'.
error: Impossible de charger l'index de service pour la source https://nuget.telerik.com/v3/index.json.
error:   Response status code does not indicate success: 401 (Unauthorized).

So, its a Trial account nothing wrog with th API-KEY being visible here, but I dont fink I do something wrong, do I?

Dimo
Telerik team
 answered on 07 Aug 2025
1 answer
18 views

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

Extra security checks (anti-virus etc.) are triggered in the Controller and depending on what caused an issue, I would like to change the default "File failed to upload" error message. Ideally this message would be set in the OnError handler, or maybe a ChildTemplate exists I am not aware of?

 This post talks about changing the message through localization, but that does not allow me to change it at runtime:

Dimo
Telerik team
 answered on 04 Aug 2025
1 answer
16 views
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
Dimo
Telerik team
 answered on 04 Aug 2025
0 answers
12 views

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));
     }
 }

Vaibhav
Top achievements
Rank 1
Iron
Iron
 asked on 01 Aug 2025
1 answer
10 views

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
	}
}



Dimo
Telerik team
 answered on 01 Aug 2025
1 answer
11 views

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());
    }
}

Tsvetomir
Telerik team
 answered on 01 Aug 2025
1 answer
15 views
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
        });
    }
}



Dimo
Telerik team
 answered on 01 Aug 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?