Blazor Grid — Integrated Editor Appearance (v22.2)

ASP.NET Team Blog
10 January 2023

In our most recent major release (v22.2), we introduced a new editor-related rendering mode within our Blazor Grid control.

Previously, the DevExpress Blazor Grid rendered editors (within the filter row/edit row cells) as standalone controls with associated borders and paddings.

If you wish to change this behavior and force our Blazor Data Editors to share the same border with the Grid cell itself, set the EditorRenderMode property to Integrated. This new rendering mode is applied to DevExpress Blazor editors placed directly in the following templates:

<DxGrid Data="forecasts" 
        ShowFilterRow="true" 
        EditorRenderMode="GridEditorRenderMode.Integrated">
  <Columns>
    <DxGridDataColumn FieldName="Date" >
      <FilterRowCellTemplate>
        <DxDateEdit Date="(DateTime?)context.FilterRowValue" 
                    DateChanged="(DateTime? v) => context.FilterRowValue = v" />
      </FilterRowCellTemplate>
    </DxGridDataColumn>
    <DxGridDataColumn FieldName="Temperature" >
      <FilterRowCellTemplate>
        <DxSpinEdit Value="(int?)context.FilterRowValue"
                    ValueChanged="(int? v) => context.FilterRowValue = v" />
      </FilterRowCellTemplate>
    </DxGridDataColumn>
    <DxGridDataColumn FieldName="Summary" />
  </Columns>
</DxGrid>

When used in this manner, borders for our Blazor Editor components are not displayed on-screen. As such, our Blazor Grid takes up less space, and row height does not change once data editing begins.

In the future, we expect to activate this feature by default and implement a global option to enable the previous rendering option.

To explore our new rendering mode in greater detail, feel free to review the following online demos: Edit Row | Filter Row

Your Feedback Counts

As always, we highly appreciate your feedback.

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.