Greetings,
I find input adornments very useful. However I noticed that when I click them, the control doesn't get the focus. E.g., with this code:
<TelerikTextBox>
<TextBoxPrefixTemplate>
First name
</TextBoxPrefixTemplate>
</TelerikTextBox>
Clicking on First name doesn't do anything. I would expect the control to be focused when I do that.
You will find an image in attachment showing a green area that, when clicked, brings focus on the textbox. Input adornment is in dark gray. I'm using it as a label for the control but even if it was simply an icon, it would be strange to not be able to focus on the control when clicking it.
The following code successfully renders the pdf viewer when the edit form is commented out, but when indside the pdf viewer it fails to render and gives the following error:
"Telerik.Blazor.Components.TelerikComboBox`2[Telerik.Blazor.Components.PdfViewer.Models.PdfViewerZoomLevelDescriptor,System.String] requires a value for the 'ValueExpression' ValueExpression is provided automatically when using 'bind-Value'.See more at https://docs.telerik.com/blazor-ui/knowledge-base/requires-valueexpression ."
@page "/pdfBug"
@* <EditForm Model="_fakeContext"> *@
<TelerikPdfViewer Data="@PdfSource"
OnDownload="@OnPdfDownload"
Height="600px"></TelerikPdfViewer>
@* </EditForm> *@
@code {
private byte[] PdfSource { get; set; }
private async Task OnPdfDownload(PdfViewerDownloadEventArgs args)
{
args.FileName = "PDF-Viewer-Download";
}
protected override void OnInitialized()
{
PdfSource = Convert.FromBase64String(PdfBase64);
base.OnInitialized();
}
private const string PdfBase64 = "JVBERi0xLjEKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDEvTWVkaWFCb3ggWy00MCAtNjQgMjYwIDgwXSA+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjE8PC9UeXBlL0ZvbnQvU3VidHlwZS9UeXBlMS9CYXNlRm9udC9BcmlhbD4+ID4+ID4+L0NvbnRlbnRzIDQgMCBSPj5lbmRvYmoKNCAwIG9iajw8L0xlbmd0aCA1OT4+CnN0cmVhbQpCVAovRjEgMTggVGYKMCAwIFRkCihUZWxlcmlrIFBkZlZpZXdlciBmb3IgQmxhem9yKSBUagpFVAplbmRzdHJlYW0KZW5kb2JqCnhyZWYKMCA1CjAwMDAwMDAwMDAgNjU1MzUgZgowMDAwMDAwMDIxIDAwMDAwIG4KMDAwMDAwMDA4NiAwMDAwMCBuCjAwMDAwMDAxOTUgMDAwMDAgbgowMDAwMDAwNDkwIDAwMDAwIG4KdHJhaWxlciA8PCAgL1Jvb3QgMSAwIFIgL1NpemUgNSA+PgpzdGFydHhyZWYKNjA5CiUlRU9G";
private FakeContext _fakeContext = new FakeContext() { Name = "Test" };
public class FakeContext
{
public string Name { get; set; }
}
}
I use TelerikMultiSelect as a component for custom filter:
<FilterMenuTemplate>
<TelerikMultiSelect Value="@(AlreadySelectedFilterValues(context.FilterDescriptor))"
OnRead="@OnReadWrapper"
ValueMapper="@ValueMapperWrapper"
TItem="@FilterItemDto"
TValue="@TFilterValue"
ValueField="@nameof(FilterItemDto.Id)"
TextField="@nameof(FilterItemDto.Name)"
AutoClose="true"
Filterable="true"
ClearButton="true"
DebounceDelay="500"
OnChange="@((object newValue) => OnMenuFilterChange(newValue, context))"/>
</FilterMenuTemplate>
Trying to render already selected filters gives two "magic" items in context.FilterDescriptor in AlreadySelectedFilterValues:
These items appear only if TelerikMultiSelect is empty. If I select some from MultySelect these two items disappear and everything works as expected.
GridState has an empty list of FilterDescriptos.
AggregatedAccountNames - string? column.
TFilterValues can be int, int? or string, no matter, the same behavior.
TFilterItemDto - class with int? Id and and string Name fields.
As expected value I expect to have empty FilterDescriptos if nothing was selected.
We find this in our infrastructure but it can be reproduced even in Telerik docs.
Docs page: https://docs.telerik.com/blazor-ui/components/grid/grouping/overview try to drop all three columns using drag and drop in sequence: Team, Name, On Vacation.
Expected sequence: Team, Name, On Vacation
Expected sequence: Team, On Vacation, Name
All Elements are always added as 1 item. It is an important feature for us, as our customers use it frequently.
===
TELERIK EDIT:
A possible workaround is to intercept the grouping and reorder the groups:
@using Telerik.DataSource
<p>Group by a third column, so that it should come last in the Group Panel:</p>
<TelerikGrid @ref="@GridRef"
Data="@GridData"
Pageable="true"
Sortable="true"
Groupable="true"
FilterMode="GridFilterMode.FilterRow"
OnStateInit="@( (GridStateEventArgs<Employee> args) => OnGridStateInit(args) )"
OnStateChanged="@( (GridStateEventArgs<Employee> args) => OnGridStateChanged(args) )">
<GridColumns>
<GridColumn Field="@nameof(Employee.Name)" />
<GridColumn Field="@nameof(Employee.Team)" />
<GridColumn Field="@nameof(Employee.Salary)" />
<GridColumn Field="@nameof(Employee.OnVacation)" />
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Employee>? GridRef { get; set; }
private List<Employee> GridData { get; set; } = new();
private void OnGridStateInit(GridStateEventArgs<Employee> args)
{
args.GridState.GroupDescriptors = new List<GroupDescriptor>();
args.GridState.GroupDescriptors.Add(new GroupDescriptor()
{
Member = nameof(Employee.Team),
MemberType = typeof(string)
});
args.GridState.GroupDescriptors.Add(new GroupDescriptor()
{
Member = nameof(Employee.OnVacation),
MemberType = typeof(bool)
});
}
private async Task OnGridStateChanged(GridStateEventArgs<Employee> args)
{
if (args.PropertyName == "GroupDescriptors" && args.GridState.GroupDescriptors.Count > 2 && GridRef != null)
{
var secondGroupDescriptor = args.GridState.GroupDescriptors.ElementAt(1);
args.GridState.GroupDescriptors.Remove(secondGroupDescriptor);
args.GridState.GroupDescriptors.Add(secondGroupDescriptor);
await GridRef.SetStateAsync(args.GridState);
}
}
protected override void OnInitialized()
{
var rnd = new Random();
for (int i = 1; i <= 20; i++)
{
GridData.Add(new Employee()
{
Id = i,
Name = "Name " + i,
Team = "Team " + (i % 4 + 1),
Salary = (decimal)rnd.Next(1000, 3000),
OnVacation = i % 3 == 0
});
}
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Team { get; set; } = string.Empty;
public decimal Salary { get; set; }
public bool OnVacation { get; set; }
}
}
The OnRowClick event of the TelerikGrid is only triggered when clicking the row with the left mouse button as discussed on the following forum post:
https://www.telerik.com/forums/grid-onrowclick-event-for-middle-mouse-button-click
Please add support to the OnRowClick event to trigger it for a middle mouse button click (and pass the mouse button clicked in the eventargs) or add a separate OnRowClick event that is triggered on middle mouse button click.
Hi,
As the subject says, when our app is on the Chinese localization `zh-CN` it causes the date picker to default.
By default I mean the default date becomes 01 01 0001 and you cannot change it no matter what you select.
On any of our other localizations such as es-ES, en-US, fr-FR, etc. (zh-CN is the only one is what I'm getting at) we don't get this issue.
If the Datepicker's binded value is a DateOnly type, the Min and Max should follow that type.
This public feature request:
Historically, the TelerikRootComponent was designed with the following purposes:
.NET 8 Blazor apps with "Per Component" interactivity location create a big challenge for the above state of affairs:
So, developers who work with a globally static app with specific interactive components ("islands of interactivity") may need to:
All developers who develop static .NET 8 Blazor apps with "Per Component" interactivity location:
Hi,
I am looking to use strongly-typed IDs in my project and it does not appear to be possible to achieve this with Telerik UI for Blazor. Instead, the popup does not go away on selection and the bound value does not update.
Note that this is not a request for binding to arbitrary complex types. I believe it would be sufficient to support value types that implement ToString / IParsable.
For example:
https://blazorrepl.telerik.com/QxvcQIPR55jFAGMF00
<h1>Hello, Telerik REPL for Blazor!</h1>
<h2>Selected Value: @SelectedValue</h2>
<TelerikDropDownList Data="@Data"
@bind-Value="@SelectedValue"
TextField="@nameof(SelectItem.DisplayName)"
ValueField="@nameof(SelectItem.Value)"
DefaultText="Select ...">
</TelerikDropDownList>
@code {
public MyValue SelectedValue {get; set;}
public SelectItem[] Data { get; } = new[] {
new SelectItem(1),
new SelectItem(2),
};
public readonly struct MyValue : System.IParsable<MyValue> {
public int Value {get;}
public MyValue(int value) {
this.Value = value;
}
public override string ToString() {
return Value.ToString();
}
public static MyValue Parse(string str, IFormatProvider provider) {
return new(int.Parse(str, provider));
}
public static bool TryParse(string str, IFormatProvider provider, out MyValue value) {
value = new(int.Parse(str, provider));
return true;
}
}
public class SelectItem {
public SelectItem(int value) {
Value = new(value);
DisplayName = $"Item {value}";
}
public MyValue Value {get; set;}
public string DisplayName {get; set;}
}
}
Thanks,
Ben
Hi,
It would be VERY helpful if you integrated "Prevent the Grid from wrapping text in multiple lines and show ellipsis" into grid as an option (so we would not have to write separate code and style).
I think this is one of the most needed features since grids almost always have data that wraps line.
BR, Smiljan
I have a ComboBox that gets data from a remote service, using virtualization. When the PageSize property is big enough (in my case 20), I have issues scrolling down. I'm trying to scroll but it removes the input text.
You can use your own demo examples to replicate this issue. To reproduce the issue, try the ComboBox - Virtualization, in Telerik REPL (Demo).
We have a form with multiple TelerikEditor controls bound via @bind-value. The issue arises when there are more than 2 TelerikEditors; the performance is significantly impacted for all input fields. Typing experiences delays, making fast typing impractical.
This performance degradation is attributed to the fact that the page undergoes frequent re-renders when typing into the input fields. Interestingly, this behavior does not occur when TelerikEditor is excluded from the form or page.
While the DebounceDelay property in TelerikEditor helps improve its performance, it does not extend its influence to other input fields in the form or page. Are you familiar with this issue, and do you have any recommendations for addressing or mitigating it?
Using:
WebAssembly
Telerik 4.0.1
Create a word style component.
Currently my wpf desktop app uses a editor style component and refreshes a crystal reports window component to show edits made to a pre created document. We use this to create quote letters using custom legal jargon.
I am in the process of moving that program to Blazor. A word component that i can wrap our custom texts around and buttons in the title bar for pasting our prefomatted text would be so much better than our current setup.
Could this be added to the roadmap?
When using the OnRead event of the ComboBox there is no way to retrieve the selectedItem because the list of items that is populated is internal.
There are 2 workaround but they are not ideal:
- Saving the list of items returned by the OnRead event into a parallel list and then retrieve the selectedItem from it -> the problem is that there will be 2 identical lists in memory and, if scaled, might cause problems:
CachedSitesList = result.Items;
args.Data = result.Items;
args.Total = (int)result.TotalCount;
- Retrieving the selectedItem by calling the DB using the Id of the item -> the problem is that it's one more request to add to the DB and the performance is going to decrease if scaled, also it seems useless as the item is already present in memory.
We suggest adding a function to return the selectedItem to improve performance and scalability of the component.
Hi Support Team,
in our project we are using Telerik Chart and has required to update theme of chart from dark to light and light to dark.
telerik chart in child razor page and dark/light button in mainlayout.razor file but telerik chart updating theme when click on button exist telerik chart razor page. as below link it is an existing issue.
please advice how to resolve the issue.
https://docs.telerik.com/blazor-ui/common-features/icons#icon-nuget-packages
When you click "Preview" under Using TelerikFontIcon, the preview is blank, even if I scroll to the top, still nothing.
Hi,
When I use TelerikDatePicker in my own component and the I use this component in Form, the validation for this input on the UI side doesn't work. The k-invalid class is not added, the appriopriate aria-invalid value is not set. The value on the TelerikDataPicker CascadedEditContext side is ok, an error message for this field appears after validation.