The PDF Viewer uses adopted stylesheets, but removes third-party ones in the process.
This occurs since Telerik UI for Blazor version 7.0.0.
The workaround is to duplicate the third-party adoptedStylesheet as a regular CSS file.
When ActiveTabId is null, the TabStrip selects the first tab automatically, but does not render its content.
<TelerikTabStrip @bind-ActiveTabId="@TabStripActiveTabId">
<TabStripTab Title="First" Id="t1">
First tab content.
</TabStripTab>
<TabStripTab Title="Second" Id="t2">
Second tab content.
</TabStripTab>
<TabStripTab Title="Third" Id="t3">
Third tab content.
</TabStripTab>
</TelerikTabStrip>
@code {
private string? TabStripActiveTabId { get; set; }
}
When the ComboBox is bound with the OnRead event, after filtering and pressing the Tab key the highlighted item that matches the user input is not selected. If the ComboBox is bound through the Data parameter, the highlighted item is selected as expected.
The ComboBox is blurred and the BMW item is not selected.
The ComboBox is blurred and the BMW item is selected.
All
No response
The byte array returned by the GetFileAsync method is different when the file is opened through the PDFViewer's toolbar, and when the file is loaded initially using the Data parameter of the PDFViewer.
@using System.IO
@inject IJSRuntime JSRuntimeInstance
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager
<PageTitle>Home</PageTitle>
<p>
<TelerikButton OnClick="@OnDownloadExportedFileClick">Get file with GetFileAsync and download</TelerikButton>
</p>
<strong>@TestResult</strong>
<br />
<br />
<TelerikPdfViewer @ref="@PdfViewerRef"
Data="@PdfViewerData"
AnnotationMode="@PdfViewerAnnotationMode.EnableForms"
Height="400px">
</TelerikPdfViewer>
@code {
#nullable enable
private TelerikPdfViewer? PdfViewerRef { get; set; }
private byte[]? PdfViewerData { get; set; }
private string TestResult { get; set; } = string.Empty;
public async Task OnDownloadExportedFileClick()
{
var result = await PdfViewerRef.GetFileAsync();
TestResult = $"First PDF Viewer GetFileAsync() returned {result} at {DateTime.Now.ToString("HH:mm:ss")}";
var base64String = Convert.ToBase64String(result);
var dataUrl = ToDataUrl("application/pdf", base64String);
_ = SaveFileAsDataUrlAsync("export.pdf", dataUrl);
}
private protected ValueTask SaveFileAsDataUrlAsync(string fileName, string dataUrl)
{
return InvokeVoidAsync("saveFile", fileName, dataUrl);
}
protected virtual ValueTask InvokeVoidAsync(string methodName, params object[] args)
{
try
{
return JSRuntimeInstance.InvokeVoidAsync($"TelerikBlazor.{methodName}", args);
}
catch (Exception)
{
return default;
}
}
private protected string ToDataUrl(string mimeType, string base64String)
{
return $"data:{mimeType};base64,{base64String}";
}
protected override async Task OnInitializedAsync()
{
PdfViewerData = System.IO.File.ReadAllBytes(@"pdf-viewer-form-filling-original.pdf");
await Task.Delay(1);
}
}
pdf-viewer-form-filling-original.pdf
The breakpoint in OnDownloadExportedFileClick is hit. Observe the difference in the byte array returned by the GetFileAsync method and saved in the "result" variable:
The byte array should be identical, regardless of the method of opening the file in the PDFViewer.
All
No response
The issue occurs only if the Signature is initially rendered in a container with display: none style. If I use visibility: hidden, I don't see a problem.
Real use case in which this is a problem: an accordion where the second pane is not opened.
Reproduction code: https://blazorrepl.telerik.com/QfYeuZPv28LlBmBx56.
Steps to reproduce:
Hello,
at version 12.3.0 TelerikFilter is crashing "at load". Prior this version, same markup = ok.
Error: System.InvalidOperationException: Object of type 'Telerik.Blazor.Components.TelerikFilter' does not have a property matching the name 'ValueChanged'.
also in demo:
https://www.telerik.com/blazor-ui/documentation/components/filter/integration
usage:
<TelerikFilter @bind-Value="@AdvancedFilterValue">
<FilterFields>
@foreach (var it in GridDef.ColStore.Where(x => x.Verejny == true))
{
<FilterField Name="@it.FldName" Type="@it.FldType" Label="@it.VerejnyNazev"></FilterField>
}
</FilterFields>
</TelerikFilter>The TelerikPanelBar component is using Right and Left arrows on keyboard to opening and closing each tab.
https://demos.telerik.com/blazor-ui/panelbar/keyboard-navigation
When the page is zoomed to 200%, it gets a horizontal scrollbar, which is normally controlled with the left and right arrow keys on keyboard. However, these keys are assigned to opening and closing the TelerikPanelBar component, which makes it impossible to scroll the page horizontally while we have Tab on TelerikPanelBar. Is there any workaround that would allow horizontal scrolling with the left and right arrow keys on keyboard at this zoom level? Maybe it’s possible to change TelerikPanelBar behavior and opening and closing it by different keys?
The data order displayed in the PivotGrid does not follow the field order shown in the Rows configuration. Similar issue: #12989
Run the example posted below:
From the Fields list, check ContractNumber. It is added to the Columns section by default.
Drag ContractNumber from Columns to the Rows section.
Verify in the PivotGrid settings that the Rows area now shows:
View the data the table.
@using Telerik.Blazor.Components.PivotGrid
<TelerikButton OnClick="@OnRefresh">Refresh</TelerikButton>
<TelerikLoaderContainer Visible="@_isLoading" Text="Please wait..." />
<div class="pivot-main-container">
<TelerikPivotGridContainer>
<TelerikPivotGridConfiguratorButton></TelerikPivotGridConfiguratorButton>
<TelerikPivotGridConfigurator></TelerikPivotGridConfigurator>
<div class="pivot-grid-container">
<TelerikPivotGrid Data="@PivotData" DataProviderType="@PivotGridDataProviderType.Local"
@ref="_PivotGridRef" ColumnHeadersWidth="100px" RowHeadersWidth="130px">
<ColumnHeaderTemplate>
@{
var ctx = (PivotGridColumnHeaderTemplateContext)context;
int underscoreIndex = ctx.Text.IndexOf("-");
string text = ctx.Text;
if (underscoreIndex > 0)
{
text = text.Replace(text.Substring(0, underscoreIndex + 1), "");
<span>@text</span>
}
else
{
<span>@ctx.Text</span>
}
}
</ColumnHeaderTemplate>
<RowHeaderTemplate>
@{
var ctx = (PivotGridRowHeaderTemplateContext)context;
int underscoreIndex = ctx.Text.IndexOf("-");
if (underscoreIndex == 1)
{
string text = ctx.Text;
text = text.Replace(text.Substring(0, underscoreIndex + 1), "");
<span>@text</span>
}
else
{
<span>@ctx.Text</span>
}
}
</RowHeaderTemplate>
<DataCellTemplate Context="dataCellContext">
@{
var c = (PivotGridDataCellTemplateContext)dataCellContext;
string amt;
if (c.Value is AggregateException || c.Value?.GetType().Name == "AggregateError")
{
amt = "-";
}
else if (c.Value == null)
{
amt = (0m).ToString("C2");
}
else if (c.Value is IConvertible)
{
// Safe convert for numbers
amt = Convert.ToDecimal(c.Value).ToString("C2");
}
else
{
amt = c.Value?.ToString() ?? string.Empty;
}
}
<div style="text-align: right;">
@amt
</div>
</DataCellTemplate>
<PivotGridRows>
<PivotGridRow Name="@nameof(RptContractSalesSummaryModel.Station)" Title="Station" />
</PivotGridRows>
<PivotGridColumns>
<PivotGridColumn Name="@nameof(RptContractSalesSummaryModel.Year)" Title="Year" HeaderClass="year-header" />
<PivotGridColumn Name="@nameof(RptContractSalesSummaryModel.Month)" Title="Month" />
</PivotGridColumns>
<PivotGridMeasures>
<PivotGridMeasure Name="@nameof(RptContractSalesSummaryModel.Rate)" Title="Total"
Aggregate="@PivotGridAggregateType.Sum" />
</PivotGridMeasures>
</TelerikPivotGrid>
</div>
</TelerikPivotGridContainer>
</div>
@code
{
private List<RptContractSalesSummaryModel> PivotData { get; set; } = [];
public TelerikNotification NotificationReference { get; set; } = default!;
public TelerikPivotGrid<RptContractSalesSummaryModel> _PivotGridRef { get; set; } = default!;
private CancellationTokenSource cancelToken = new CancellationTokenSource();
private bool _isDisposed { get; set; } = default!;
private bool _isLoading { get; set; } = default!;
protected override async Task OnInitializedAsync()
{
await LoadReportData(cancelToken.Token);
await base.OnInitializedAsync();
}
private async Task LoadReportData(CancellationToken token)
{
_isLoading = true;
await Task.Delay(1000);
var dataItemCount = 10000;
var stationCount = 30;
var rnd = Random.Shared;
for (int i = 1; i <= dataItemCount; i++)
{
var stationNumber = rnd.Next(1, stationCount);
if (token.IsCancellationRequested || _isDisposed) { return; }
;
PivotData.Add(new RptContractSalesSummaryModel()
{
Station = $"Station {stationNumber}",
ContractMonth = DateTime.Today.AddMonths(-rnd.Next(0, 13)),
Rate = rnd.Next(123, 987) * 1.23m,
ContractNumber = i,
InternetOrderID = i * 10
});
}
PivotData = PivotData
.OrderBy(x => x.Station)
.ThenBy(x => x.Year)
.ThenBy(x => x.Month).ToList();
if (_PivotGridRef != null && !_isDisposed)
{
_PivotGridRef?.Rebind();
}
_isLoading = false;
}
public async Task OnRefresh()
{
await LoadReportData(cancelToken.Token);
await Task.CompletedTask;
}
public async ValueTask DisposeAsync()
{
PivotData = [];
await Task.CompletedTask;
}
public class RptContractSalesSummaryModel
{
public DateTime ContractMonth { get; set; }
public int Year => ContractMonth.Year;
public string Month => $"{MapMonthToLetter(ContractMonth.Month)}-{ContractMonth:MMMM}";
public string Station { get; set; } = string.Empty;
public string? SalesPerson { get; set; }
public string? AdvertiserName { get; set; }
public string? AgencyName { get; set; }
public string? Product_Description { get; set; }
public string? Brand { get; set; }
public string AccountType1 { get; set; } = string.Empty;
public string AccountType2 { get; set; } = string.Empty;
public decimal? Rate { get; set; }
//public int? RptUserKey { get; set; }
public string? Demographics { get; set; }
public string? OrderType { get; set; }
public string? SalesOffice { get; set; }
public int? ContractNumber { get; set; }
public string? SectionLevel { get; set; }
public string? AgencyGroup { get; set; }
public string? AdvertiserGroup { get; set; }
public string? ProductGroup { get; set; }
public string? LineNumber { get; set; }
public string? RevenueClassDescription { get; set; }
public string? InternetIntegrationType { get; set; }
public string? LineType { get; set; }
public string? RateType { get; set; }
public string? InternetAdType { get; set; }
public string? InternetSubAdType { get; set; }
public DateTime? LineStartDate { get; set; }
public DateTime? LineEndDate { get; set; }
public long? InternetOrderID { get; set; }
public DateTime? InitialDelivery { get; set; }
public string? QuantityType { get; set; }
public long? QuantityOrdered { get; set; }
public long? ImpressionsDelivered { get; set; }
public long? ClicksDelivered { get; set; }
public long? Goal { get; set; }
public string? Limit { get; set; }
public string? BillingType { get; set; }
public decimal? DeliveredRevenue { get; set; }
public string? PerformanceStatus { get; set; }
public DateTime? LastSuccessfulJobRun { get; set; }
public string? InternetEnvironment { get; set; }
public string? UserField1 { get; set; }
public string? ExternalID { get; set; }
// to sort the months correctly in the pivot grid
private static string MapMonthToLetter(int month)
{
return month switch
{
1 => "A",
2 => "B",
3 => "C",
4 => "D",
5 => "E",
6 => "F",
7 => "G",
8 => "H",
9 => "I",
10 => "J",
11 => "K",
12 => "L",
_ => "?"
};
}
}
}
The data order displayed in the PivotGrid does not follow the field order shown in the Rows configuration.
The rendered PivotGrid data should strictly follow the order of fields as defined in the Rows (or Columns) area settings.
All
No response
When there is no predefined Diagram layout, and a shape parameter value changes at runtime:
Possible workarounds:
To reproduce:
<label class="lbl">
Width: <TelerikNumericTextBox @bind-Value="@SelectedShapeWidth" Width="120px" />
</label>
<label class="lbl">
Height: <TelerikNumericTextBox @bind-Value="@SelectedShapeHeight" Width="120px" />
</label>
<label class="lbl">
X: <TelerikNumericTextBox @bind-Value="@SelectedShapeX" Width="120px" />
</label>
<label class="lbl">
Y: <TelerikNumericTextBox @bind-Value="@SelectedShapeY" Width="120px" />
</label>
<label class="lbl">
Angle: <TelerikNumericTextBox @bind-Value="@SelectedShapeAngle" Width="120px" />
</label>
<style>
.lbl {
display: block;
margin: 0 0 1em;
}
</style>
<TelerikButton OnClick="@OnButtonClick">Apply</TelerikButton>
@if (RenderDiagram)
{
<TelerikDiagram Height="300px" Zoom="0.8">
<DiagramShapes>
<DiagramShape
Id="shape1"
Width="100"
Height="100"
X="200"
Y="50">
<DiagramShapeContent Text="Shape 1" />
<DiagramShapeRotation Angle="0" />
</DiagramShape>
<DiagramShape
Id="@SelectedShapeId"
Width="@SelectedShapeWidth"
Height="@SelectedShapeHeight"
X="@SelectedShapeX"
Y="@SelectedShapeY">
<DiagramShapeContent Text="Shape 2" />
<DiagramShapeRotation Angle="@SelectedShapeAngle" />
</DiagramShape>
</DiagramShapes>
</TelerikDiagram>
<TelerikDiagram Height="300px" Zoom="0.8">
<DiagramShapes>
<DiagramShape
Id="shape1"
Width="100"
Height="100"
X="200"
Y="50">
<DiagramShapeContent Text="Shape 1" />
<DiagramShapeRotation Angle="0" />
</DiagramShape>
<DiagramShape
Id="@SelectedShapeId"
Width="@SelectedShapeWidth"
Height="@SelectedShapeHeight"
X="@SelectedShapeX"
Y="@SelectedShapeY">
<DiagramShapeContent Text="Shape 2" />
<DiagramShapeRotation Angle="@SelectedShapeAngle" />
</DiagramShape>
</DiagramShapes>
<DiagramConnections>
<DiagramConnection FromId="shape1" ToId="shape2" />
</DiagramConnections>
</TelerikDiagram>
}
@code {
#nullable enable
private List<ShapeDescriptor> DiagramShapeList { get; set; } = new();
private string SelectedShapeId { get; set; } = "shape2";
private double? SelectedShapeAngle { get; set; } = 0;
private double? SelectedShapeWidth { get; set; } = 100;
private double? SelectedShapeHeight { get; set; } = 100;
private double? SelectedShapeX { get; set; } = 300;
private double? SelectedShapeY { get; set; } = 200;
private bool RenderDiagram { get; set; } = true;
private async Task OnButtonClick()
{
if (string.IsNullOrEmpty(SelectedShapeId))
{
return;
}
RenderDiagram = false;
await Task.Delay(1);
RenderDiagram = true;
}
public class ShapeDescriptor
{
public string Id { get; set; } = string.Empty;
public string ParentId { get; set; } = string.Empty;
public DiagramShapeType Type { get; set; } = DiagramShapeType.Image;
public string Text { get; set; } = string.Empty;
public string Source { get; set; } = string.Empty;
public double? Width { get; set; } = 100;
public double? Height { get; set; } = 100;
public double? X { get; set; }
public double? Y { get; set; }
public double? Angle { get; set; }
}
}
Product & Version:
Telerik UI for Blazor v12
.NET 8
Description:
In the Telerik Blazor PivotGrid, when fields are added dynamically (via UI interaction), the fields are placed in the PivotGrid based on the order in which they are defined in the Fields collection, rather than the order in which the user selects or adds them.
This results in an unexpected field arrangement from a user experience perspective, as users expect the PivotGrid to reflect the sequence in which they add fields (especially when adding multiple fields one by one).
Expected Behavior:
Fields should be added to the PivotGrid in the same order as the user clicks/selects them.
Actual Behavior:
Fields are added according to their original order in the PivotGridFields configuration, ignoring the user’s selection order.
Impact:
This causes confusion for end users and limits flexibility in interactive PivotGrid scenarios where field order matters.
Request:
Please confirm if this behavior is expected. If so, is there any supported way to control or override the field insertion order based on user interaction?
<TelerikButton OnClick="@OnRefresh">Refresh</TelerikButton>
<TelerikLoaderContainer Visible="@IsLoading" Text="Please wait..." />
<TelerikPivotGridContainer>
<TelerikPivotGridConfiguratorButton></TelerikPivotGridConfiguratorButton>
<TelerikPivotGridConfigurator></TelerikPivotGridConfigurator>
<TelerikPivotGrid @ref="PivotGridRef"
Data="@PivotData"
DataProviderType="@PivotGridDataProviderType.Local"
ColumnHeadersWidth="100px"
RowHeadersWidth="130px"
Height="70vh">
<PivotGridRows>
<PivotGridRow Name="@nameof(RptContractSalesSummaryModel.Station)" />
</PivotGridRows>
<PivotGridColumns>
<PivotGridColumn Name="@nameof(RptContractSalesSummaryModel.Year)" />
</PivotGridColumns>
<PivotGridMeasures>
<PivotGridMeasure Name="@nameof(RptContractSalesSummaryModel.Rate)" Title="Total"
Aggregate="@PivotGridAggregateType.Sum" />
</PivotGridMeasures>
</TelerikPivotGrid>
</TelerikPivotGridContainer>
@code
{
private List<RptContractSalesSummaryModel> PivotData { get; set; } = [];
public TelerikPivotGrid<RptContractSalesSummaryModel> PivotGridRef { get; set; } = default!;
private CancellationTokenSource cancelToken = new CancellationTokenSource();
private bool IsLoading { get; set; }
protected override async Task OnInitializedAsync()
{
await LoadReportData(cancelToken.Token);
await base.OnInitializedAsync();
}
private async Task LoadReportData(CancellationToken token)
{
IsLoading = true;
await Task.Delay(500);
var dataItemCount = 10000;
var stationCount = 30;
var rnd = Random.Shared;
for (int i = 1; i <= dataItemCount; i++)
{
var stationNumber = rnd.Next(1, stationCount);
if (token.IsCancellationRequested) { return; };
PivotData.Add(new RptContractSalesSummaryModel()
{
Station = $"Station {stationNumber}",
ContractMonth = DateTime.Today.AddMonths(-rnd.Next(0, 13)),
Rate = rnd.Next(123, 987) * 1.23m,
Column1 = $"Column1 {rnd.Next(1, 4)}",
Column2 = $"Column2 {rnd.Next(1, 4)}"
});
}
PivotData = PivotData
.OrderBy(x => x.Station)
.ThenBy(x => x.Year)
.ThenBy(x => x.Month).ToList();
PivotGridRef?.Rebind();
IsLoading = false;
}
public async Task OnRefresh()
{
await LoadReportData(cancelToken.Token);
await Task.CompletedTask;
}
public async ValueTask DisposeAsync()
{
PivotData = [];
await Task.CompletedTask;
}
public class RptContractSalesSummaryModel
{
public DateTime ContractMonth { get; set; }
public string Station { get; set; } = string.Empty;
public int Year => ContractMonth.Year;
public string Month => $"{ContractMonth.Month}-{ContractMonth.ToString("MMMM")}";
public decimal? Rate { get; set; }
public string Column1 { get; set; } = string.Empty;
public int ColumnRate1 { get; set; }
public string Column2 { get; set; } = string.Empty;
public int ColumnRate2 { get; set; }
public string Column3 { get; set; } = string.Empty;
public int ColumnRate3 { get; set; }
public string Column4 { get; set; } = string.Empty;
public int ColumnRate4 { get; set; }
}
}
Normally when you drag an appointment from one grouping to another the grouping id is updated.
This does not occur when trying to drag a recurring appointment to another grouping.
In this case the time will update, but the grouping itself will stay the same.
This can be tested in the scheduler grouping demo (https://demos.telerik.com/blazor-ui/scheduler/grouping)
Steps to reproduce:
1. Create a recurring appointment for one room.
2. Drag one of the appointments to another room.
3. Select "Edit the series".
Result: the appointment is moved to the time it was dropped at, but it is still planned for the same room.
Column headers and column data do not match after reordering.
See this example: https://blazorrepl.telerik.com/GKkFcwlF54CvZoVp34
1. Reorder Group 1 and Group 2.
2. The column headers within these 2 groups are not reordered with their parent.
Reordering should work according to the rules specified in the documentation: https://www.telerik.com/blazor-ui/documentation/components/grid/columns/multi-column-headers#reordering
If the Signature Width or Height parameter values change at runtime, the drawing position no longer matches the cursor position. For example, if the Signature size increases, the drawing position will move down and right, and vice-versa.
A possible workaround is to recreate the component after changing the dimensions:
Signature Width: <TelerikNumericTextBox @bind-Value="@NumValue" Width="120px" />
<TelerikButton OnClick="@ResizeSignature">Resize Signature</TelerikButton>
<br /><br />
@if (ShowSignature)
{
<TelerikSignature @bind-Value="@SignatureValue"
Width="@( $"{SignWidth}px" )"
Height="@( $"{SignHeight}px" )"
Maximizable="false">
</TelerikSignature>
}
@code {
private string SignatureValue { get; set; }
private int NumValue { get; set; } = 300;
private int SignWidth { get; set; }
private int SignHeight { get; set; }
private bool ShowSignature { get; set; } = true;
async Task ResizeSignature()
{
ShowSignature = false;
SignWidth = SignHeight = NumValue;
await Task.Delay(1);
ShowSignature = true;
}
protected override void OnInitialized()
{
SignWidth = SignHeight = NumValue;
base.OnInitialized();
}
}
Testing this Select All Checkbox sample in Safari produces a different result compared to other browsers.
Click on the CheckBox in the MultiSelect Header Template closes the popup in Safari. In other browsers (e.g. Chrome, Firefox) the popup remains open after checking the SelectAll CheckBox.