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; }
}
}
Hi !
How can i hide some columns on small device ?
Telerik.Blazor.Components.GridColumn.Class does not exist ?
Regards,
--------
ADMIN EDIT
This will be done through the Visible parameter of the column. You can bind it to a flag that hides the column for the desired scenarios (resolution, user settings, etc.). The new feature we provide to facilitate this will be a MediaQuery component that lets you have an easy flag in the C# code based on the media query for the desired resolution. There will be a demo how to use it with the grid columns when the 2.23.0 release is live. With this approach you will still use a CSS media query, but this will give you more flexibility to use it in more functionality than just the grid columns, and will avoid adding extra properties to the column.
--------
Is there any way to default the values that are used when I create a new row?
So for example, I have a row where I want to default a date to Jan 1st of the following year. However, when I add the row, it adds nulls to all fields and the date shows up as 1 Jan 1900 and there's a lot of fiddly clicking to set the right date.
ADMIN EDIT: The following knowledge base article has been updated to explain how to use nested models: https://docs.telerik.com/blazor-ui/knowledge-base/grid-bind-navigation-property-complex-object
At the moment, you must use flat models with primitive types for binding the grid. If you don't, the data source operations break and they can't even display "nested" values. Examples here and here.
I would like to be able to use my complex models so I can point a grid's column to a field like MyModel.MyNestedModel.MyPrimitiveField
My be related to binding to a data table and dynamic expando.
Please allow to set Group By fields at Design time, currently only user has control to Drag and drop to group.
we need feature to group by fixed set of columns and don't allow user to change the grouping, also need option to hide group collapse icons.
Grid column header and content alignment (horizontal +Vertical)
---
ADMIN EDIT
For the time being, this is possible through the CellRender event, see below in the thread for an example.
---
Hello,
I am new to your Blazor UI components. Please provide a link for exporting a grid to excel.
Thanks,
Earl
How would you remove the icon to expand a detail grid only for certain rows? Some rows will not have detail data and should not be expandable.
---
ADMIN EDIT
As suggested by Joel, you can use the RowRender event and a bit of CSS to hide the button. Here is a Knolwdge Base article that shows a fully runnable sample: https://docs.telerik.com/blazor-ui/knowledge-base/grid-conditional-expand-button.
void OnRowRenderHandler(GridRowRenderEventArgs args)
{
OrgUnit item = args.Item as OrgUnit;
args.Class = item.Children.length ? "has-children" : "no-children";
}
tr.no-children .k-hierarchy-cell *{
display:none !important;
}
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 need the ability to show or hide command buttons based on a row's property.
I am aware that I can just cancel commands, but in my opinion, a command button should not even be shown when the command can't or shouldn't be executed on a row.
Unfortunately, I was unable to find a way to access the "context" (the instance) in a TelerikGridCommandColumn the same way you're able to in a normal TelerikGridColumn.
---
ADMIN EDIT
You can Vote for and Follow this request for a follow up on providing the model as context to the command column: https://feedback.telerik.com/blazor/1461283-pass-the-model-context-to-command-button. At the moment, conditional command buttons are possible in a "normal" column through the grid state, the page above shows an example.
---