Issue with Grid Toolbar Export To Excel & Column picker
Hello I have a issue with Grid Toolbar with exporting data to excel and choosing columns via column picker
I have noticed that everything is working fine with raw data, but the issue starts when I want to use Grid Template
Issue with exporting to Excel
On load I have RAW Order ID, AMENDED Value of Order ID, Order ID, Customer ID & Customer Country
So on Export to excel I am exporting to see all this same columns on the file but I only got following:
| RAW Order ID | Customer ID | Customer Country |
| 1 | ALFKI | PL |
| 2 | ANANTR | DK |
| 3 | ANANTR | UK |
| 4 | BOLID | DK |
| 5 | ANANTR | USA |
Issue with column picker:
If you try to select only Raw Order Id to be displayed on the Grid it is working fine,
But after reloading a page (f5) the grid is empty 
You can select all columns again but you wont get the vales that are using Grid Template:
Removing all cookies are resetting app to defaults.
Please see the code below:
@page "/"
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.QueryBuilder
<PageTitle>Home</PageTitle>
<SfQueryBuilder @ref="QueryBuilder" ID="SfQueryBuilder"
TValue="Order"
DataSource="@Orders">
</SfQueryBuilder>
<SfButton Content="Execute Query" OnClick="ExecuteQuery" />
<SfGrid ID="OrdersGridID" @ref="OrdersGrid" DataSource="@FilteredOrders"
AllowFiltering AllowSorting AllowGrouping AllowReordering AllowExcelExport
EnablePersistence EnableAutoFill ShowColumnChooser Toolbar="@ToolbarItems">
<GridSortSettings AllowUnsort />
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel" />
<GridEvents OnToolbarClick="OnToolbarClick" TValue="Order"></GridEvents>
<GridColumns>
<GridColumn Visible="true" Field="@nameof(Order.OrderID)" HeaderText="RAW Order ID"/>
<GridColumn Visible="true" Field="@nameof(Order.OrderID)" HeaderText="AMENDED Value of Order ID">
<Template>
<a rel='nofollow' href="grid/@((context as Order)!.OrderID)">
@((context as Order)!.OrderID)
</a>
</Template>
</GridColumn>
<GridColumn Visible="true" Field="@nameof(Order.OrderID)" HeaderText="Order ID">
<Template>
<a rel='nofollow' href="grid/@((context as Order)!.OrderID)">
@((context as Order)!.OrderID)
</a>
</Template>
</GridColumn>
<GridColumn Visible="true" Field="@nameof(Order.CustomerID)" HeaderText="Customer ID"/>
<GridColumn Visible="true" Field="@nameof(Order.CustomerCountry)" HeaderText="Customer Country" />
<GridColumn Visible="false" Field="@nameof(Order.CustomerNationality)" HeaderText="Customer Nationality" />
<GridColumn Visible="false" Field="@nameof(Order.CustomerFirstName)" HeaderText="Customer First Name" />
<GridColumn Visible="false" Field="@nameof(Order.CustomerLastName)" HeaderText="Customer Last Name" />
</GridColumns>
</SfGrid>
<SfButton Content="Reset Filters" OnClick="ResetFilters" />
<SfButton Content="Reset All Cookies" OnClick="ResetAllCookies" />
@code {
private SfQueryBuilder<Order>? QueryBuilder;
private SfGrid<Order>? OrdersGrid;
private List<Order>? Orders { get; set; }
private List<Order>? FilteredOrders { get; set; }
private string[] ToolbarItems = new string[] { "ColumnChooser", "ExcelExport" };
protected override void OnInitialized()
{
InitializeOrders();
}
public async Task OnToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "OrdersGridID_excelexport") // Id is combination of Grid's ID and itemname.
{
ExcelExportProperties ExcelProperties = new ExcelExportProperties();
var selectedRecord = await OrdersGrid.GetSelectedRecordsAsync();
if (selectedRecord.Count() > 0)
{
ExcelProperties.DataSource = selectedRecord;
}
else
{
ExcelProperties.DataSource = Orders;
}
await this.OrdersGrid.ExportToExcelAsync(ExcelProperties);
}
}
private void InitializeOrders()
{
Orders = Enumerable.Range(1, 5).Select(x => new Order()
{
OrderID = x.ToString(),
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
CustomerCountry = (new string[] { "UK", "USA", "PL", "DK", "FI" })[new Random().Next(5)],
CustomerNationality = (new string[] { "British", "Polish", "Other", "German", "Dutch" })[new Random().Next(5)],
CustomerFirstName = (new string[] { "Pawel", "Andrew", "Alex", "Philip", "Angelina" })[new Random().Next(5)],
CustomerLastName = (new string[] { "Pit", "Jolie", "Pratt" })[new Random().Next(3)],
}).ToList();
FilteredOrders = new List<Order>(Orders);
}
public void ResetFilters()
{
FilteredOrders = new List<Order>(Orders);
StateHasChanged();
}
public void ResetAllCookies() => OrdersGrid?.ResetPersistDataAsync();
public async Task ExecuteQuery()
{
if (QueryBuilder != null && Orders != null)
{
var whereFilter = QueryBuilder.GetPredicate();
if (whereFilter != null)
{
ApplyFilters(whereFilter);
}
}
}
private void ApplyFilters(WhereFilter whereFilter)
{
if (Orders == null) return;
var filteredList = Orders.AsQueryable();
if (!string.IsNullOrEmpty(whereFilter.Field))
{
switch (whereFilter.Field)
{
case "OrderID":
filteredList = filteredList.Where(o => o.OrderID != null && o.OrderID.Contains(whereFilter.value.ToString()));
break;
case "CustomerID":
filteredList = filteredList.Where(o => o.CustomerID != null && o.CustomerID.Contains(whereFilter.value.ToString()));
break;
case "CustomerCountry":
filteredList = filteredList.Where(o => o.CustomerCountry != null && o.CustomerCountry.Contains(whereFilter.value.ToString()));
break;
}
}
FilteredOrders = filteredList.ToList();
StateHasChanged();
}
public class Order
{
public string? OrderID { get; set; }
public string? CustomerID { get; set; }
public string? CustomerCountry { get; set; }
public string? CustomerNationality { get; set; }
public string? CustomerFirstName { get; set; }
public string? CustomerLastName { get; set; }
}
}
SIGN IN To post a reply.
1 Reply
SIGN IN To post a reply.
