When I am dynamically adding or removing tabs I am hitting a variety of problems targeting:
The active tab is not correctly set
the focus is not always set to the active tab
upon adding/removing a tab all tabs are re-created and their content is not persisted
This is causing some data loss, picklist filter loss, lag time when opening and closing tabs
When SelectOnFocus="true"
is enabled on the NumericTextBox control, and a format (e.g., Format="N1"
) is set, the SelectOnFocus
functionality does not select all text if the decimal value has no trailing digits. For instance, with the value 76
, the text is not selected on focus, but with the value 76.1
, the text is selected correctly.
<TelerikNumericTextBox @bind-Value="@DecimalValue" Format="N1" SelectOnFocus="true"/>
@code {
private decimal DecimalValue = 76;
}
Steps to Reproduce:
SelectOnFocus="true"
.Format="N1"
.76
(with no trailing digits after the decimal point).Expected Behavior:
The entire text (in this case, 76.0
) should be selected when the NumericTextBox gains focus.
Actual Behavior:
The text is not selected when the NumericTextBox gains focus if the value has no trailing digits after the decimal point (e.g., 76
). However, if the value includes trailing digits (e.g., 76.1
), the text is selected as expected.
Hi Team,
I am looking for captcha component to verify user as human like below screenshot. Please let me know if this feature is available
Would be nice to have an Expansion Panel like this one:
https://material-ui.com/components/expansion-panels/
Hi, in a my application I save the filters to db, and I permit the user to edit this.
The ValueTemplate (in FilterField component) works perfectly on insert, but not when I update the value of an existing FilterDescriptor (the CompositeFilterDescriptor is not updated).
I've gone deeper, and I think that missing a call to FilterChanged method in the TelerikFilter (from the child).
When the TelerikFilter render a FilterField this set the FilterChanged method that is used any time that you change something in the filter, but with a custom component this call missing.
I think that you must expose the FilterChanged (that now is private) or in TelerikFilter, or better in in context (FilterFieldValueTemplateContext) that you use in the FilterField.ValueTemplate, to force the update in the parent component.
To test this, you can use your code in https://blazorrepl.telerik.com/wIuhlcYV35fUROFX47 and add a new FilterDescriptor in the OnInitialized method, or you can test it with the code below (based on your own).
@using Telerik.Blazor.Components
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
@{
var firstFilter = (Telerik.DataSource.FilterDescriptor?)FilterValue?.FilterDescriptors.FirstOrDefault();
if (firstFilter is not null)
{
<div>
firstFilter value: @firstFilter.Value
</div>
}
}
<TelerikFilter Value="@FilterValue" ValueChanged="@OnValueChanged">
<FilterFields>
@foreach (var f in FilterFields)
{
if (nameof(Food.Price) == f.Name)
{
<FilterField Name="@f.Name" Type="@f.Type" Label="@f.Label" >
<ValueTemplate>
<TelerikNumericTextBox Value="@((decimal?)context.FilterDescriptor.Value)"
ValueChanged="@( (decimal? value) => NumericValueChanged(context.FilterDescriptor, value) )">
</TelerikNumericTextBox>
</ValueTemplate>
</FilterField>
}
else
{
<FilterField Name="@f.Name" Type="@f.Type" Label="@f.Label" />
}
}
</FilterFields>
</TelerikFilter>
<TelerikGrid Data="@GridData"
Height="400px">
<GridColumns>
<GridColumn Field="@(nameof(Food.Id))" />
<GridColumn Field="@(nameof(Food.Name))" />
<GridColumn Field="@(nameof(Food.Price))" />
<GridColumn Field="@(nameof(Food.IsAvailable))" />
</GridColumns>
</TelerikGrid>
@code {
private List<Food> GridData { get; set; } = new();
private List<Food> InitialData { get; set; } = new();
private CompositeFilterDescriptor FilterValue { get; set; } = new();
private List<string> Suggestions { get; set; } = new() { "Pasta", "Burger", "Pizza", "Kebab", "Steak", "Ice Cream" };
private void OnFilterValueChanged(FilterDescriptor fd, string value)
{
fd.Value = value;
ProcessGridData();
}
private void NumericValueChanged(FilterDescriptor fd, decimal? value)
{
fd.Value = value;
var a = FilterValue;
ProcessGridData();
}
private void OnValueChanged(CompositeFilterDescriptor value)
{
FilterValue = value;
ProcessGridData();
}
private void ProcessGridData()
{
CompositeFilterDescriptor filter = FilterValue;
var dataSourceRequest = new DataSourceRequest { Filters = new List<IFilterDescriptor> { filter } };
var dataSourceResult = InitialData.ToDataSourceResult(dataSourceRequest);
GridData = dataSourceResult.Data.Cast<Food>().ToList();
}
protected override void OnInitialized()
{
FilterValue.FilterDescriptors.Add(new FilterDescriptor { Member = nameof(Food.Price), Operator = FilterOperator.IsEqualTo, Value = Convert.ToDecimal(0), MemberType = typeof(decimal) });
LoadData();
base.OnInitialized();
}
private void LoadData()
{
InitialData = new List<Food>
{
new Food { Id = 1, Name = "Pasta", Price = 13.99m, IsAvailable = true},
new Food { Id = 2, Name = "Burger", Price = 11.99m, IsAvailable = false},
new Food { Id = 3, Name = "Pizza", Price = 16.99m, IsAvailable = true},
new Food { Id = 4, Name = "Kebab", Price = 9.99m, IsAvailable = true },
new Food { Id = 5, Name = "Steak", Price = 22.99m, IsAvailable = false },
new Food { Id = 6, Name = "Salad", Price = 6.99m, IsAvailable = true},
new Food { Id = 6, Name = "Ice Cream", Price = 4.99m, IsAvailable = true }
};
ProcessGridData();
}
public class Food
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public decimal Price { get; set; }
public bool IsAvailable { get; set; }
}
public List<MyFilterField> FilterFields = new List<MyFilterField>
{
new MyFilterField { Name = nameof(Food.Price), Type = typeof(double?), Label = "Price" },
new MyFilterField { Name = nameof(Food.Id), Type = typeof(int), Label = "Id" },
new MyFilterField { Name = nameof(Food.Name), Type = typeof(string), Label = "Name" },
new MyFilterField { Name = nameof(Food.IsAvailable), Type = typeof(bool), Label = "Is Available" }
};
public class MyFilterField
{
required public string Name { get; set; }
required public Type Type { get; set; }
required public string Label { get; set; }
}
}
Accessibility Insights for Web extension is flagging the k-grid-filter icon in the Grid Header labels. Need workaround and remove the aria-label and replace with aria-role per guidance. Under each of the red explanation marks is the filter icon on the column. Running the Accessibility Insights for Web tool by Microsoft using Edge browser flags this code.
Please provide temporary workaround and permanent fix.
Blazor-UI 2.30 Release.
The sort order for some strings should be in natural sort order.
1.10 -> 1.13 should be following 1.9 in this example.
I want to set the initially focused time/date for the DateTimePicker before opening the picker to improve the user experience. When opening the DateTimePicker with a null value the preselected date is the current day and the time is always 00:00/12:00AM.
I do not want to set value for the component but rather alter the time/date that will be initially focused when opening the popup.
===
ADMIN EDIT
===
The request also applies to the rest of the pickers - DatePicker, DateRangePicker and TimePicker.
Hello,
Having one textbox and one label would be great. Please consider it.Where there is a spacer inside the ToolBar or when there are no items that should be hidden anymore, the overflow anchor overlay with the other items.
#1563693
We're currently working on requiring a Google CASA Security Assessment, as part of this they scanned our site.
However, the scan found an eval() function in the telerik-blazor.js file:
if(_util.isNodeJS){const worker=eval("require")(this.workerSrc);return worker.WorkerMessageHandler}
Is it possible to remove eval() from telerik-blazor.js?
Hello
Is it possible to get the map to support Geolocation? Something like whats on the openstreetmap website map where you can click the location button and the map then moves to where your location is. Maybe some event that we can listen on to get the Latitude and Longitude of the users location which we can then use to manipulate the map?
Phil
Hello,
I would like to have a parameter to show or hide a clear button on TextBox.
regards
Hi, I just came accross a bug in the TelerikStepper.
I try to create a custom version that switches to a custom success icon after a step is completed.
It contains the following codesnippets:
<TelerikStepper Linear="true" ValueChanged="@HandleValueChanged">
<StepperSteps>
@for (int i = 0; i < IsValidArray.Length; i++)
{
<StepperStep Valid="@IsValidArray[i]"></StepperStep>
}
</StepperSteps>
</TelerikStepper>
@code {
bool?[] IsValidArray = [null, null, null, null];
public void HandleValueChanged(int index)
{
for (int i = 0; i < IsValidArray.Length; i++)
{
IsValidArray[i] = index > i ? true : null;
}
}
}
Forward it works like expected:
When moving backwards it behaves strange:
Except if you are debugging (Visual Studio debugger), then everything works as expected:
Same thing can be achived when not debugging but clicking on the step a second time.
This can not be solved by adding the @key parameter as suggested in https://feedback.telerik.com/blazor/1659827-bug-in-the-telerikstepper-in-blazor from Hristian Stefanov!
Nevertheless, it turns out that the Task.Delay(1); seems to solve the Issue somehow.
Is this intended?
While your existing TileLayout seems to be striving for this it doesn't seem to function as intuitively, or perhaps it is supposed to but has bugs? Ideally I'd like to have a layout component that mimics what I see in the Azure portal, however I realize from other feedback tickets you're not going to do that. The ability to have gaps really makes the user experience better. I understand things have to be 'touching' (eg I can't just place something off into the bottom right corner of the screen by itself) but being able to do something like you see in the attached gridstack_basic_demo_img1.jpg would be great.
It seems easy to get into an odd state using the TileLayout, even creating gaps where I don't want them and I'm unable to fix it. For example in telerik_tilelayout_img1.jpg you see your demo page, I have the "Bounce Rate" box with a gap above it and for whatever reason I can't even bring it UP to fill the gap (dragging it up the red arrow path and dropping it gets rejected and the box floats back to where it is in the img).
I really want to use your TileLayout but I think using it as-is would really frustrate my userbase. Do you have plans to improve it's functionality and overall user experience?
Thanks for your consideration