113 lines
4.6 KiB
Markdown
113 lines
4.6 KiB
Markdown
# MgGrid — InfoPanel
|
|
|
|
> Part of the MgGrid system. See `README.md` for overview and component hierarchy.
|
|
|
|
## MgGridWithInfoPanel Wrapper
|
|
|
|
```razor
|
|
<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:
|
|
- `DxSplitter` with collapsible right pane
|
|
- Fullscreen overlay (`mg-fullscreen-overlay`)
|
|
- Splitter size persistence (`Splitter_{key}` in localStorage)
|
|
- `RegisterGrid(grid)` — called by MgGridBase in `OnParametersSet`
|
|
- `RegisterInfoPanel(infoPanel)` — called by MgGridInfoPanel in `OnAfterRenderAsync`
|
|
|
|
## MgGridInfoPanel
|
|
|
|
Default InfoPanel component implementing `IInfoPanelBase`. Displays focused-row details with edit support.
|
|
|
|
### IInfoPanelBase Interface
|
|
|
|
```csharp
|
|
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** — computed
|
|
properties (e.g. GenericAttribute-backed getters that fail on edit-model copies, or deliberately
|
|
throwing setters) MUST be declared `ReadOnly` on the column, otherwise rendering the editor crashes.
|
|
This is by design (fail-fast): the missing `ReadOnly` declaration is a consumer bug that should surface
|
|
in development, not be masked by silent fallbacks.
|
|
|
|
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 (hardcoded `EnableNew`/`EnableEdit` defaults; see `MGGRID_ISSUES.md#acblazor-grid-i-k5r3`)
|
|
- **OnDataItemChanged** callback when focused row changes
|