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:

• Conditional Formatting
• Alternating Row Style

If time permits, feel free to review the following GitHub examples as well:

• Conditional Formatting
• How to Highlight a Row on Hover

Your Feedback Counts

Please take a moment to respond to the following survey question.