Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxGrid.CustomizeElement Event

Allows you to customize grid elements.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public Action<GridCustomizeElementEventArgs> CustomizeElement { get; set; }

#Parameters

Type Description
GridCustomizeElementEventArgs

An object that defines data for this event.

#Remarks

The CustomizeElement event fires each time the Grid component is re-rendered; for instance, when you update data from the asynchronous data source or call the AutoFitColumnWidths() method.

The event fires for most grid elements. Use ElementType, VisibleIndex, and Column event arguments to get information about the currently processed element.

CssClass, Style, and Attributes event arguments allow you to customize element settings.

#Task-Based Examples

#Customize Appearance and Display a Custom Tooltip

The following code customizes the appearance of grid elements that meet the following criteria:

  • Data rows with Total > 1000 are highlighted.
  • All Total values are bold.
  • If the grid rows are grouped by Country, the group row’s tooltip displays group summary values.

Run Demo: Conditional Formatting View Example: Conditional Formatting

Razor
<DxGrid @ref="Grid" CustomizeElement="Grid_CustomizeElement" ... />
@* ... *@
@code {
    // ...
    IGrid Grid { get; set; }
    void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
        if(e.ElementType == GridElementType.DataRow && (System.Decimal)e.Grid.GetRowValue(e.VisibleIndex, "Total") > 1000) {
            e.CssClass = "highlighted-item";
        }
        if(e.ElementType == GridElementType.DataCell && e.Column.Name == "Total") {
            e.Style = "font-weight: 800";
        }
        if(e.ElementType == GridElementType.GroupRow && e.Column.Name == "Country") {
            var summaryItems = e.Grid.GetGroupSummaryItems().Select(i => e.Grid.GetGroupSummaryDisplayText(i, e.VisibleIndex));
            e.Attributes["title"] = string.Join(", ", summaryItems);
        }
    }
}
css
.highlighted-item > td {
    background-color: var(--bs-danger-border-subtle)
}
.highlighted-item > td:first-child {
    background-color: transparent;
}

DevExpress Blazor Grid - Customize Rows

#Show a Custom Context Menu

The following code sample invokes a custom context menu for column headers and rows:

The oncontextmenu:preventDefault attribute disables the standard browser context menu. In the Grid’s CustomizeElement event handler, subscribe to the contextmenu event that displays a custom context menu.

View Example: Show the Context Menu and Customize its Appearance Watch Video: Grid - Add the Context Menu

razor
<DxGrid @ref="Grid" CustomizeElement="Grid_CustomizeElement" @oncontextmenu:preventDefault ... />

@code {
    GridContextMenuContainer ContextMenuContainer { get; set; }
    void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
        if(GridContextMenuHelper.IsContextMenuElement(e.ElementType)) {
            e.Attributes["oncontextmenu"] = EventCallback.Factory.Create<MouseEventArgs>(
                this,
                async mArgs => await ContextMenuContainer.Grid_ContextMenu(e, mArgs)
            );
        }
    }
    ...
}

#Highlight Modified Cells

View Example: Enable Batch Data Editing with Entity Framework Core Run Demo: Batch Edit

razor
<div>
    <DxGrid @ref="Grid"
            Data="Data"
            ValidationEnabled="false"
            KeyFieldName="EmployeeId"
            EditMode="GridEditMode.EditCell"
            EditModelSaving="Grid_EditModelSaving"
            CustomizeElement="Grid_CustomizeElement"
            CustomizeEditModel="Grid_CustomizeEditModel">
        <Columns>
            <DxGridDataColumn FieldName="FirstName" />
            <DxGridDataColumn FieldName="LastName" />
            <DxGridDataColumn FieldName="Title" />
            <DxGridDataColumn FieldName="HireDate" />
            <DxGridCommandColumn Width="30px" NewButtonVisible="false">
            @* ... *@
            </DxGridCommandColumn>
        </Columns>
        @* ... *@
    </DxGrid>
</div>

@code {
    IGrid Grid { get; set; }
    IList<Employee> Data { get; set; }
    @* ... *@
    void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
        if (e.ElementType == GridElementType.DataCell) {
            var employee = (Employee)Grid.GetDataItem(e.VisibleIndex);
            var column = (IGridDataColumn)e.Column;
            if (TryGetChangedEntityEntry(employee, out var entityEntry)) {
                if (entityEntry.State == EntityState.Added || entityEntry.Property(column.FieldName).IsModified)
                    e.CssClass = "grid-modified-cell";
            }
        }
    }
    @* ... *@
}

#Alternate Row Style

Run Demo: Alternating Row Style

C#
void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
    if(e.ElementType == GridElementType.DataRow && e.VisibleIndex % 2 == 1) {
        e.CssClass = "alt-item";
    }
}
CSS
.alt-item > td:not(.dxbl-grid-empty-cell),
.alt-item > td:not(.dxbl-grid-indent-cell) {
    background-color: color-mix(in srgb, var(--bs-gray-300), transparent 50%);
}

DevExpress Blazor Grid - Alternating Row Style

#Change Focus and Selection Color

razor
<DxGrid @ref="Grid" CustomizeElement="Grid_CustomizeElement" ... />

@code {
    IGrid Grid { get; set; }
    void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
        if (e.ElementType == GridElementType.DataRow && Grid.IsRowSelected(e.VisibleIndex)) {
            e.CssClass = "custom-selection-style";
        }
        if (e.ElementType == GridElementType.DataRow && Grid.IsRowFocused(e.VisibleIndex)) {
            e.CssClass = "custom-focus-style";
        }
    }
...
}

#Modify Data Cell Paddings

C#
void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
    if (e.ElementType == GridElementType.DataCell) {
        e.Style = "padding: 0px";
    }
}

#Conditionally Hide Commands

C#
void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
    if (e.ElementType == GridElementType.CommandCell && 
            (System.Int32)e.Grid.GetRowValue(e.VisibleIndex, "Profit") < 0) {
        e.CssClass = "hidden-item";
    }
}
CSS
.hidden-item button {
    visibility: hidden;
}

#Modify Column Header Style Based on Sort Settings

C#
void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
    if (e.ElementType == GridElementType.HeaderCell) {
        var column = (DxGridDataColumn)e.Column;
        if (column.AllowSort == false)
            e.CssClass = "nonsortable-header";
        else
            e.CssClass = "my-header-cell";
    }
}
CSS
.nonsortable-header {
    background-color: red !important;
}
.my-header-cell[aria-sort="ascending"] {
    background-color: green !important;
}
.my-header-cell[aria-sort="descending"] {
    background-color: red !important;
}

#Change Data Row Height

C#
void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
    if(e.ElementType == GridElementType.DataCell) {
        e.Style = "min-height: 40px";
    }
}
See Also