Hi - this one is a feature request, not a bug. :)
For the filter menu, when you enter a filter value, it would be nice if you could press enter to execute the filter instead of having to click "Filter."
The feature request is to be able to customize the GridCsvExportOptions and GridExcelExportOptions from the API methods -
It will be useful to be able to customize the columns and data to be exported.
===
Telerik edit:
A possible workaround is to click the built-in Grid export buttons with JavaScript. With this approach, you will be able to use the built-in export options and events. Here is a REPL example.
If LoadGroupsOnDemand="false", I am able to programmatically expand the groups through the state. However, this is not possible when loading group data on demand.
Please allow programmatically expanding the groups when LoadGroupsOnDemand="true". This should go together with an event (OnStateChanged?) that will fire when LOD groups are expanded or collapsed.
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:
Test page: https://blazorrepl.telerik.com/mSkBaXkC50cEXmMB42
A possible workaround is to:
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?
I have a grid with the excell Export. Now I have two custom Export buttons on the Page (Over and under the Grid).
Can I somehow trigger the Grid Excell Export command Manually?
---
ADMIN EDIT
Here is a workaround - a bit of JS to click the desired button and the second snippet shows how to invoke it from a blazor component and code.
<script>
function clickButton(selector) {
var btn = document.querySelector(selector);
if (btn && btn.click) {
btn.click();
}
}
</script>
@inject IJSRuntime _js
<style>
/* hide the built-in button if you like */
.myExcelExportButton {
display:none;
}
</style>
<button @onclick="@MyExternalExportTrigger">my external export button</button>
<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
FilterMode="@GridFilterMode.FilterRow" Groupable="true"
Class="@GridClass">
<GridToolBar>
<GridCommandButton Class="@ExportBtnClass" Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
<label><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
</GridToolBar>
<GridExport>
<GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
</GridExport>
<GridColumns>
<GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
<GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
<GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
<GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
<GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
<GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
</GridColumns>
</TelerikGrid>
@code {
// cascade through classes on the grid and/or on the built-in button to click it with JS
// so that it can invoke the built-in export operations
string GridClass { get; set; } = "MyGrid";
string ExportBtnClass { get; set; } = "myExcelExportButton";
async Task MyExternalExportTrigger()
{
var selector = $".{GridClass} .k-header .{ExportBtnClass}";
await _js.InvokeVoidAsync("clickButton", selector);
}
List<SampleData> GridData { get; set; }
bool ExportAllPages { get; set; }
protected override void OnInitialized()
{
GridData = Enumerable.Range(1, 100).Select(x => new SampleData
{
ProductId = x,
ProductName = $"Product {x}",
UnitsInStock = x * 2,
Price = 3.14159m * x,
Discontinued = x % 4 == 0,
FirstReleaseDate = DateTime.Now.AddDays(-x)
}).ToList();
}
public class SampleData
{
public int ProductId { get; set; }
public string ProductName { get; set; }
public int UnitsInStock { get; set; }
public decimal Price { get; set; }
public bool Discontinued { get; set; }
public DateTime FirstReleaseDate { get; set; }
}
}
---
In a filterable Grid, if a column is not bound to a field from the model the Grid uses, it throws with:
Error: System.ArgumentNullException: Value cannot be null. (Parameter 'nullableType')
Reproduction: https://blazorrepl.telerik.com/GyEUlFEs04AUJoJ601.
The issue is reproducible :
===
ADMIN EDIT
===
A possible workaround for the time being is to set the FieldType of the column: https://blazorrepl.telerik.com/wSugvFui10jhcpZy00.
I am using a ui framework that has some elements on the body with z-indexes > 1000. Eg a side menu. I am using the Telerik Grid. The Column Menus use the animation container, and because the animation containers get placed directly on the body with a z-index of 2, they always appear behind this side menu.
I want to be able to set a CSS to the main wrapping element of the Column Menu (<div class="k-animation-container>), so I can specifically set the z-index for only Column Menu instances of the animation container.
---
ADMIN EDIT
Here is a workaround - using a bit of JS to clear the checked state of the checkbox element when you clear the SelectedItems collection:
At the end of this post you can find attached a sample project that showcases a more complex scenario where you may want to keep some rows selected but cancel the selection of others (in that sample, only one row with a given ItemType can be selected). It shows how you can get the index in the rendering of a particular row to use for a slightly modified version of the JS function.
@inject IJSRuntime _js
@* Move JavaScript code to a separate JS file in production *@
<script suppress-error="BL9992">
function uncheckGrid() {
var checkboxes = document.querySelectorAll(".no-select .k-grid-checkbox");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
}
</script>
<style>
.no-select {
cursor: not-allowed;
}
.no-select .k-checkbox {
pointer-events: none;
}
</style>
<TelerikGrid Data=@GridData
SelectionMode="@GridSelectionMode.Multiple"
SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
SelectedItems="@SelectedEmployees"
Pageable="true"
Height="400px">
<GridColumns>
<GridCheckboxColumn SelectAll="true" OnCellRender="@OnGridCellRender" />
<GridColumn Field="@nameof(Employee.Name)" />
<GridColumn Field="@nameof(Employee.Team)" />
<GridColumn Field="@nameof(Employee.Active)" />
</GridColumns>
</TelerikGrid>
@if (SelectedEmployees != null)
{
<ul>
@foreach (Employee employee in SelectedEmployees)
{
<li>
@employee.Name
</li>
}
</ul>
}
@code {
private List<Employee> GridData { get; set; } = new List<Employee>();
private IEnumerable<Employee> SelectedEmployees { get; set; } = new List<Employee>();
private void OnGridCellRender(GridCellRenderEventArgs args)
{
var product = (Employee)args.Item;
if (!product.Active)
{
args.Class = "no-select";
}
}
protected void OnSelect(IEnumerable<Employee> newSelected)
{
var validItemsToSelect = newSelected.Where(x => x.Active);
SelectedEmployees = validItemsToSelect;
if (validItemsToSelect.Count() < newSelected.Count())
{
_js.InvokeVoidAsync("uncheckGrid");
}
}
protected override void OnInitialized()
{
for (int i = 1; i <= 7; i++)
{
GridData.Add(new Employee()
{
EmployeeId = i,
Name = $"Employee {i}",
Team = $"Team {i % 3 + 1}",
Active = i % 2 == 0
});
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; } = string.Empty;
public string Team { get; set; } = string.Empty;
public bool Active { get; set; }
}
}
I have the following configuration:
Editor component in Grid EditorTemplate and the Grid editing mode is popup
Here is a REPL example https://blazorrepl.telerik.com/QeuUwsvb15sxbLuB04
The popup that opens when editing the Grid resizes when I type in the Editor
Steps to reproduce the issue:
1. Run the REPL example
2. Click the Edit button in the Grid
3. Resize the popup
4. Start to type something in the Editor
5. The popup resizes
I have a Grid using checkbox selection and when I un-check a row, the SelectedItemsChanged event is not firing. I'm using an async handler.
The problem appears to happen when a row is selected and then un-selected. The event is firing when it is selected but is not firing when it is un-selected.
<TelerikGrid Data="strategicLevelItems" SelectedItems="selectedStrategic" Width="100%" Height="500px"
ScrollMode="GridScrollMode.Scrollable" SelectionMode="GridSelectionMode.Multiple"
SelectedItemsChanged="@((IEnumerable<GetNavigationNodesModel> strategicItems) => OnStrategicSelectAsync(strategicItems))"
FilterMode="GridFilterMode.FilterRow">
<GridColumns>
<GridCheckboxColumn SelectAll="true" Width="40px" OnCellRender="@GridHelpers.CenterAlign" />
<GridColumn Field="@(nameof(GetNavigationNodesModel.Name))" />
</GridColumns>
</TelerikGrid>
private async Task OnStrategicSelectAsync(IEnumerable<GetNavigationNodesModel> selectedItems)
{
selectedStrategic = selectedItems;
var state = tacticalGrid.GetState();
var compositeFilter = new CompositeFilterDescriptor() { LogicalOperator = FilterCompositionLogicalOperator.Or };
foreach (var item in selectedItems)
{
compositeFilter.FilterDescriptors.Add(new FilterDescriptor()
{
Member = "ParentId",
Operator = FilterOperator.IsEqualTo,
Value = item.Id
});
}
state.FilterDescriptors.Clear();
state.FilterDescriptors.Add(compositeFilter);
await tacticalGrid.SetState(state);
}
Please add an attribute to Blazor GridColumn which allows to easily format data with the default .NET standard formats
e.g. <GridColumn Field="@(nameof(Item.Price))" Title="Price" Format="0#.##" />
It's a little bit annoying always having to define a template for this purpose.