Blazor Grid — Appearance Customization Enhancements (v22.1)
source link: https://community.devexpress.com/blogs/aspnet/archive/2022/08/23/grid-for-blazor-appearance-customization-enhancements.aspx
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Blazor Grid — Appearance Customization Enhancements (v22.1)
With v22.1, you can now customize the DevExpress Blazor Grid to better address your business requirements (our Blazor Grid allows you to modify the appearance of 30+ grid UI elements (rows, cells, edit form, filter row, group panel, footer, etc)).
You can also apply unique formatting based on specific rules. By incorporating rule-based formatting, you can help users identify trends, recognize exceptions, and compare relevant data points in a more efficient manner.
To activate this feature, handle the CustomizeElement event, and specify which UI elements to customize and which styles or CSS classes to apply. Thanks to the power of CSS, you can create any grid design with relative ease.
<DxGrid Data="Data"
CustomizeElement="OnCustomizeElement">
...
</DxGrid>
@code {
void OnCustomizeElement(GridCustomizeElementEventArgs e) {
if(e.ElementType == GridElementType.DataRow) {
var unitsValue = Convert.ToInt16(e.Grid.GetRowValue(e.VisibleIndex, "UnitsInStock"));
if(unitsValue == 0)
e.CssClass = "strikethrough-item";
}
if(e.Column.Name == "UnitsInStock") {
var unitsValue = Convert.ToInt16(e.Grid.GetRowValue(e.VisibleIndex, "UnitsInStock"));
if(unitsValue > 0 && unitsValue <= 10)
e.Style = "background-color: #edc2c2";
}
}
}
You can explore grid element customization options in the following online demos:
If time permits, feel free to review the following GitHub examples as well:
Your Feedback Counts
Please take a moment to respond to the following survey question.
How likely are you to use the CustomizeElement event in your project?
Very likely
Not likely
Other (describe)
How can we extend element customization within the DevExpress Blazor Grid to better serve your needs?
Free DevExpress Products – Get Your Copy Today
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK