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..

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

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.

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

                <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>

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>

when i provide hardcoded data chart gets populated but on providing record from db the chart gets blank. 
this is my raozr page 
"    <div class="row ">
        <div class="col-12">
            <div id="chart-section" class="card chart-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-project-diagram me-2 text-primary"></i>
                            Deal Flow Analysis
                        </h5>
                     @*    <div class="d-flex gap-2">
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-expand-arrows-alt"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-cog"></i>
                            </button>
                        </div> *@
                    </div>
                    <TelerikSankey Data="@Data">

                        <SankeyLinks ColorType="@SankeyLinksColorType.Static"></SankeyLinks>
                        <SankeyLabels>
                            <SankeyLabelsStroke Color="none"></SankeyLabelsStroke>
                        </SankeyLabels>
                    </TelerikSankey>
                </div>
            </div>
        </div>
    </div>"
this is how i am binding my data 
"       private void GenerateSankeyData()
       {
           if (hubspotDealStagesDtos == null || !hubspotDealStagesDtos.Any() || hubDealData == null)
               return;

           var newNodes = new SankeyDataNodes();
           var newLinks = new SankeyDataLinks();

           
           var orderedStages = hubspotDealStagesDtos.OrderBy(s => s.DisplayOrder).ToList();
           foreach (var stage in orderedStages)
           {
               newNodes.Add(new SankeyDataNode
               {
                   Id = stage.HubspotId,
                   Label = new SankeyDataNodeLabel { Text = stage.Label }
               });
           }

           foreach (var group in hubDealData.GroupBy(x => x.DealStage))
           {
               if (!int.TryParse(group.Key.ToString(), out int validId))
                   continue;

               double value = selectedViewBy == "value"
                   ? group.Sum(x => x.Amount)
                   : group.Count();

               newLinks.Add(new SankeyDataLink
               {
                   SourceId = 0,       

                  TargetId = validId,
                   Value = value
               });
           }

           Data.Nodes.Clear();
           Data.Links.Clear();

           foreach (var node in newNodes)
               Data.Nodes.Add(node);

           foreach (var link in newLinks)
               Data.Links.Add(link);

           StateHasChanged();
       }"
need help in this regard