Telerik Forums
UI for Blazor Forum
1 answer
26 views

Hi, i have a grid with row filter.

 

1. I change filter operator from the relative button

2. I edit the search field column

The grid show me the correct results.

Now if i clear the search field column, the filter operator automatically reset to the default value and not keep the settings i choose in step 1.

 

You can reply the issue with the first example in grid documentation: https://www.telerik.com/blazor-ui/documentation/components/grid/overview

The filter operator must keep my initial settings

It's a bug? how to solve?

Thanks

Dimo
Telerik team
 answered on 28 Jul 2025
1 answer
22 views

I just get a spinning wheel when I bring up NuGet Package Manager and have the source set to Telerik.

If I select other package sources they load and display quickly.

Any suggestions?

 

 

Rob
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 24 Jul 2025
1 answer
24 views

I’m trying to build a custom filter for a column in the Telerik Grid. I’d like to have both the custom filter and the default filter available in the column's filter menu. I’ve managed to get the custom filter displaying and working correctly, but the default filter is not appearing in the filter menu for that column. I’ve attached the code — could you please help me figure out what’s missing or incorrect?

Many Thanks

                                        <GridColumn Field="@nameof(StockVehicleRowDTO.PerformanceGrading)" 
                                            Title="Grade" 
                                            Lockable="true" 
                                            TextAlign="@ColumnTextAlign.Center" 
                                            Locked="true" 
                                            Width="120px" 
                                            Filterable="true">
                                            <FilterMenuTemplate Context="context">
                                                <div class="p-2">

                                                    <!-- Default Telerik Filter Menu -->
                                                    <TelerikGridFilterMenu Context="context" />

                                                    <hr />

                                                    <!-- Custom Checkbox Filter -->
                                                    <div>
                                                        <strong>Quick Grade Filter:</strong>
                                                        @foreach (var grade in GradeFilterOptions)
                                                        {
                                                            <div>
                                                                <TelerikCheckBox 
                                                                    Value="@(IsGradeChecked(context.FilterDescriptor, grade))"
                                                                    ValueChanged="@((bool value) => OnGradeFilterChanged(value, grade, context.FilterDescriptor))"
                                                                    Id="@($"grade_{grade}")">
                                                                </TelerikCheckBox>
                                                                <label for="@($"grade_{grade}")">@grade</label>
                                                            </div>
                                                        }
                                                    </div>
                                                </div>

                                            </FilterMenuTemplate>
                                            <Template>
                                                @{
                                                    var vehicleRow = (context as DDD.Application.Vehicles.ViewModels.StockVehicleRowDTO);
                                                    var grade = vehicleRow?.PerformanceGrading;
                                                }
                                                <GradeChip Grade="@grade" />
                                            </Template>
                                        </GridColumn>

 

Backend code..

 // Grade filter options for the filter menu (dynamic from data)
 public List<string> GradeFilterOptions => StockPageVehicles?.ActiveVehicles
     .Select(v => v.PerformanceGrading)
     .Distinct()
     .OrderBy(g => g)
     .Select(g => g.ToString())
     .ToList() ?? new List<string>();

 // Helper to check if a grade is selected in the filter descriptor
 public bool IsGradeChecked(CompositeFilterDescriptor filterDescriptor, string grade)
 {
     return filterDescriptor.FilterDescriptors.Any(f => (f as FilterDescriptor)?.Value?.ToString() == grade);
 }

 // Handler for checkbox changes in the Grade filter menu
 public void OnGradeFilterChanged(bool value, string grade, CompositeFilterDescriptor filterDescriptor)
 {
     var filter = filterDescriptor.FilterDescriptors.FirstOrDefault(f => (f as FilterDescriptor)?.Value?.ToString() == grade);
     filterDescriptor.LogicalOperator = FilterCompositionLogicalOperator.Or;
     int gradeInt;
     if (!int.TryParse(grade, out gradeInt)) return;
     if (value && filter == null)
     {
         filterDescriptor.FilterDescriptors.Add(new FilterDescriptor(nameof(StockVehicleRowDTO.PerformanceGrading), FilterOperator.IsEqualTo, gradeInt));
     }
     else if (!value && filter != null)
     {
         filterDescriptor.FilterDescriptors.Remove(filter);
     }
 }
Ivan Danchev
Telerik team
 answered on 22 Jul 2025
1 answer
23 views

Hi,

I've some TelerikCard components that host different other components but when using lets say the TelerikTimePicker then as soon as you try to input a time via keyboard it gets a red border and seems to invalidate the input.

When using the TelerikTimePicker outside in a simple div then it seems to work.

Also when using the popup to set the time it works. Only keyboard input seems to trigger some sort of validation.
When losing focus the timepicker resets to 00:00:00.

Here's the code of the razor page to replicate the problem:

<TelerikCard Width="20rem">
    <CardHeader>
        <CardTitle>Time Selector</CardTitle>
    </CardHeader>
    <CardBody>
        Startzeitpunkt<br>
        <TelerikTimePicker @bind-Value="@SelectedStartTime" Format="HH:mm:ss" Width="6rem" />
        <br>
        Endzeitpunkt<br>
        <TelerikTimePicker @bind-Value="@SelectedEndTime" Format="HH:mm:ss" Width="6rem" />
        <br>
    </CardBody>
    <CardSeparator></CardSeparator>
    <CardFooter>
        footer
    </CardFooter>
</TelerikCard>

@code {
    protected DateTime SelectedStartTime { get; set; }
    protected DateTime SelectedEndTime { get; set; }
}

I use the latest telerik blazor components 9.1.0 and VS 2022 17.14.9.

Maybe someone has a hint what's wrong with it.

Regards,
Thomas

Georgi
Telerik team
 answered on 18 Jul 2025
4 answers
897 views
Hi all,
I have case where grid must have external filters and filtering occurs by manual button click.
I am trying to use snippet from documentation (https://docs.telerik.com/blazor-ui/components/grid/manual-operations).

01.<TelerikTextBox @bind-Value="FilterName"/>
02.<TelerikTextBox @bind-Value="FilterEmail" />
03. 
04.<TelerikButton OnClick="Filter">Filter</TelerikButton>
05. 
06.<TelerikGrid Data=@GridData TotalCount=@Total Sortable=true Pageable=true>
07.    <TelerikGridColumns>
08.        <TelerikGridColumn Field="@nameof(Model.Name)" />
09.        <TelerikGridColumn Field="@nameof(Model.Email)" />
10.    </TelerikGridColumns>
11. 
12.    <TelerikGridEvents>
13.        <EventsManager OnRead=ReadData />
14.    </TelerikGridEvents>
15.</TelerikGrid>
16. 
17.@code{
18.    public IQueryable<Model> SourceData { get; set; }
19.    public IEnumerable<Model> GridData { get; set; }
20.    public int Total { get; set; }
21. 
22.    public string FilterName { get; set; }
23.    public string FilterEmail { get; set; }
24. 
25.    protected async Task ReadData(GridReadEventArgs args)
26.    {
27.        // Adding external filter values to grid data source request
28.        args.Request.Filters.Clear();
29.        args.Request.Filters.Add(new FilterDescriptor(nameof(Model.Name), FilterOperator.Contains, FilterName));
30.        args.Request.Filters.Add(new FilterDescriptor(nameof(Model.Email), FilterOperator.Contains, FilterEmail));
31. 
32.        var datasourceResult = await SourceData.ToDataSourceResultAsync(args.Request);
33.        GridData = (datasourceResult.Data as IEnumerable<Model>).ToList();
34.        Total = datasourceResult.Total;
35. 
36.        StateHasChanged();
37.    }
38. 
39.    protected void Filter()
40.    {
41.        // How to say to grid data source that he must read the data?
42.    }
43.     
44.    public class Model
45.    {
46.        public string Name { get; set; }
47.        public string Email { get; set; }
48.    }
49.}


I have some queations:
1. First of all, how to manually trigger Read event? Like in Kendo UI, Datasource have method read() (https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/read)
In other words, in Filter() handler how to say to grid data source that he must read the data?
2. What is right way to apply external filters and manually filtering?
Flavio
Top achievements
Rank 1
Iron
 answered on 17 Jul 2025
1 answer
31 views

I'm looking for something similar to this:

https://www.syncfusion.com/blazor-components/blazor-image-editor

Need this for annotating and editing both bitmapped and vector based graphics related to an engineering applcation.

Hristian Stefanov
Telerik team
 answered on 17 Jul 2025
1 answer
14 views

How do I set the TreeList filter through code?  So, can I put a value in the criteria field from code behind?

My TreeList
                <TelerikTreeList @ref=@TreeListRef
                                 Data="@Groups"
                                 SelectedItems="@SelectedGroups"
                                 IdField="@nameof(Group.Id)"
                                 ParentIdField="@nameof(Group.ParentId)"
                                 OnStateInit="((TreeListStateEventArgs<Group> args) => OnStateInitHandler(args))"
                                 Pageable="true"
                                 PageSize="@GroupPageSize"
                                 Height="100%"
                                 Sortable="false"
                                 SelectionMode="TreeListSelectionMode.Single"
                                 FilterMode="@TreeListFilterMode.FilterMenu"
                                 @bind-Page="@GroupCurrentPage"
                                 SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Group> m) => OnGroupSelected(m))">
                    <TreeListColumns>
                        <TreeListColumn Field="Name" Title="Group Filter" Expandable="true">
                            <Template>
                                @{
                                    var item = context as Gsi.Customer.Models.Group;
                                    <img height="32" width="32" src="@item.ImageUrl" />
                                    @item.Name
                                }
                            </Template>
                        </TreeListColumn>
                    </TreeListColumns>
                </TelerikTreeList>

Georgi
Telerik team
 answered on 17 Jul 2025
2 answers
21 views

I have a treelist with a checkbox for selection.  However, my list is long so I added pagination.  I help the user by pre-selecting a node and I need to display the page that exposes the first selected node.  How do I do this?

|

                        <TelerikTreeList @ref=@TreeListRef
                                         Class="gsi-padding-0"
                                         Data="@UserGroups"
                                         SelectedItems="@SelectedGroups"
                                         IdField="Id"
                                         Pageable=true
                                         PageSize="10"
                                         ParentIdField="ParentId"
                                         SelectionMode="TreeListSelectionMode.Single"
                                         OnRowRender="@HandleRowRender"
                                         SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Group> m) => OnGroupSelected(m))">

                            <TreeListColumns>
                                <TreeListCheckboxColumn SelectAll="false"
                                                        SelectChildren="false"
                                                        CheckBoxOnlySelection="true"
                                                        Width="64px" />

                                <TreeListColumn Field="Name" Title="Name" Expandable="true">
                                    <Template>
                                        @{
                                            var item = context as Gsi.Customer.Models.Group;
                                            <img height="32" width="32" src="@item.ImageUrl" />
                                            @item.Name
                                        }
                                    </Template>
                                </TreeListColumn>
                            </TreeListColumns>
                        </TelerikTreeList>

Joel
Top achievements
Rank 3
Bronze
Iron
Iron
 updated answer on 15 Jul 2025
0 answers
15 views
Is it possible to implement the logic for handling the "Send" button click in the email sending window? I want to notify the user when the email has been sent and display a loading indicator to prevent user interaction with the interface, as sending emails can sometimes take a while.
Sherzod
Top achievements
Rank 1
Iron
 asked on 15 Jul 2025
2 answers
92 views
When building the application in Release configuration and navigating to the page containing the ReportViewer component, the following error is thrown:

“Telerik.Blazor.Components.TelerikWindow does not have a property matching the name ‘Centered’.”
at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.ThrowForUnknownIncomingParameterName(Type targetType, String parameterName) at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target) at Microsoft.AspNetCore.Components.ParameterView.SetParameterProperties(Object target) at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters) at Telerik.Blazor.Components.TelerikWindow.SetParametersAsync(ParameterView parameters) at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)

This problem does not occur in Debug mode and was not present in earlier builds. The affected page uses both the ReportViewer component and the SendEmailDialogSettings. For reference, the project is targeting .NET 8.0 and depends on:

• Telerik.UI.for.Blazor (v9.1.0)
• Telerik.ReportViewer.BlazorNative (v19.1.25.521)

The page:
    <TelerikTabStrip TabPosition="TabPosition.Top" TabAlignment="TabStripTabAlignment.Start">

        <TabStripTab Title="Sink">
            <ReportViewer ServiceType="@ReportViewerServiceType.REST"
            ServiceUrl="@ReportServerUrl"
                @bind-ReportSource="@ReportSourceOrganisations"
                @bind-ScaleMode="@ScaleMode"
                @bind-ViewMode="@ViewMode"
                @bind-ParametersAreaVisible="@ParametersAreaVisible"
                @bind-DocumentMapVisible="@DocumentMapVisible"
                @bind-Scale="@Scale"
                PageMode="@PageMode.ContinuousScroll"
                PrintMode="@PrintMode.AutoSelect"
                KeepClientAlive="true"
                EnableSendEmail="true"
                Height="900px"
                Width="100%">
                <ReportViewerSettings> 
                    <SendEmailDialogSettings 
                    From="@From"
                    To="@Emails"
                    Cc="@CarbonCopyEmail"
                    Subject="@Subject"
                    Format="XLSX"
                    Body="<br/> <br/> Best regards, </br>">
                    </SendEmailDialogSettings>
                </ReportViewerSettings>
            </ReportViewer>
        </TabStripTab>
    </TelerikTabStrip>
Sherzod
Top achievements
Rank 1
Iron
 answered on 14 Jul 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?