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.
when setting a default filter in code the grid does not show any type of indicator that a filter is applied to a column
desiredState = newGridState<Employee>()
{
FilterDescriptors = newList<FilterDescriptorBase>()
{
newCompositeFilterDescriptor()
{
FilterDescriptors = newFilterDescriptorCollection()
{
newFilterDescriptor() { Member = "Active", Operator = FilterOperator.IsEqualTo, Value = true, MemberType = typeof(bool) }
}
}
}
};


With using the Grid, I have several GridCommandButtons. Instead of displaying the button with an icon followed by text, I wanted to display just the icon and use the TelerikTooltip to display the text on hover. When I set the GridCommandButton.Title and inspect the DOM, there is no title attribute on the button even though the description of the GridCommandButton.Title property reads "The title attribute of the Button".
<TelerikGrid @ref="@Grid"
it would be helpful to have the ability to set Class attribute for rendered TD.
this would allow for example to set a background color for a column
I'm using the Grid with a GridToolbar containing a GridSearchBox. I have the following requirement that I wish to be able to implement:
When focus is on the GridSearchBox and I hit Esc I would like to clear the search text.
I'm using the OnRead / OnCreate / OnUpdate / OnDelete events of the TelerikGrid. Most examples do not use OnRead to load data, instead using OnInitializedAsync().
When performing an update two events will fire, such as OnCreate and then OnRead to reload the grid data - which makes sense. The problem is OnRead is not awaited, so in effect the Read method can reload the data prior to data being updated on the server. This is especially the case if I have a JavaScript delete confirmation prompt.
What's my best way forward? Not use OnRead and use OnInitializedAsync instead? Somehow trigger OnRead again (which would effectively trigger it twice)?
Thanks,
Dave
Can you either fix the Export functionality to apply Custom footers that are not aggregated to the exported data or Change Enum options to add a Custom type to allow custom footer template values to be exported along with the other GrigAggregates?
Hi,
Please simplify customizing Grid Popup, it should be available under Grid with build-in context and binding
I am already using your do-it-yourself example but IMHO it is too much code
Regards
Andrzej
asynct Task ContextMenuClick(ContextMenuItem) {
var state = Grid.GetState(); state.FilterDescriptors.Add(new FilterDescriptor { Member = "Created", Operator = FilterOperator.IsEqualTo, Value = "Administrator" }); await Grid.SetState(state);
}
How it should look like:
When you resize grid columns the column width does not follow the mouse. This occurs in your demo:
https://demos.telerik.com/blazor-ui/grid/column-resizing
Make a column wider or narrower and the column width does not stay in line with where the mouse is.
---
ADMIN EDIT
This is not a bug, but intended behavior. As web grid is not Excel. You can find more details in the original thread opened by Aditya with this question: https://www.telerik.com/forums/grid-checkboxlist-filter---auto-select-all-upon-entering-filter-criteria
---
This is related to Grid CheckBoxList Filter - https://demos.telerik.com/blazor-ui/grid/filter-checkboxlist
In Microsoft Excel, when we start typing in the Search box, the matching entries along with "Select All" are already checked. So upon typing the required criteria, the user just needs to select Ok button to view the filtered results.
In the case of Blazor Grid, the matching entries and Select All option are not checked automatically. So the user would need to do an additional action of checking "Select All". Please refer to the attached screenshots.
Is there a way to have "Select All" auto checked upon typing the filter criteria?
I'm trying manual source operations with grouping and aggregates, but I get: InvalidOperationException: No generic method 'Sum' on type 'System.Linq.Enumerable' is compatible with the supplied type arguments and arguments. No type arguments should be provided if the method is non-generic
I've edited the sample in the docs of manual source operations with grouping and added some aggregates.
Since some feats with the grid are not compatible with others, it is not easy to understand what is feasible and what is not. I know from the docs that virtual scolling is not compatible with many feats, or that group load on demand is not comaptible with aggregates, but I don't found any about aggregates with manual operations.
Please find the attached demo project
I am having problems with grouping in TelerikGrid.
When I drag the column into the header for grouping, I get an error ArgumentNullException: Value cannot be null, apparently, somewhere in TelerikGrid.SetProcessedGroups.
Test code:@page "/test"
<div>
<TelerikGrid @ref="grid" Data="@GridData" @bind-Page="Page" PageSize="PageSize"
Pageable="true" Sortable="true" Groupable="true"
FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu"
ShowColumnMenu="true"
TotalCount="@TotalRowCount"
SelectionMode="GridSelectionMode.Single"
OnRead=@ReadData>
<GridAggregates>
<GridAggregate Field=@nameof(TestData.Name) Aggregate="@GridAggregateType.Count" />
<GridAggregate Field=@nameof(TestData.Surname) Aggregate="@GridAggregateType.Count" />
<GridAggregate Field=@nameof(TestData.Department) Aggregate="@GridAggregateType.Count" />
</GridAggregates>
<GridColumns>
<GridColumn Field="@(nameof(TestData.Name))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
<GridColumn Field="@(nameof(TestData.Surname))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
<GridColumn Field="@(nameof(TestData.Department))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
<GridCommandColumn Width="60px" Lockable="false" ShowColumnMenu="true">
<GridCommandButton Command="View" Icon="information" ShowInEdit="false" OnClick="@ViewItem"></GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
</div>
@code {
protected TelerikGrid<TestData> grid;
protected List<TestData> GridData { get; set; }
public int TotalRowCount { get; set; } = 0;
public int Page { get; set; } = 1;
public int PageSize { get; set; } = 10;
protected async Task ReadData(GridReadEventArgs args)
{
await LoadData();
}
protected async Task LoadData()
{
GridData = await GetSampleData();
TotalRowCount = 100;
}
protected async Task<List<TestData>> GetSampleData()
{
List<TestData> results = new List<TestData>();
results.Add(new TestData { Name = "Name1", Surname = "Surname1", Department = "Department1" });
results.Add(new TestData { Name = "Name2", Surname = "Surname2", Department = "Department1" });
results.Add(new TestData { Name = "Name3", Surname = "Surname3", Department = "Department1" });
results.Add(new TestData { Name = "Name4", Surname = "Surname4", Department = "Department1" });
results.Add(new TestData { Name = "Name5", Surname = "Surname5", Department = "Department2" });
results.Add(new TestData { Name = "Name6", Surname = "Surname6", Department = "Department2" });
results.Add(new TestData { Name = "Name7", Surname = "Surname7", Department = "Department2" });
results.Add(new TestData { Name = "Name8", Surname = "Surname8", Department = "Department3" });
results.Add(new TestData { Name = "Name9", Surname = "Surname9", Department = "Department3" });
results.Add(new TestData { Name = "Name10", Surname = "Surname10", Department = "Department4" });
await Task.Delay(1000); //simulate loading delay ...
return results;
}
protected void ViewItem(GridCommandEventArgs args)
{
//navigate to edit view ...
}
public class TestData
{
public string Name { get; set; }
public string Surname { get; set; }
public string Department { get; set; }
}
}
I am getting the following error:
This happens in Chrome and Edge, in Webassembly and Server-side blazor.
Am I doing something wrong?
Thanks for the help!
The new functionality to have the in-cell editing validate based on the model doesn't work with fluid validation. We use a custom component that integrates fluid validation with blazor which works fine for all controls including telerik input controls, but the built in validation for the grid editing doesn't seem to work with it.
Also there seems to be a bug with the validation using standard attribute validation. If the row you are working on has an existing record that does not validation properly, the in-cell editing will stop working once you go in to any cell and make a change. The edit mode on that cell will close as if everything updated ok, but after that, you will not be able to click into any cell to edit. While normally the data should already be valid, there can be scenarios where new validation rules are applied and existing records would become retroactively invalid.
Thanks,
Alan
The documentation for the GridToolBar here describes Add, but ExcelExport is also seen in the demos: https://docs.telerik.com/blazor-ui/components/grid/toolbar#built-in-commands
I imagine there are other built-in commands that are valid in the GridToolBar as well.
Hi,
Is it possible to drag grid row to another page on the same grid?
thanks,
Irina
It would be nice if it was possible to have a grid and have already in a cell the value of 1 and somebody want's to add 4 to it he doesn't have to calculate but could just type 1+4 and the answer (5) would be saved to the grid.
Problem:
Grid exports columns as 0 width unless Grid column widths are specified in px. This is a terrible experience for users, and specifying grid width in px is terrible when you have users that can be using phones or 4k screens. Managing Grid for different screen sizes is already hard enough!
Solution 1: (Good)
The grid should export a default (64px) width for columns that aren't specified in px. Inexperienced Excel users are lost when columns are collapsed, but can easily resize columns as needed when each one is visible!
Solution 2: (Better)
Calculate a width - like [(rem value)*10]px. Even if it isn't perfect it will go a long way to creating something visually pleasing on initial open in Excel.
Hello,
After just a sort operation, in the event handler of OnStateChanged event, the FilterDescriptors of GridStateEventArgs.GridState is not empty.
Steps to reproduce :
1) Implement Grid with OnStateChanged and OnRead :
<TelerikGrid
OnStateChanged="@((GridStateEventArgs<IGetAgences_Agences_Items> args) => OnStateChangedHandler(args))"
OnRead=@ReadItems
async Task OnStateChangedHandler(GridStateEventArgs<IGetAgences_Agences_Items> args)
{
var filters = args.GridState.FilterDescriptors; // filters are not empty after just a sort opration
}
async Task ReadItems(GridReadEventArgs args)
{
this.LoadData()
await InvokeAsync(StateHasChanged);
}
2) Sort a column
3) The OnStateChanged event is fire
4) In the OnStateChangedHandler, the filters are not empty :
Expected behaviors :
If no filters added, the filters of the GridState must be empty
Thank's
Thomas