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)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
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'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 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?
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>