Hi,
how to select ALL items in the grid data source using GridCheckboxColumn in the grid header when grid is in Virtual scroll mode?
When I click on the GridCheckboxColumn in the grid header it selects only the items in the current visible page but I would like to select all items in the grid data source.
Selecting all items in the grid (not only visible ones) is a must have feature and current behavoiur is kind of misleading because the user would expect that all items are selected.
ADMIN EDIT: This has been available since 2.10.0 through the SelectAllMode parameter of the selection column.
I recently implemented a Datatable-based grid utilizing the new features/enhancements released in v2.15.0. One notable feature omission that I noticed was the lack of grouping support. I did notice that there was another support item that mentioned OnRead not working with Grouping, but was unsure if that was the reason for the issues I am having or not.
I am using the OnRead() event for building my source from the DataTable, as the demo for using a DataTable shows, and experience a similar issue to that in the referenced support item (empty rows in the grid after attempting grouping, or "nothing" happening, depending on how I try and configure the grid/logic).
Is there a way to do this now, or can this functionality be added?
I am using the Telerik UI for Blazor 2.13. The export excel does not work with it. I am using the exact code snippet from docs as below on my test page:
@* You can sort, group, filter, page the grid, resize and reodrder its columns, and you can click the
Export button to save the current data *@
@page "/test"
@using Telerik.Blazor.Components
<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
Groupable="true">
<GridToolBar>
<GridCommandButton Command="ExcelExport">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 {
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; }
}
}Whenever I click on the export button. It simply does not respond. I do see lot of http requests though :
Please let me know if you need anymore details.
---
ADMIN EDIT: Check the source code and comments in it from the following demo to see how to bind the grid to a DataTable: https://demos.telerik.com/blazor-ui/grid/data-table. You can also examine it offline - the entire demos project is available in the "demos" folder of your installation
The sample code snippet below will let the grid show data, but will not enable complex operations like filtering and sorting. Review the demo linked above for more details on the correct approach.
---
I would like to be able to supply a DataTable with an arbitrary amount of columns to the grid and display them all without declaring them all. This should also allow paging, sorting, filtering. At the moment binding to a DataTable is not supported, only IEnumerable collections are.
At the moment, here's the closest I can get, sorting and filtering throw errors so they are disabled.
@using System.Data@using Telerik.Blazor@using Telerik.Blazor.Components.Grid<button class="btn btn-primary" @onclick="@LoadData">Load Data</button>@if (@d != null){ <TelerikGrid Data=@d.AsEnumerable() TItem="DataRow" Sortable="false" Filterable="false" Pageable="true" PageSize="3" Height="400px"> <TelerikGridColumns> @foreach (DataColumn col in d.Columns) { <TelerikGridColumn Field="@col.ColumnName" Title="@col.ColumnName"> <Template> @((context as DataRow).ItemArray[col.Ordinal].ToString()) </Template> </TelerikGridColumn> } </TelerikGridColumns> </TelerikGrid>}@functions { DataTable d = null; void LoadData() { d = GetData(); } public DataTable GetData() { DataTable table = new DataTable(); table.Columns.Add("Product", typeof(string)); table.Columns.Add("Price", typeof(double)); table.Columns.Add("Quantity", typeof(int)); table.Columns.Add("AvailableFrom", typeof(DateTime)); table.Rows.Add("Product 1", 10.1, 2, DateTime.Now); table.Rows.Add("Product 2", 1.50, 10, DateTime.Now); table.Rows.Add("Product 3", 120.66, 5, DateTime.Now); table.Rows.Add("Product 4", 30.05, 10, DateTime.Now); return table; }}
Because the shape of our business objects is not something your grid is easily bound to, we are attempting to generate ExpandoOjbects on the fly and bind to them. In the picture below you can see that Id is not binding correctly. Name is showing up because a column Template was used and that seems to work fine. However, when attempting to use an EditorTemplate we get the RuntimeBinderException shown below.
@page "/dynamic-vendor"
In addition to more filtering options we would like to have the ability to use custom filter components instead of the built-in ones. For example, through a cell template for the filter row.
Please comment below with how you would like to see this integrate into the data source operations of the grid (for example, should it fire an event where you filter the data you pass to the grid, or should the grid expose some method/interface that you need to use).
Group by the third column - there will be no aggregate info:
<TelerikGrid Data="@myData" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Groupable="true">
<GridColumns>
<GridColumn Field="@nameof(SampleComplexObject.ID)" Title="ID"></GridColumn>
<GridColumn Field="@nameof(SampleComplexObject.Name)" Title="The Name"></GridColumn>
<GridColumn Title="First Nested Property" Field="SomeNavigationProperty.Field1">
<GroupFooterTemplate>
Count: @context.Count
</GroupFooterTemplate>
</GridColumn>
<GridColumn Field="SomeNavigationProperty.OtherField" />
</GridColumns>
<GridAggregates>
<GridAggregate Field="SomeNavigationProperty.Field1" Aggregate="@GridAggregateType.Count" />
</GridAggregates>
</TelerikGrid>
@code {
public class SampleComplexObject
{
public int ID { get; set; }
public string Name { get; set; }
public NestedObject SomeNavigationProperty { get; set; } // use this field name for data binding
}
public class NestedObject
{
public string Field1 { get; set; }
public string OtherField { get; set; }
}
public IEnumerable<SampleComplexObject> myData = Enumerable.Range(1, 50).Select(x =>
new SampleComplexObject
{
ID = x,
Name = "Name " + x,
SomeNavigationProperty = new NestedObject
{
Field1 = "first " + x % 4,
OtherField = "second " + x % 6
}
}
);
}
We would like to see this functionality:
Stacked Header like in https://blazor.syncfusion.com/demos/datagrid/stacked-header?theme=bootstrap4
ADMIN EDIT: The issue stems from the data operations in the business logic, and it is not a bug in the component and it does not relate to WebAPI usage.
Hi there,
as a follow-up of https://feedback.telerik.com/blazor/1461176-set-specific-position-in-virtual-scrolling-mode we have implemented the suggested skip handling. But there seems an issue when the data is fetched asynchronously, specifically from an Web API.
After hours of debugging and analyzing i have narrowed it down to the following simple Blazor app showcasing the bug:
https://github.com/ViRuSTriNiTy/blazor-app-telerik-grid-skip-bug
Please clone the repo, start the application and follow the steps displayed above the grid to reproduce the bug.
The second skip followed immediatelly after the first one originates from the Telerik assembly hence i cannot investigate it further (no source code).
What are your thoughts? Is it a bug?
So lonG
Daniel
Hi, I'm looking to reproduce visual behavior with the Blazor WASM Gird that we've already standardized on in our implementation of the KendoReact Grid component.
one of the things we're doing that i'm not seeing yet in the Blazor Grid docs is rendering a triple-dot icon in the column header that clicks down to show a custom menu... looking around, the closest thing i see so far is the Blazor Grid support for a "Toolbar" header... that would probably work as a path forward but I wanted to ask if i was missing anything else more similar? or perhaps eventual plans.
or is there any facility to custom render the column header ourselves?
i'm including a screenshot example of what we've settled on so far after several iterations

Thank you! this Blazor wasm direction you're supporting is fantastic =)
row height set in grid definition must apply to all rows in the grid for row virtualization as of now.
in real business case there might be complex content in each row that can't reinforce this - but if each row report its own height, grid still can visualize the load, and it will be much more flexible.
In the following reproducible, try filtering the third column (SomeNavigationProperty.Field1). It does not work.
<TelerikGrid Data="@myData" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Groupable="true">Hello,
I am new to your Blazor UI components. Please provide a link for exporting a grid to excel.
Thanks,
Earl