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:
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
Hello,
there is inconsistency/behaviour/order in events of the Grid: OnStateInit and OnRead. Which leads to scenario with no clear sollution and would be nice to fix it, and how to solve it as "hotfix".
Also i think its not new in 12.x. release, it exists longer ;)
<TelerikGrid TItem="GData" @ref="gHL" OnRead=@GReadItems OnStateInit="@OnStateGHL">
...
<GridAggregates>
@if(1==2){...}
</GridAggregates>
@code{
protected async Task GReadItems(GridReadEventArgs args)
{
**hack for C)
if(gHL==null)return;//state init AVOID 2x call gread PRIOR OnStateInit
...// must be called:
args.AggregateResults = rr.ToDataSourceResult(args.Request).AggregateResults;
...
}
void OnStateGHL(GridStateEventArgs<GData> args) //or async Task doesnt matter
{
//default SORTing:args.GridState = new GridState<GData>
{
SortDescriptors = new List<Telerik.DataSource.SortDescriptor>
{
new Telerik.DataSource.SortDescriptor{ Member = nameof(GData.DatPorizeni), SortDirection = Telerik.DataSource.ListSortDirection.Descending },
//new Telerik.DataSource.SortDescriptor{ Member = nameof(GData.Skupina), SortDirection = Telerik.DataSource.ListSortDirection.Ascending }
}
};
}
}
Problematic scenarios, single page, same grid:
A) when NO aggregates markup EXISTS at all
1. OnStateInit
2. OnRead - gHL IS NULL
=OK
B) when EMPTY aggregates markup EXISTS
1. OnRead
2. OnStateInit
=FAIL
HOW to read and ui data with correct STATE?
https://www.telerik.com/blazor-ui/documentation/components/grid/state
cannot call gHL.rebind, also gHL is null
NONE initinal "sorting,filtering etc" is set, WRONG data,columns,displayed to the user
C) when SOME real aggregates markup EXISTS
1. OnRead
2. OnStateInit
3. OnRead
=partial FAIL("**hack used"), but managed by if(gHL==null)return
D) "hotfix" used with GridAggregates="@( HasAggregates ? GridAggregatesTemplate : null )"
act as A or C, but gHL is always null, which is also bad againts C)
Expected:
ALWAYS only A) - First 1.OnStateInit THEN 2.OnRead. its the best one, without any additional hacks = UNIFY the event orders and behaviour.
OR
A) or C)
everything else is unmanagable.
Especially when initial sorting "is must" and aggregates,columns and so on, are managed by user(non static)
B) is completly WRONG: incorrect event order of OnStateInit and OnRead
D) is againts C) (cannot detect reference of gHL)
related to:
https://feedback.telerik.com/blazor/1654029-onstateinit-does-not-fire-if-gridaggregates-exists-but-is-empty
https://www.telerik.com/forums/grid-onstateinit-event-and-onread-event-chaos
OR how to solve it generally = what is the way to LOAD gridState, and after that, LOAD Data by defined GridState?
Thanks
When the TileLayout keyboard navigation is enabled, users can tab from one tile to another. However, the tab order becomes incorrect after tile reordering. The tab order always matches the DOM element order, but it no longer matches the visual tile order in the UI.
For example:
<TelerikTileLayout Columns="3"
RowHeight="150px"
Resizable="true"
Reorderable="true"
Navigable="true">
<TileLayoutItems>
<TileLayoutItem HeaderText="Tile 1">
<Content>Regular-sized first tile.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 2">
<Content>You can put components in the tiles too.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 3" RowSpan="3">
<Content>This tile is three rows tall.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 4" RowSpan="2" ColSpan="2">
<Content>This tile is two rows tall and two columns wide</Content>
</TileLayoutItem>
</TileLayoutItems>
</TelerikTileLayout>
'SLOPE' and 'LINEST' Formulas do not work ?
When going fast over the Grid rows with the mouse cursor, the rows are highlighted after a delay. The delay is more noticeable on higher resolutions (2560x1440 or higher).
In the app that targets .NET10 the row hover styles are applied with a delay, whereas in the app that targets .NET8 the hover styles are applied as soon as the mouse enters the boundaries of a row.
Similar performance in applying hover-related styles.
All
No response