4.5 KiB
MgGrid — InfoPanel
Part of the MgGrid system. See
README.mdfor overview and component hierarchy.
MgGridWithInfoPanel Wrapper
<MgGridWithInfoPanel ShowInfoPanel="true" InfoPanelSize="400px">
<GridContent>
<GridMyEntityBase @ref="Grid" ... />
</GridContent>
<ChildContent>
@* Optional: custom InfoPanel — if omitted, default MgGridInfoPanel is used *@
</ChildContent>
</MgGridWithInfoPanel>
| Parameter | Type | Default | Description |
|---|---|---|---|
GridContent |
RenderFragment |
— | The grid to display in the left pane |
ChildContent |
RenderFragment? |
null |
Custom InfoPanel. If null, renders MgGridInfoPanel |
ShowInfoPanel |
bool |
true |
Whether to show the right pane |
InfoPanelSize |
string |
"400px" |
Initial right pane size |
The wrapper provides:
DxSplitterwith collapsible right pane- Fullscreen overlay (
mg-fullscreen-overlay) - Splitter size persistence (
Splitter_{key}in localStorage) RegisterGrid(grid)— called by MgGridBase inOnParametersSetRegisterInfoPanel(infoPanel)— called by MgGridInfoPanel inOnAfterRenderAsync
MgGridInfoPanel
Default InfoPanel component implementing IInfoPanelBase. Displays focused-row details with edit support.
IInfoPanelBase Interface
public interface IInfoPanelBase
{
void RefreshData(IMgGridBase grid, object? dataItem, int visibleIndex = -1);
void SetEditMode(IMgGridBase grid, object editModel);
void ClearEditMode();
}
InfoPanel Data Flow
FocusedRowChanged → InfoPanelInstance.RefreshData(grid, dataItem, visibleIndex)
Edit starts → InfoPanelInstance.SetEditMode(grid, editModel)
Edit ends/cancel → InfoPanelInstance.ClearEditMode()
When the grid produces no edit model (CustomizeEditModel fires with a null EditModel — e.g. stale
focused row after a datasource reload), SetEditMode is skipped with a Logger.Warning and the panel
stays in view mode (see MGGRID_ISSUES.md#acblazor-grid-i-n7k2).
InfoPanelInstance resolution: own GridWrapper.InfoPanelInstance → root grid's GridWrapper.InfoPanelInstance → null.
Responsive Column Layout
| Breakpoint Parameter | Default | Columns |
|---|---|---|
| — | < 400px | 1 column |
TwoColumnBreakpoint |
400px | 2 columns |
ThreeColumnBreakpoint |
800px | 3 columns |
FourColumnBreakpoint |
1300px | 4 columns |
FixedColumnCount (1-4) overrides responsive breakpoints if set.
Template System
| Template | Context | Purpose |
|---|---|---|
HeaderTemplate |
InfoPanelContext |
Custom header (default: grid Caption) |
BeforeColumnsTemplate |
InfoPanelContext |
Content before column-value pairs |
ColumnsTemplate |
InfoPanelContext |
Replace default column rendering entirely |
AfterColumnsTemplate |
InfoPanelContext |
Content after column-value pairs |
FooterTemplate |
InfoPanelContext |
Custom footer |
InfoPanelContext = record(object? DataItem, bool IsEditMode).
Edit Mode Editors
Edit mode reads/writes properties via reflection and assumes non-throwing accessors: columns whose
getter/setter can throw (computed / GenericAttribute-backed members) MUST be declared ReadOnly, or the
editor render crashes — by design (fail-fast): a missing ReadOnly is a consumer bug to surface in dev, not to mask.
Editor resolution order: column InfoPanelEditTemplate first (MgGridDataColumn — see MGGRID_COLUMNS.md),
then EditSettings (DxComboBoxSettings, Memo), then property type:
| Type | Editor Component |
|---|---|
Column InfoPanelEditTemplate (MgGridDataColumn) |
the provided template — wins over everything below |
bool |
DxCheckBox<bool> |
DateTime / DateTime? |
DxDateEdit<DateTime> / DxDateEdit<DateTime?> |
DateOnly / DateOnly? |
DxDateEdit<DateOnly> / DxDateEdit<DateOnly?> |
int |
DxSpinEdit<int> |
decimal |
DxSpinEdit<decimal> |
double |
DxSpinEdit<double> |
ComboBox (via DxComboBoxSettings) |
DxComboBox<TValue, TItem> |
Memo (via EditSettingsType.Memo) |
DxMemo |
| Other | DxTextBox |
Additional Features
- Sticky positioning via JS interop (
MgGridInfoPanel.initSticky) - Built-in toolbar with
MgGridToolbarTemplate(OnlyGridEditTools=true) — its edit tools are currently not configurable per grid (hardcodedEnableNew/EnableEditdefaults; seeMGGRID_ISSUES.md#acblazor-grid-i-k5r3) - OnDataItemChanged callback when focused row changes