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 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 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; }
}
}
I am using Grid with Cell Selection enabled and DragToSelect="true". If I define a Template inside the GridColumn tag and I add a div inside that, SelectedCellsChanged event handler does not trigger if I start dragging by clicking on the div or if I drop inside that one.
Reproduction: https://blazorrepl.telerik.com/myasmnvQ46Jt7k5n50.
===
ADMIN EDIT
===
The only workaround for the time being is to disable the drag selection and let the user only select cells by clicking them. The cells will be selected even if the user clicks on the custom <div> element inside the template.
Currently the GridSearchBox is able to search in all of the visible columns but when it comes to searching in multiple columns split by space it does not work. Or even two different strings in the same cell.
Example:
If from the above grid, I type in the search box, "LT" three products will be returned but if I type "LT LD" it should return two products but the results set comes with nothing.
I have implemented CustomSearchBox component as a solution in the interim to achieve this functionality. But it would be a worthwhile effort to have this functionality out of the box.
Thank you.
Sheraz
Initial groups are duplicated in version 6.1.0. The OnStateInit event fires twice and the group descriptors are added twice. The problem occurs only when using <GridAggregates>.
The workaround is to clear the GroupDescriptors collection on OnStateInit.
@using Telerik.DataSource
<h2>No Aggregates</h2>
<p><code>OnStateInitCounter1:</code> @OnStateInitCounter1</p>
<TelerikGrid Data="@GridData"
TItem="@SampleModel"
Groupable="true"
OnStateInit="@OnGridStateInit1">
<GridAggregates>
</GridAggregates>
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)" />
<GridColumn Field="@nameof(SampleModel.GroupName)" />
</GridColumns>
</TelerikGrid>
<h2>With Aggregates</h2>
<p><code>OnStateInitCounter2:</code> @OnStateInitCounter2</p>
<TelerikGrid Data="@GridData"
TItem="@SampleModel"
Groupable="true"
OnStateInit="@OnGridStateInit2">
<GridAggregates>
<GridAggregate Field="@nameof(SampleModel.Name)" Aggregate="@GridAggregateType.Count" />
</GridAggregates>
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)" />
<GridColumn Field="@nameof(SampleModel.GroupName)" />
</GridColumns>
</TelerikGrid>
<h2>With Aggregates and Workaround</h2>
<p><code>OnStateInitCounter3:</code> @OnStateInitCounter3</p>
<TelerikGrid Data="@GridData"
TItem="@SampleModel"
Groupable="true"
OnStateInit="@OnGridStateInit3">
<GridAggregates>
<GridAggregate Field="@nameof(SampleModel.Name)" Aggregate="@GridAggregateType.Count" />
</GridAggregates>
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)" />
<GridColumn Field="@nameof(SampleModel.GroupName)" />
</GridColumns>
</TelerikGrid>
@code {
private int OnStateInitCounter1 { get; set; }
private int OnStateInitCounter2 { get; set; }
private int OnStateInitCounter3 { get; set; }
private void OnGridStateInit1(GridStateEventArgs<SampleModel> args)
{
++OnStateInitCounter1;
args.GridState.GroupDescriptors.Add(new GroupDescriptor
{
Member = nameof(SampleModel.GroupName)
});
}
private void OnGridStateInit2(GridStateEventArgs<SampleModel> args)
{
++OnStateInitCounter2;
args.GridState.GroupDescriptors.Add(new GroupDescriptor
{
Member = nameof(SampleModel.GroupName)
});
}
private void OnGridStateInit3(GridStateEventArgs<SampleModel> args)
{
++OnStateInitCounter3;
args.GridState.GroupDescriptors = new List<GroupDescriptor>();
// OR
args.GridState.GroupDescriptors.Clear();
args.GridState.GroupDescriptors.Add(new GroupDescriptor
{
Member = nameof(SampleModel.GroupName)
});
}
private List<SampleModel> GridData { get; set; } = new();
protected override void OnInitialized()
{
for (int i = 1; i <= 4; i++)
{
GridData.Add(new SampleModel()
{
Id = i,
Name = $"Name {i}",
GroupName = $"Group {i % 2 + 1}"
});
}
}
public class SampleModel
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string GroupName { get; set; } = string.Empty;
}
}
When trying to make a cell selection using Shift + Click, the clicked cells are not correctly added to the selection range. When clicking on adjacent cells, the selection range gets misplaced resulting in deselection of the first selected cells.
I have a filterable Grid with Enum values. I am saving the state in the OnStateChanged so I can then restore it on future page loads (similar to the approach here).
When trying to restore the deserialized state in the OnStateInit, the Grid throws:
Unhandled exception rendering component: Specified cast is not valid.
Reproduction: https://blazorrepl.telerik.com/QSaiaDkq55RfazF402.
===
ADMIN EDIT
===
At the time of writing (UI for Blazor 6.1.0), the Grid only supports int as an underlying type of the Enum values. When the state is deserialized, the Enum values are returned as short and this causes the issue.
To handle the scenario for the time being you can modify the state object before setting it to the Grid. Loop through the filter descriptors in the state and convert the filter value of the columns bound to Enum, so the value type in the state is the supported int.
Here is a basic example: https://blazorrepl.telerik.com/woaCOZlT29E05lpL45.
If I group by a column, and one of the values in the column contains a forward slash ( '/'), then the value will not be grouped, the Grid ignores it.
The issue seems to occur only when LoadGroupsOnDemand is set to true.
===
ADMIN EDIT
===
A possible option for the time being is to disable the LoadGroupsOnDemand feature.
Based on some program logic and conditions I want to programmatic scroll to a chosen row so the user can see a specific row. For example:
- Scroll to a selected row
- Scroll to a record, based on its Id
-Scroll to the top of the Grid when the user adds a new item
- Scroll to an expanded item in hierarchical Grid
=====ADMIN EDIT======
We have a knowledge-based article that showcases how to scroll the Grid to the selected row. This article links to a sample GitHub application where you see code samples. If you need to scroll to another row, you can use a similar approach.
The Grid will throw a JavaScript error if the user wants to group and drops a column header near the edges of the grouping header or between existing group chips.
This is a regression in version 6.0.0.
REPL test page: https://blazorrepl.telerik.com/wouBdbvw36O4UaAR14
A possible workaround is to remove the empty space, which triggers the error, so that users cannot drop on it:
CSS
.k-grid .k-grouping-header {
padding: 0;
border-bottom-width: 0;
gap: 0;
}
.k-grid .k-grouping-header::before {
margin: 0;
}
.k-grid .k-grouping-header .k-grouping-drop-container {
margin: 0;
}
As of UI for Blazor 6.0.2 OnRead event handler is triggered twice if Grid has defined the GridAggregates Parameter (if you try defining Grid without the GridAggregates Parameter, the OnRead event handler is caller once). In the first call the args.Request.Aggregates value is empty, while in the second one that field is populated correctly.
The behavior may be related to the fix of this issue but I'd prefer the Grid to fire OnRead only once if possible.
===
ADMIN EDIT
===
Currently, OnRead fires twice only on initial load. A possible optimization that you can implement on your side is to toggle a flag based on which you can process the data only once. You can do that in the second OnRead as this is when the AggregateResults field of the request gets populated.
Here is a basic example: https://blazorrepl.telerik.com/GokrRkYX536x1mSF35.
The Grid automatically scrolls to top when adding a new item in inline or incell edit mode. However, when the Grid has locked (frozen) columns, this scrolling doesn't occur.
Here is a test page with a JavaScript workaround in the OnAdd event:
@using System.ComponentModel.DataAnnotations
@inject IJSRuntime js
<label><TelerikCheckBox @bind-Value="@EnableScrollWorkaround" /> Enable Workaround</label>
<TelerikGrid Data="@GridData"
EditMode="@GridEditMode.Inline"
OnAdd="@OnGridAdd"
OnUpdate="@OnGridUpdate"
OnCreate="@OnGridCreate"
Width="700px"
Height="400px"
Class="grid-class">
<GridToolBarTemplate>
<GridCommandButton Command="Add">Add Item</GridCommandButton>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="@nameof(Product.Name)" Width="200px" Locked="true" />
<GridColumn Field="@nameof(Product.Price)" Width="200px" />
<GridColumn Field="@nameof(Product.Quantity)" Width="200px" />
<GridCommandColumn Width="200px" Locked="true">
<GridCommandButton Command="Edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" ShowInEdit="true">Save</GridCommandButton>
<GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
<script suppress-error="BL9992">
function scrollGridToTop() {
var gridContentArea = document.querySelector(".grid-class .k-grid-content");
if (gridContentArea) {
gridContentArea.scrollTop = 0;
}
}
</script>
@code {
private bool EnableScrollWorkaround { get; set; } = true;
private List<Product> GridData { get; set; } = new();
private int LastId { get; set; }
private async Task OnGridAdd(GridCommandEventArgs args)
{
if (EnableScrollWorkaround)
{
await js.InvokeVoidAsync("scrollGridToTop");
}
}
private void OnGridUpdate(GridCommandEventArgs args)
{
var updatedItem = (Product)args.Item;
var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);
if (originalItemIndex != -1)
{
GridData[originalItemIndex] = updatedItem;
}
}
private void OnGridCreate(GridCommandEventArgs args)
{
var createdItem = (Product)args.Item;
createdItem.Id = ++LastId;
GridData.Insert(0, createdItem);
}
protected override void OnInitialized()
{
for (int i = 1; i <= 30; i++)
{
GridData.Add(new Product()
{
Id = ++LastId,
Name = $"Product {LastId}",
Quantity = (short)Random.Shared.Next(0, 1000),
StartDate = DateTime.Now.AddDays(-Random.Shared.Next(60, 1000)),
IsActive = LastId % 4 > 0
});
}
}
public class Product
{
public int Id { get; set; }
[Required]
public string Name { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
public DateTime StartDate { get; set; }
public bool IsActive { get; set; }
}
}
In a navigable Grid with incell edit, if a column has Editable=false the tabbing behavior is as follows: while the user is editing the previous editable cell pressing tab results in skipping the non-editable cell and moving the focus to the next editable cell to open it for edit.
However, the behavior is different when cancelling the editing through the OnEdit event. In this case, while the user is editing the previous editable cell pressing tab results in exiting the edit and keeping the focus to the cell. Subsequent tab press moves to focus to the pager.
Reproduction: https://blazorrepl.telerik.com/mykLFEFJ14mlqei429.
===
ADMIN EDIT
===
A possible option for the time being is to cancel the edit as shown in the example above but also force the Grid to enter edit of the next editable cell. You can do that through the State: Enter and Exit Grid Edit Mode Programmatically.
Here is a basic example, you may adjust it as needed to fit your exact requirements: https://blazorrepl.telerik.com/mSuLPAFP05HRs7B555.
The Grid shows row skeletons in virtual scrolling scenarios when:
- The Grid is scrolled half a row, but the Skip value in the Grid state is still zero.
- The user filters while the Grid PageSize is greater than the total item count.
Test page: https://blazorrepl.telerik.com/mSkBaXkC50cEXmMB42
A possible workaround is to:
- Scroll the Grid to the top with JavaScript. This will trigger a new data request automatically.
- Reset the Grid state if the Grid is not scrolled, which will again trigger a new data request.
Example: https://blazorrepl.telerik.com/cSYrvEYW19htMCD934
Another possible solution is to disable the virtual scrolling at runtime if the total item count is too small: https://blazorrepl.telerik.com/mSOhvYuW47DaMk6c00
We have a grid with a GridCheckboxColumn that we have configured through a '.unselectable-row' style so that certain elements cannot be selected (those elements with a padlock in the second column cannot be selected).
The grid works correctly in isolation, but when we add a TelerikLoaderContainer that is displayed during data loading process, the grid doesn't working properly: it is possible to select all the enabled elements of the grid using the button in the header of the checkbox column. However it is not possible to deselect them from the button in the header of the checkbox column when there is any unselectable element.
Here it is a link to REPL with a reproducible example: https://blazorrepl.telerik.com/GyYhYXPI24gIYgIJ03
To reproduce the problem, you sholud select all grid elements from the checkbox column header button and try to deselect them. You will not be able to deselect all the elements.
Now comment the LoaderContainer component and repeat the test. You will see that now it is possible to deselect correctly all the elements.
How can we deselect all the elements from the header while keeping the loadercontainer?