Like this (example taken from "https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation"):
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; }
}
}
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!
I would like to be able to customize the title in Editing Popup.
<AdminEdit>
We plan to expose the following customization options:
- Title,
- Width
- Height
- MaxWidth
- MaxHeight
</AdminEdit>
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"
@using System.Dynamic
@using Telerik.Blazor.Components.Grid
<div style="width: 800px; overflow-x: auto; overflow-y:hidden; border: 1px solid red; height:400px">
<TelerikGrid Data="@expandoVendors" EditMode="inline" Pageable=true PageSize=10 SelectionMode="Telerik.Blazor.GridSelectionMode.Multiple">
<TelerikGridColumns>
<TelerikGridCommandColumn width="100">
<TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
<TelerikGridCommandButton Command="Update" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
<TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton>
</TelerikGridCommandColumn>
<TelerikGridColumn Field="Id"></TelerikGridColumn>
<TelerikGridColumn Field="Name" Title="Name" Editable="true">
<Template>
@{
dynamic v = context as ExpandoObject;
<span style="white-space:nowrap">@(v.Name)</span>
}
</Template>
<EditorTemplate>
@{
dynamic v = context as ExpandoObject;
<input type="text" bind="@(v.Name)" />
}
</EditorTemplate>
</TelerikGridColumn>
</TelerikGridColumns>
</TelerikGrid>
</div>
@functions {
List<ExpandoObject> expandoVendors { get; set; }
protected override async Task OnInitializedAsync()
{
expandoVendors = new List<ExpandoObject>();
var v1 = new ExpandoObject();
v1.TryAdd("Id", "1");
v1.TryAdd("Name", "Google");
expandoVendors.Add(v1);
var v2 = new ExpandoObject();
v2.TryAdd("Id", "2");
v2.TryAdd("Name", "Amazon");
expandoVendors.Add(v2);
}
}
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.
----
ADMIN EDIT
While this feature is implemented, you can get the Field of ColumnState columns using the workaround shown in this article: https://docs.telerik.com/blazor-ui/components/grid/state#get-current-columns-visibility-order-field
----
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.
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.
----
Hello everyone,
We created this Feature Request to gather feedback on the way the item expansion is working in the Grid state. Currently, you can expand any items with the ExpandedRows collection of int where you pass the indexes of the rows.
Another option, which we are thinking of, is to provide a Collection<Model>. This would let you pass models, instead of indexes and the Grid would automatically expand those items. This approach would make the need to preserve the indexes redundant, which you should currently do when Filtering/Sorting and Grouping the items in the Grid.
We would appreciate your feedback on both approaches and which you think will be easier to use.
<GridCheckboxColumn SelectAll="true" SelectAllMode="GridSelectAllMode.All">
When I apply filtering to the grid and click the SelectAll checkbox in the select column header, the grid selects all the data. I want it to select only the data that the user sees after the filter is applied.
In my particular scenario we have an existing system which is very flexible and has user created entities. We already have the idea of "view definitions" which are used to define how a list of entities (for example companies or contacts) is displayed in a grid format. This view definition contains our own version of sort descriptors to tell us what the initial sorting should be.
I am getting the data using our existing API in the ReadItems method. Because I already have the view definition I can pass our sort descriptor to our API and it returns the data pre-sorted (it also handles paging). I would then like to be able to tell the grid which columns I have sorted by so it could be represented in the UI with the arrow. The grid doesn't actually have to sort the data.
Here is a more detailed description of the case: https://www.telerik.com/forums/grid-questions-07d1fe846889#RgZmmE2avUaSOsIcprdOMg.