On a grid grouped by a field (using GroupDescriptors) where the amount of records exceed the page limit, therefore generating multiple pages, provide an option to keep the collapsed/expanded states of the groups when navigating through the pages.
In-house we implemented the following approach to mitigate this issue: when calling OnRead event, after processing the data (order, filter, group, etc) we're mapping the groups and subgroups to its corresponding indexes. When page changing, we then store the current state of the groups, alongside its keys (aka the label of the group). After page changing and mapping the groups and subgroups again, we just match the group names stored in this temporary state with the group names of the new page and restore the state.
For example: start with all groups initially collapsed, page 1 has groupA and groupB and user expanded groupB, changed to page 2, which has the remaining records of groupB and groupC. In this case it will restore groupB as expanded while groupC keeps collapsed.
Example to demonstrate the issue: https://blazorrepl.telerik.com/melmEeFi43owNZBe50
On a grid grouped by one or more fields, provide an option for end users to expand/collapse all rows at will. The following image is a suggestion of where this option (most likely a button) should appear:
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