3.4 KiB

Raw Blame History

MgGrid — InfoPanel

Part of the MgGrid system. See README.md for 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:

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

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

3.4 KiB Raw Blame History