Blazor Grid — Integrated Editor Appearance (v22.2)

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:

• CellEditTemplate
• DataColumnCellEditTemplate
• FilterRowCellTemplate
• DataColumnFilterRowCellTemplate

<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

As always, we highly appreciate your feedback.

Free DevExpress Products - Get Your Copy Today