Disabling the LoaderContainer prevents the Incell edit mode to work as expected
<AdminEdit>
As a workaround, set the Navigable attribute to true.
</AdminEdit>
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?
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.
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 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.
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 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; }
}
}
The select-all functionality of the Grid is slow in WebAssembly apps, when SelectAllMode="GridSelectAllMode.All".
A possible workaround is to use a CheckBoxColumn HeaderTemplate.
Error:
blazor.server.js:19 [2021-02-03T06:17:43.996Z] Error: System.NullReferenceException: Object reference not set to an instance of an object.
Example:
private string SerializedState; private void OnStateInitHandler(GridStateEventArgs<SampleData> args) { args.GridState = JsonSerializer.Deserialize<GridState<SampleData>>(SerializedState); }
Reason:
FilterDescriptors property MemberType = null.
Note:
Method TelerikGrid.SetState() works correctly.
---
ADMIN EDIT
A sample reproducible is attached.
The issue stems from the inability of the System.Text.Json serializer to work with fields of type "Type" and the filter descriptors have such a field to denote the type of the column. Whether it will be possible for the grid to work around needs to be researched in more detail, because the limitation comes from the framework.
Might be the same problem as the following thread that also offers a few workarounds one can consider: https://feedback.telerik.com/blazor/1505237-set-deserialized-grid-state-in-onstateinit-handler-cause-error-on-open-filter-menu-of-column-on-ui
---
With OnRead, AllPages cannot be exported because the grid Data only has the current page: https://docs.telerik.com/blazor-ui/components/grid/export/excel#notes:
If you are using the OnRead event, only the current page of data will be exported, because that's all the grid has at the time of the export action.
I load my data via "OnRead", because i need to implement pagination by myself, and I would like the export option to work with that too.
Currently, when there is a blank or null value, no text is rendered next to the CheckBox in the CheckBoxList filter. I want to be able to customize that and easily set my desired text. For example, "(Blanks)" as in Excel.