99 lines
3.4 KiB
Markdown
99 lines
3.4 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()
|
|
```
|
|
|
|
`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 (by property type)
|
|
|
|
| Type | Editor Component |
|
|
|---|---|
|
|
| `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`)
|
|
- **OnDataItemChanged** callback when focused row changes
|