We are using the blazor chat component with Microsoft.Extensions.AI and IChatClient. Currently during a long response stream the chat repeatedly scrolls to the bottom automatically as the response updates. When I use use my mouse wheel to scroll to the top it immediately auto scrolls me back to the bottom.
A user needs to be able scroll to the top as the response is streaming in. If the user manually scrolls the auto scrolling should stop. Any subsequent messages sent in the same chat session should resume auto scroll. This is the behavior seen in most AI chat interfaces like chatGPT and is what most users expect.
For more info and a video refer to support ticket: 1712888
Thanks, Justin.
OnChange and OnBlur event for editors (TelerikTextBox, NumericTextBox, and others) is not fired in InCell edit mode with Tab key.
I am using the InsertHTML command to insert some HTML content. However, it looks like it inserts only the first element from the value I am providing.
==========
ADMIN EDIT
==========
Workaround: you can wrap the HTML content you want to insert in a container, so the InsertHTML command reads it as one element. The following sample demonstrates how to achieve that.
@using Telerik.Blazor.Components.Editor
<TelerikButton OnClick="@( () => WindowIsVisible = !WindowIsVisible )">Insert Html</TelerikButton>
<TelerikEditor @ref="@TheEditor" @bind-Value="@TheContent"></TelerikEditor>
<TelerikWindow @bind-Visible="@WindowIsVisible">
<WindowTitle>
<strong>Insert Html</strong>
</WindowTitle>
<WindowContent>
<TelerikTextArea @bind-Value="@HtmlToInsert"></TelerikTextArea>
<TelerikButton OnClick="@InsertHtml">Insert</TelerikButton>
</WindowContent>
</TelerikWindow>
@code{
public string HtmlToInsert { get; set; }
bool WindowIsVisible { get; set; }
TelerikEditor TheEditor { get; set; }
string TheContent { get; set; } = "<p>Lorem ipsum.</p><p>Dolor sit amet.</p>";
async Task InsertHtml()
{
await TheEditor.ExecuteAsync(new HtmlCommandArgs("insertHtml", $"<div>{HtmlToInsert}</div>"));
WindowIsVisible = !WindowIsVisible;
HtmlToInsert = "";
}
}
The NumericTextBox does not render the new Value that is set in ValueChanged if this new value is different than the event argument. Instead, the component clears the textbox, even though the component Value parameter is correct.
https://blazorrepl.telerik.com/wzaAHYas221go9xd48
The problem occurs only if there is an existing value and the user removes it with Backspace.
The value in a numeric textbox cannot be changed for negative numerbes unless you erase all the text and restart.
<TelerikNumericTextBox Decimals="4"Max="5"Value="-4.56m"Id="general"></TelerikNumericTextBox>
Once a user has clicked an appointment to select it, I'd like the ability to clear this selection. For example, if you show one set of appointments, then click a radio button on the page to switch to a different set of appointments, I'd like to clear the selection so that no appointment is selected. The way it works now, the component appears to store the index of the selected appointment and then re-apply that when it's rendered with new appointments.
More context here: https://www.telerik.com/forums/how-to-clear-the-selected-slot-in-the-scheduler
(bug report only)
Reproducible in the demos: https://demos.telerik.com/blazor-ui/dropdowntree/overview
(optional)
For a brief moment the filter input in the dropdown appears focused, but then the focus moves to the first item in the list. If the user clicks the “down arrow” icon to open the dropdown, the filter input is focused as expected.
The filter input is focused regardless where in the component the user clicks.
The DropDownList is supposed to open the popup element when Alt-Down is pressed. This doesn't work if the page itself scrolls. Pressing alt-down scrolls the page instead. This is on macOS Safari and Chrome on a MacBook.
https://demos.telerik.com/blazor-ui/dropdownlist/keyboard-navigation
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
The Editor converts new lines in the HTML content to empty paragraphs if the Value is set after the component is initialized and rendered.
Here is a test page with the possible workarounds. The app can either display the Editor after its Value becomes available, or strip the new lines before setting the component Value.
Steps to reproduce
Reproducible with UI for Blazor, as well as UI for ASP.NET Core (PDF.js and DPL processing)
Actual Behavior
The content is visualized distorted, large parts of it are missing, layout is messed up.
Expected Behavior
The document content is visualized properly, as it is with: https://mozilla.github.io/pdf.js/web/viewer.html
The PDF Viewer may open certain files as empty, even though they have text and image content.
The issue occurs in version 14.0.0.
(Test file available in private ticket 1718294)