I set the GridColumn DisplayFormat="{0: yyyy-MM-dd}" and the data reflects that format. The default filter control doesn't. How can I make the control do that?
---
ADMIN EDIT
For the time being, the way to affect the filter behavior is through a custom filter template. The format for date pickers and numeric textboxes comes from the app culture settings (see more here). You may also want to Follow this idea for easier selection of a default filter operator and limiting the filter operators choices.
---
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; }
}
}
---
I want to customize the appearance of the header of a certain column, and a bit of CSS backgrounds could help, but I can't do this with the HeaderTemplate alone, nor with content in it because of the padding the cells have.
So, I would like the ability to set the CSS class of the header cell of the column.
How do I get the filter menu to allow input of Date *and* Time for a DateTime column?
When a column is displayed conditionally, it's order is not preserved. In the code sample below, the ProductId column is the first column in the grid. When you click the checkbox to hide the column, it is removed. Click the checkbox again and the column reappears but it is the last column in the grid.
ADMIN EDIT: At the end of this post there is an attachment with a workaround through a custom column chooser.
<input type="checkbox" @onchange="@ToggleColumn" />
<TelerikGrid Data=@GridData>
<GridColumns>
@if (ShowColumn)
{
<GridColumn Field=@nameof(Product.ProductId) Title="Id" />
}
<GridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
<GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price">
<Template>
@(String.Format("{0:C2}", (context as Product).UnitPrice))
</Template>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
public IEnumerable<Product> GridData { get; set; }
bool ShowColumn = true;
protected override void OnInitialized()
{
List<Product> products = new List<Product>();
for (int i = 0; i < 20; i++)
{
products.Add(new Product()
{
ProductId = i,
ProductName = "Product" + i.ToString(),
UnitPrice = (decimal)(i * 3.14)
});
}
GridData = products.AsQueryable();
}
private void ToggleColumn(ChangeEventArgs args)
{
ShowColumn = (bool)args.Value;
}
public class Product
{
public int ProductId { get; set; }
public string ProductName { get; set; }
public decimal UnitPrice { get; set; }
}
}
Like this (example taken from "https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation"):
Hello,
First of all: thank you for implementing the Excel like filtering with the new CheckBox Filter! This was a feature that was highly sought after in our development team.
But there is one thing I am missing: the checkbox list has no option for sorting.
If we want to sort our filters now we have to implement the FilterMenuTemplate in every column that has filtering active (which are a lot) and define the list with filter options and filter it ourselves.
Is this something that can be fixed easily?
---
ADMIN EDIT
We will probably sort ascending the values by default (out-of-the0box), and any other custom sorts should be implemented through the filter menu template.
---
If I'm filtering a column containing enum values I expect a dropdown of available values to choose from (as it is the case when filtering a grid using telerik UI for .net core).
Unfortunately with Blazor Grids the filter for Enums displays a numberbox. This is not usable since the user does not know the IDs for the enum values.
Please let me know how I can get the filter to let the user choose from the available enum values!
It will be useful if the grid column state contains the Field parameter if such is specified.
This will make easier mapping the ColumnState entity to the actual column.
----
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"
I would like to be able to customize the title in Editing Popup.
<AdminEdit>
We plan to expose the following customization options:
</AdminEdit>
Grid headers are misaligned if they are navigated in a scrolling scenario with a Frozen column.
===
ADMIN EDIT
===
The behavior affects the TreeList as well in a similar fashion. The misalignment is bigger when there is a frozen column but it is also reproducible without it in this demo.
With a pageable grid after scrolling down the first page and then paging, the next page should be scrolled to the top - but it is not.
Is there a way to scroll up by code until this is fixed ???
----
ADMIN EDIT
A sample solution is attached to the end of this post that shows how you can achieve this.
----
Based on row values, I want to style the entire row.
It could perhaps be exposed through something like a "<RowDescriptor>" element inside the <GridColumns>
//ADMIN EDIT: We plan to extend this item so that it includes not only row styling, but also the ability to add CSS classes to the cells, without having to use the Template.