According to the documentation for the ComboBox, https://www.telerik.com/blazor-ui/documentation/components/combobox/filter, "Filtering looks in the TextField, and the filter is reset when the dropdown closes."
However, if the user starts typing and then either selects an item from the dropdown, the filter persists until the user clears the text box or opens the dropdown and clicks outside of it.
Example steps using the below demo link:
1.) Configure settings:
2.) Type the letter 'h':
3.) Select the first option:
4.) Click dropdown arrow and still see filtered list based on the previously typed filter (anything containing an 'h'):
Reproducible on the demo page: https://demos.telerik.com/blazor-ui/combobox/filtering
The matching problem occurs when a user types to filter input and selects an option from the dropdown, then code changes the bound value. If any code changes the bound value to an item that doesn't match the filter, the display field appears empty instead of showing the newly bound value.
For example: if instead of opening the dropdown during step 4, the user clicked a button that programmatically set the value to "Audi", then the field would show to the user as blank. As demonstrated in the following Repl, it is definitely the filters fault, since typing a filter which includes Audi (ex: 'a') does have the text on the ComboBox change when clicking the button to programmatically update the bound value.
https://blazorrepl.telerik.com/cJapEQGO21LFAeLg53
Reproduction: https://blazorrepl.telerik.com/cHbFYUFq53Ext4Yt24.
Steps to reproduce:
===
TELERIK EDIT: A possible workaround is to obtain the typed string in OnChange and check if it is matching an item in the datasource:
Hello,
The Grid header and data cells become misaligned if the user changes the page zoom level. The right padding of the Grid header area resizes, according to the zoom level, but the scrollbar width remains the same. This triggers the misalignment.
The problem disappears after browser refresh at the current zoom level.
It appears there are some issues with encoding special characters in the DataSourceExtensions.ToODataString extension method.
See snippet below.
var ds = new DataSourceRequest()
{
Filters = [new FilterDescriptor("FieldName", FilterOperator.IsEqualTo, "Route #")],
Sorts = []
};
{
Console.WriteLine(ds.ToODataString());
$count=true&$filter=(FieldName%20eq%20%27Route%20#%27)&$skip=0
This results in a malformed url as the last part of of the query is interpreted as a fragment due to this character not being encoded.
Hi,
Are you planning to add a loader to the grid in the feature?
E.g as an isLoading attribute or exepnd the build-in one?
With method OnRead to fetch data, when grid is not yet loaded with data, it displays no records available.
Also when chenging data, loading is not starting, but there is an unsmooth transition after some time.
Thanks in advance for your time, Kacper
Hello,
I created a repl to replicate the issue that I'm having. I created a Filter with a custom editor. For this example, I used a Textbox and I save the changes back to the context.FilterDescriptor.Value in the OnChange method which occurs when the user blurs focus.
If you start the repl w/o checking the Use Custom Editor checkbox and enter text where the "Sample" value is located you will see the changes are saved properly to the bound CompositeFilter property and are echo'd back in the screen.
If instead you check the Use Custom Editor box and perform the same test you'll see that the same changes are not present in the bound CompositeFilter.
Note that this issue only occurs if you start with an existing CompositeFilter and bind it to the filter control. It seems that if the control creates the FilterDescriptor objects then their changes bind properly, but if the FilterDescriptor objects existed before binding to the control then the issue occurs.
https://blazorrepl.telerik.com/wIOtcKOb31mjTc3351
Thank You,
-Andy
============= TELERIK EDIT ===============
A possible workaround is to find the original filter descriptor and update its Value:
@using Telerik.DataSource
@System.Text.Json.JsonSerializer.Serialize(FilterValue)
<br />
<br />
<TelerikFilter @bind-Value="@FilterValue">
<FilterFields>
<FilterField Name="Field" Type="@(typeof(string))">
<ValueTemplate>
<TelerikTextBox Value="@((string)context.FilterDescriptor.Value)"
ValueChanged="@( (string newValue) => OnTextBoxValueChanged(context.FilterDescriptor, newValue) )"
DebounceDelay="0" />
</ValueTemplate>
</FilterField>
</FilterFields>
</TelerikFilter>
@code {
private void OnTextBoxValueChanged(FilterDescriptor templateFD, string newValue)
{
var originalFD = FilterValue.FilterDescriptors.OfType<FilterDescriptor>().FirstOrDefault(x =>
{
return x.Member == templateFD.Member &&
x.MemberType == templateFD.MemberType &&
x.Operator == templateFD.Operator &&
x.Value == templateFD.Value;
});
if (originalFD != null)
{
templateFD.Value = newValue;
originalFD.Value = newValue;
}
}
private CompositeFilterDescriptor FilterValue { get; set; } = new()
{
LogicalOperator = FilterCompositionLogicalOperator.Or,
FilterDescriptors = new FilterDescriptorCollection() {
new FilterDescriptor()
{
Member = "Field",
MemberType = typeof(string),
Value = "Sample"
}
}
};
}
Trying to upload a large file from a mobile device breaks the component.
Step to reproduce:
The issue can be reproduced only in version 8.0.0
We are using Telerik UI for Blazor (V6.2.0) grid. The first 3 columns (Delivery No, Spot Check, Spotcheck Status) of the grid are frozen/locked. While horizontal scrolling the header text gets overlapped. We have used custom CSS to change the header color.
<TelerikGrid @ref="@GridRef" Data="@dashboardData"
Reorderable="true"
SortMode="@SortMode.Single"
Pageable="true"
FilterMode="GridFilterMode.FilterRow"
PageSize="10"
EnableLoaderContainer="true"
Sortable="true" Context="inboundContext" OnRowRender="@OnRowRenderHandler" Width="1800px" Height="500px">
Rebinding the PDF Viewer multiple times leads to an ever increasing memory usage, which can ultimately cause a browser crash.
The issue started with Telerik UI for Blazor version 8.0.0 and does not occur in 7.1.0.
Test Page: https://blazorrepl.telerik.com/QTayOxvQ090qYPsb50
Like https://docs.telerik.com/blazor-ui/components/combobox/custom-value and https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/custom-values/ so the user can input tags on their own without them being in the app data source.
---
ADMIN EDIT
The following sample may be useful in implementing this in the meantime: https://github.com/telerik/blazor-ui/tree/master/multiselect/add-new-item
---
Related to PDF Viewer does not display editable Acro fields, which was fixed in version 8.0, but the problem with readonly Acro fields persisted.
This is a regression in version 7.0.0. Version 6.2.0 displays all the acro field values as expected.
It would be nice to be able to configure a show/hide animation for windows.
ADMIN EDIT: This might include a form of a Shown event so that you could know when the content is rendered and available to, for example, focus a button or input. For more details see here
Please consider extending the GridColumn component to include fine-grained header presentation properties, such as:
These enhancements would dramatically improve clarity and usability in complex data grids.
Why This Is Important
In enterprise-grade applications — like ERP dashboards, financial reporting, or cutover schedules — grids are dense and loaded with meaning. Users rely heavily on headers to interpret the data beneath, especially when:
The RadioGroup's FocusAsync() method does not work. To reproduce, run this example and press the button: https://docs.telerik.com/blazor-ui/components/radiogroup/overview#radiogroup-reference-and-methods
===
A possible workaround is to use JavaScript to focus the first or the selected <input> element:
@inject IJSRuntime js
<TelerikButton OnClick="@FocusRadioGroup">Focus RadioGroup</TelerikButton>
<TelerikRadioGroup Data="@RadioGroupData"
Class="my-radiogroup"
@bind-Value="@RadioGroupValue"
ValueField="@nameof(ListItem.Id)"
TextField="@nameof(ListItem.Text)">
</TelerikRadioGroup>
@* Move JavaScript code to a separate JS file in production *@
<script suppress-error="BL9992">function focusRadio(RadioGroupValue) {
var mrg = RadioGroupValue == null ?
document.querySelector(".my-radiogroup .k-radio-list-item input") :
document.querySelector(`.my-radiogroup .k-radio-list-item input[value='${RadioGroupValue}']`);
if (mrg) {
mrg.focus()
}
}</script>
@code{
private int? RadioGroupValue { get; set; }
List<ListItem> RadioGroupData { get; set; } = new List<ListItem>() {
new ListItem { Id = 1, Text = "Foo" },
new ListItem { Id = 2, Text = "Bar" },
new ListItem { Id = 3, Text = "Baz" }
};
private async Task FocusRadioGroup()
{
await Task.Delay(1);
await js.InvokeVoidAsync("focusRadio", RadioGroupValue);
}
public class ListItem
{
public int Id { get; set; }
public string Text { get; set; } = string.Empty;
}
}
Would like a parameter in the grid definition that would display a Clear/Refresh button to return the grid to all originally selected records. This feature would work similar to the Excel clear filter function.
===
TELERIK EDIT: To reset the Grid filters, you can clear the FilterDescriptors collection and the SearchFilter property in the Grid state. Here is an example:
https://blazorrepl.telerik.com/cfEoatOr000uBdgW48
private TelerikGrid<Product>? GridRef { get; set; }
private async Task ClearGridFilters()
{
var gridState = GridRef!.GetState();
gridState.FilterDescriptors = new List<IFilterDescriptor>();
gridState.SearchFilter = default;
await GridRef.SetStateAsync(gridState);
}
Please add a built-in way to define a list of predefined filters (filter presets) within the ToolbarTemplate of a grid. This would allow users to quickly select a filter configuration, which is then automatically applied to the grid’s DataSourceRequest.
Why This Is InvaluablE
In enterprise apps with dense, multi-column grids, users often need to:
Currently, implementing this requires custom filter logic, state management, and manual data reloading — even though the concept is straightforward from a user’s perspective.