The problem is when filtering programmatically, the X that is normally used to clear the search box disappears.
I am following the Telerik guide here. https://docs.telerik.com/blazor-ui/components/grid/filter/searchbox
The problem is actually demonstrated in the example from that page.
Filtering by typing:
Filtering programatically:
Thanks.
When filtering using a GridSearchBox - to filter across all columns, we have an issue where if you change a GridColumns Visible attribute to false that row will still be visible in the grid results even though it no longer matches the filter.
Take this snippet for example: Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor.
1. Use Search box and search for a Name. e.g "Chang"
2. Click "Toggle Name Visibility" button
Expected: Since Name column is now hidden, the column should no longer be used in filter and the row should no longer be displayed. In reference to the GridSearchBox: https://docs.telerik.com/blazor-ui/components/grid/filter/searchbox#filter-from-code where it's mentioned that the search box will filter only on columns that are visible. It doesnt seem to refresh the filter.
Actual: Row still displayed even though it no longer matches filter
Just wanting to raise this as an issue and also hoping you may know a potential work-around for this?
A potential work-around I have tried is re-applying the existing filter in the search box by following documentation here in the "Filter From Code" section: https://docs.telerik.com/blazor-ui/components/grid/filter/searchbox#filter-from-code
While I am able to apply a filter from code I cannot seem to retrieve the value that is currently in the search box as I want to reuse it. How can I achieve this with a GridSearchBox? There doesnt seem to be a property available on the GridSearchBox component for binding it's value. Would I need to create a custom filter input to achieve this?
Hello,
Please consider a Grid feature that changes the component layout on mobile devices or narrow screens. The idea is to switch the column layout to a card layout or anything similar to this example: https://css-tricks.com/responsive-data-tables/
It is possible to implement a similar behavior with the Telerik Blazor Grid and MediaQuery components, but it requires reusing the column titles in the CSS code: https://blazorrepl.telerik.com/GnYPmHFR176Jg5Yg02
===
Telerik Blazor team: Everyone who is interested in this feature, please vote for it to help us prioritize. Also, share your opinion about which Grid features you strictly need in the "mobile" layout and which ones you are ready to sacrifice. Some features don't make sense in a card / listview layout anyway, but still, the mobile-friendly Grid may require completely different HTML markup and UX, so some features may need to be completely revamped.
I am trying to display a related virtual entity from an object in Grid. The List of objects is loaded using Entity Framework Core. I am certain that the related entities are loaded;
The transactions object that is returned ultimately to the TelerikGrid.Data definitely contain the related fields (checked with breakpoint).
<TelerikGrid @ref="@SafexTransactionGrid"
Data=@SafexContractTransactionGridData
ConfirmDelete="true"
Pageable="true"
Groupable="true"
Sortable="true"
FilterMode="GridFilterMode.FilterMenu"
Resizable="true"
Reorderable="true"
EditMode="GridEditMode.Popup"
SelectionMode="GridSelectionMode.Multiple"
PageSize="15"
Navigable="true">
<GridColumns>
...
<GridColumn Field="@nameof(SafexContractTransaction.Trader.Name)" Title="Trader Name" Editable="false"/>
...
</GridColumns>
</TelerikGrid>
@code {
private List<SafexContractTransaction> SafexContractTransactionGridData
{
get
{
// returns all the data including populated Trader property
return FourtyTwoUnitOfWork.SafexContractTransactionRepo.GetAll(SafexContractGrid.SelectedItems);;
}
}
}
private TelerikGrid<SafexContractTransaction> SafexTransactionGrid { get; set; }
}
Yet when the grid is displayed it does not contain the property.
How can I solve this?
Problem Statement:
We have the following blazor grid:
We have enabled the GridColumnMenuSettings
Now when we open the column chooser it does not disable for the last option.
When we don't have the GridCheckboxColumn then it works as intended
The last column option is disabled
Expected Result : We don't want the check box column to be shown in the column chooser and the last option to be unchecked in the column chooser needs to be disabled.
@* Use the Template to render the list of columns and add some custom styles *@
<TelerikGrid Data="@MyData"
Pageable="true"
PageSize="5"
Width="700px"
FilterMode="@GridFilterMode.FilterMenu"
Sortable="true"
ShowColumnMenu="true">
<GridSettings>
<GridColumnMenuSettings Sortable="true"
Lockable="false"
FilterMode="@ColumnMenuFilterMode.None" />
</GridSettings>
<GridColumns>
<GridCheckboxColumn Width="80px" HeaderClass="header-select-all" />
<GridColumn Field="@(nameof(SampleData.Id))" Width="80px" Title="Id" Id="id-column-id" />
<GridColumn Field="@(nameof(SampleData.FirstName))" Title="First Name" Id="firstname-column-id" />
<GridColumn Field="@(nameof(SampleData.LastName))" Title="Last Name" Id="lastname-column-id" />
<GridColumn Field="@(nameof(SampleData.CompanyName))" Title="Company" Id="companyname-column-id" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Id="team-column-id" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Id="hiredate-column-id" />
</GridColumns>
</TelerikGrid>
@code {
public string TextboxValue { get; set; } = string.Empty;
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
{
Id = x,
FirstName = $"FirstName {x}",
LastName = $"LastName {x}",
CompanyName = $"Company {x}",
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
});
public class SampleData
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string CompanyName { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}
}
I have recently encountered an accessibility issue with the grid popup editor where the labels for the generated fields are not linked to their respective editor. It seems that the label does have a "for" attribute that is the same as the column title which I expect, but the Id of the input does not get set to the same thing. I can't see any option to make the association happen automatically.
===
ADMIN EDIT
===
A possible option for the time being is to use a custom popup edit form. You may either declare your desired custom content for the form and link the labels to their respective inputs or use the Form component with the field autogeneration feature which will automatically link the labels to the inputs.
In a grouped Grid with Incell editing if I collapse all groups and then expand one to edit an item in it, once I press Enter to complete the editing all groups expand.
Please add option for persisting the Collapsed State of the groups.
---I have the foreign key issue that is described here:
https://docs.telerik.com/blazor-ui/knowledge-base/grids-foreign-key
I am working with your grid and trying to implement the filter template. I am using the sample code on this page under the section Filter Menu Template:
https://docs.telerik.com/blazor-ui/components/grid/templates/filter
For the text to display I want to use a List of objects that have 2 properties: an id and a text to display.
I have used the grouping header template and the editor template successfully with the foreign key.
My issue with the filter template is as follows:
1. Run the attached project
2. drop down the list
3. select one item
4. press Filter (this works fine)
5. drop down the list
6. unselect the selected field
7. press Filter (this does not work – the list is still filtered)
I have enabled the Column Menu and I am using a Filter Menu Template with only one TextBox. With this setup I am able to only type one letter before the Filter Context is reset.
Reproduction: https://blazorrepl.telerik.com/wnYxagGE14oxMFH659.
When using the Filter Menu inside the Column Menu filter value is reset if Rebind is called. For reference, if using FIlter Row or a standalone Filter Menu value is not reset upon invoking Rebind.
Reproduction: https://blazorrepl.telerik.com/mdOJYHas48vPCPUv47.
Consider this test page: https://blazorrepl.telerik.com/cSEQOTQY53LRL4je36
This happens only when using a column menu - ShowColumnMenu="true".
===
A possible workaround is to use a FilterButtonsTemplate and clear the filters programmatically if the filter descriptor is empty:
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<TelerikGrid TItem="@Employee"
OnRead="@OnReadHandler"
Pageable="true"
FilterMode="@GridFilterMode.FilterMenu"
FilterMenuType="@FilterMenuType.CheckBoxList"
ShowColumnMenu="true"
Height="400px">
<GridColumns>
<GridColumn Field="@(nameof(Employee.EmployeeId))" Filterable="false" />
<GridColumn Field="@nameof(Employee.Name)">
<FilterMenuTemplate Context="context">
<TelerikCheckBoxListFilter Data="@NameOptions"
Field="@(nameof(NameFilterOption.Name))"
@bind-FilterDescriptor="@context.FilterDescriptor">
</TelerikCheckBoxListFilter>
</FilterMenuTemplate>
<FilterMenuButtonsTemplate Context="filterContext">
<TelerikButton OnClick="@( async () => await ApplyFilterAsync(filterContext) )"
ThemeColor="primary">Filter</TelerikButton>
<TelerikButton OnClick="@( async () => await ClearFilterAsync(filterContext) )">Clear</TelerikButton>
</FilterMenuButtonsTemplate>
</GridColumn>
<GridColumn Field="@nameof(Employee.Team)" Title="Team">
<FilterMenuTemplate Context="context">
<TelerikCheckBoxListFilter Data="@TeamsList"
Field="@(nameof(TeamNameFilterOption.Team))"
@bind-FilterDescriptor="@context.FilterDescriptor">
</TelerikCheckBoxListFilter>
</FilterMenuTemplate>
</GridColumn>
<GridColumn Field="@nameof(Employee.IsOnLeave)" Title="On Vacation" />
</GridColumns>
</TelerikGrid>
@code {
List<Employee> AllGridData { get; set; }
#region custom-filter-data
List<TeamNameFilterOption> TeamsList { get; set; }
List<NameFilterOption> NameOptions { get; set; }
private async Task ApplyFilterAsync(FilterMenuTemplateContext filterContext)
{
var hasFilters = filterContext.FilterDescriptor.FilterDescriptors.OfType<FilterDescriptor>().Any(x => !string.IsNullOrEmpty(x.Value.ToString()));
if (hasFilters)
{
await filterContext.FilterAsync();
}
else
{
await filterContext.ClearFilterAsync();
}
}
private async Task ClearFilterAsync(FilterMenuTemplateContext filterContext)
{
await filterContext.ClearFilterAsync();
}
//obtain filter lists data from the data source to show all options
async Task GetTeamOptions()
{
if (TeamsList == null) // sample of caching since we always want all distinct options,
//but we don't want to make unnecessary requests
{
TeamsList = await GetNamesFromService();
}
}
async Task<List<TeamNameFilterOption>> GetNamesFromService()
{
await Task.Delay(500);// simulate a real service delay
// this is just one example of getting distinct values from the full data source
// in a real case you'd probably call your data service here instead
// or apply further logic (such as tie the returned data to the data the grid will have according to your business logic)
List<TeamNameFilterOption> data = AllGridData.OrderBy(z => z.Team).Select(z => z.Team).
Distinct().Select(t => new TeamNameFilterOption { Team = t }).ToList();
return await Task.FromResult(data);
}
async Task GetNameOptions()
{
if (NameOptions == null)
{
NameOptions = await GetNameOptionsFromService();
}
}
async Task<List<NameFilterOption>> GetNameOptionsFromService()
{
await Task.Delay(500);// simulate a real service delay
List<NameFilterOption> data = AllGridData.OrderBy(z => z.Name).Select(z => z.Name).
Distinct().Select(n => new NameFilterOption { Name = n }).ToList();
return await Task.FromResult(data);
}
#endregion custom-filter-data
async Task OnReadHandler(GridReadEventArgs args)
{
//typical data retrieval for the grid
var filteredData = await AllGridData.ToDataSourceResultAsync(args.Request);
args.Data = filteredData.Data as IEnumerable<Employee>;
args.Total = filteredData.Total;
}
protected override async Task OnInitializedAsync()
{
AllGridData = new List<Employee>();
var rand = new Random();
for (int i = 1; i <= 15; i++)
{
AllGridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3,
IsOnLeave = i % 2 == 0
});
}
await GetTeamOptions();
await GetNameOptions();
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public bool IsOnLeave { get; set; }
}
// in this sample we use simplified models to fetch less data from the service
// instead of using the full Employee model that has many fields we do not need for the filters
public class TeamNameFilterOption
{
public string Team { get; set; }
}
public class NameFilterOption
{
public string Name { get; set; }
}
}
When using the TelerikCheckBoxListFilter component in a FilterMenuTemplate, it does render a checkbox with a blank label, but selecting it does not generate a filter descriptor.
For reference, the built-in CheckBoxList filtering correctly filters null values.
I want to filter a Grid by DateTimeOffset? field
===ADMIN EDIT===
There are two possible options:
1. Use a DTO in which you have a DateTime field converted as desired by your app from the DateTimeOffset. Filtering, sorting, editing, and grouping on DateTime values are supported out-of-the-box.
REPL example that demonstrates this approach.
2. Use the Grid Filter Template. As a filter editor, you can use the DateTimePicker component, which supports the DateTimeOffset type.
REPL example that demonstrates this approach.
I have a Grid with Navigable="true" and FilterRow. If I focus a string filter input and press the left/right arrow keys, the focus moves away from the cell. This behavior also occurs when I press up/down arrows in numeric filter inputs.
Reproduction: https://blazorrepl.telerik.com/GcvPkekt36Mxgygv07.
I am using InCell Grid editing. I want to prevent an edit cell from closing on certain condition. However, when I cancel the update with args.IsCancelled = true in OnUpdate, the user can still close the edited cell with Enter or Tab. This is inconsistent with inline or popup editing.
===
A possible workaround is to cancel both OnUpdate and the subsequent OnEdit.
https://blazorrepl.telerik.com/QykMHkks10APuDLQ47
@using System.ComponentModel.DataAnnotations
<TelerikGrid Data="@GridData"
EditMode="@GridEditMode.Incell"
OnEdit="@OnGridEdit"
OnUpdate="@OnGridUpdate">
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)" />
<GridColumn Field="@nameof(SampleModel.Min)" />
<GridColumn Field="@nameof(SampleModel.Max)" />
</GridColumns>
</TelerikGrid>
<TelerikNotification @ref="@NotificationRef"
HorizontalPosition="@NotificationHorizontalPosition.Center"
VerticalPosition="@NotificationVerticalPosition.Top" />
@code {
private TelerikNotification? NotificationRef { get; set; }
private List<SampleModel> GridData { get; set; } = new();
private bool ShouldCancelOnEdit { get; set; }
private int LastId { get; set; }
private void OnGridEdit(GridCommandEventArgs args)
{
if (ShouldCancelOnEdit)
{
ShouldCancelOnEdit = false;
args.IsCancelled = true;
}
}
private void OnGridUpdate(GridCommandEventArgs args)
{
var updatedItem = (SampleModel)args.Item;
if (updatedItem.Min > updatedItem.Max)
{
NotificationRef?.Show(new NotificationModel()
{
ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
Text = "Min must be smaller than Max"
});
args.IsCancelled = true;
ShouldCancelOnEdit = true;
}
else
{
var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);
if (originalItemIndex != -1)
{
GridData[originalItemIndex] = updatedItem;
}
ShouldCancelOnEdit = false;
}
}
protected override void OnInitialized()
{
for (int i = 1; i <= 5; i++)
{
GridData.Add(new SampleModel()
{
Id = ++LastId,
Name = $"SampleModel {LastId}",
Min = Random.Shared.Next(1, 10),
Max = Random.Shared.Next(11, 20)
});
}
}
public class SampleModel
{
public int Id { get; set; }
[Required]
public string Name { get; set; } = string.Empty;
public int Min { get; set; }
public int Max { get; set; }
}
}