Telerik Forums
UI for Blazor Forum
0 answers
2 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);
     }
 }
Davinder
Top achievements
Rank 1
 asked on 18 Jul 2025
1 answer
6 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
876 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
9 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
7 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
0 answers
8 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
 asked on 15 Jul 2025
2 answers
13 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
6 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
18 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
1 answer
9 views
How do none of your documentation examples show how to ensure a valid email address is entered?  How do I enforce the a@aaa.aa format?
Dimo
Telerik team
 answered on 14 Jul 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?