Editing

Since 0.1.0-alpha.20

Edit in a dialog, in the row, or a cell at a time.

The members for editing, and the types they use. Every member of IzzyBlazor.DataGrid<TItem> is on the DataGrid API.

Properties (7)

EditModeDataGridEditMode = DataGridEditMode.NoneAdded in 0.1.0-alpha.20

How a row is edited. Needs OnSave and an ItemKey.

FindItemFunc<string, Task<TItem>>?Added in 0.1.0-alpha.20

Finds a row that isn't among those loaded, by its key, for the edit dialog and the delete confirmation: a link to a row on another page, say. A grid that loads rows as they're needed (Virtualize, or Paging by loading more) has to have it. Return null for a row this person can't reach: ItemEditable and ItemDeletable are checked on what it returns.

NewItemFunc<TItem>?Added in 0.1.0-alpha.20

A new row's starting values. Setting it adds an Add button to the toolbar, and OnSave gets the row with IsNew set.

ItemEditableFunc<TItem, bool>?Added in 0.1.0-alpha.20

Which rows can be edited; all of them when it's not set. It's checked on a save too, not just when drawing the button.

ItemDeletableFunc<TItem, bool>?Added in 0.1.0-alpha.20

Which rows can be deleted; all of them when it's not set. It's checked on a delete too, not just when drawing the button.

@bind-EditKeystring?Added in 0.1.0-alpha.20 @bind: Interactive only

The key of the row being edited, or null. Binding it (@bind-EditKey) on an interactive page keeps it, with sort and page, in the component. Otherwise it's in the address (?edit=42), or where another of them is bound, such as Page, kept in the component.

EditCopyFunc<TItem, TItem>?Added in 0.1.0-alpha.20

Makes the copy of a row that's edited, on an interactive page, in place of a shallow copy: for a type that holds what a copy mustn't share.

Events (2)

OnSaveEventCallback<DataGridSave<TItem>>Added in 0.1.0-alpha.20

Saves an edited row. With no errors added, the editor closes and the rows load again; with errors, it stays open and shows them. It's called only when the row is valid by its rules.

OnDeleteEventCallback<DataGridDelete<TItem>>Added in 0.1.0-alpha.20

Deletes a row, once someone has confirmed it. Setting it adds a Delete action to each row. With no error added, the dialog closes and the rows load again.

Parts (9)

Components written inside DataGrid, and the columns' members, which PropertyColumn and TemplateColumn share.

`ActionColumn<TItem>`

The column that holds a row's actions, at the end of a DataGrid. A grid with editing has one by itself, with Edit and Delete; write one to set their order, or to add your own actions.

ChildContentRenderFragment<TItem>?Added in 0.1.0-alpha.20

The row's actions: EditAction, DeleteAction and RowAction. context is the row.

OverflowRowActionOverflow = RowActionOverflow.AutoAdded in 0.1.0-alpha.20

Where its actions show, unless one says otherwise. RowActionOverflow.Always makes it a ⋮ menu. The default, RowActionOverflow.Auto, is buttons, which move into the menu once the grid hides columns to fit (DataGridSmallScreen.HideColumns).

`RowAction`

An action of your own on a row: an icon button with a tooltip, or an item in its menu.

IconIconData?Added in 0.1.0-alpha.20

Its icon.

Labelstring requiredAdded in 0.1.0-alpha.20

What it does: the button's name and tooltip, or the item's text. Say which row, if it isn't clear from a list of them.

Hrefstring?Added in 0.1.0-alpha.20

Makes it a link.

Namestring?Added in 0.1.0-alpha.20

The form field name the button posts under, with Value, and Form as the table can't hold a form of its own.

Valuestring?Added in 0.1.0-alpha.20

The value the button posts.

Formstring?Added in 0.1.0-alpha.20

The id of the form it submits. Setting it makes it a submit button.

Disabledbool = falseAdded in 0.1.0-alpha.20

Whether it can't be used.

Visiblebool = trueAdded in 0.1.0-alpha.20

Whether this row has it.

OverflowRowActionOverflow? (computed)Added in 0.1.0-alpha.20

Where it shows. Defaults to the column's Overflow.

OnClickEventCallbackAdded in 0.1.0-alpha.20Interactive only

Runs when it's used, on interactive pages.

`EditAction`

The row's edit action: a pencil, or an item in its menu. Drawn only where the row can be edited.

DisabledReasonstring?Added in 0.1.0-alpha.20

Where ItemEditable says no, the action stays, disabled, with this as its tooltip, in place of leaving a gap. The reason can depend on the row.

Visiblebool = trueAdded in 0.1.0-alpha.20

Whether this row has it.

OverflowRowActionOverflow? (computed)Added in 0.1.0-alpha.20

Where it shows. Defaults to the column's Overflow.

`DeleteAction`

The row's delete action, which asks first: a trash can, or an item in its menu. Drawn only where the row can be deleted.

DisabledReasonstring?Added in 0.1.0-alpha.20

Where ItemDeletable says no, the action stays, disabled, with this as its tooltip, in place of leaving a gap. The reason can depend on the row.

Visiblebool = trueAdded in 0.1.0-alpha.20

Whether this row has it.

OverflowRowActionOverflow? (computed)Added in 0.1.0-alpha.20

Where it shows. Defaults to the column's Overflow.

`EditLayout<TItem>`

Sets up a DataGrid's generated edit dialog. Its parameters are the dialog's and the form's, as Form names them. Inside it, an EditField for a column sets its place and its label, hint or span, and the library's components can go around them. The grid still draws, binds and checks each field. An editable column left out is added at the end, as a field that isn't drawn isn't posted, and would save as empty; to leave one out, set its Editable to false.

ChildContentRenderFragment?Added in 0.1.0-alpha.20

The fields, and whatever goes around them.

Columnsint = 1Added in 0.1.0-alpha.20

The columns the fields are laid out in, as Form's Columns. Defaults to 1.

LayoutFormLayout = FormLayout.VerticalAdded in 0.1.0-alpha.20

How labels sit next to fields, as Form's Layout.

SizeDialogSize = DialogSize.MdAdded in 0.1.0-alpha.20

The dialog's size.

TitleFunc<TItem, string>? (computed)Added in 0.1.0-alpha.20

The dialog's title, from the row, which is the default for a new one. Defaults to "Edit" and the row's label.

`EditField`

A column's generated field, placed in an EditLayout<T>.

Keystring requiredAdded in 0.1.0-alpha.20

The column's key: its SortKey, or its property's name in lower case, as in the address.

Labelstring?Added in 0.1.0-alpha.20

The field's label, if not the column's title.

Hintstring?Added in 0.1.0-alpha.20

The field's hint.

ColSpanResponsive<int>ResponsiveAdded in 0.1.0-alpha.20

The columns of the form the field spans, such as 2 or GridSpan.Full.

`EditFormTemplate<TItem>`

Your own form in a DataGrid's edit dialog, in place of the generated one, for what isn't fields of the row, such as steps or a save across several records. The grid opens and closes the dialog; the form, its model and its [SupplyParameterFromForm] are yours, and on a static page, so is guarding against forged fields, with a view model.

ChildContentRenderFragment<DataGridEditFormContext<TItem>>?Added in 0.1.0-alpha.20

The form. Call context.CloseAsync() when it has saved.

SizeDialogSize = DialogSize.MdAdded in 0.1.0-alpha.20

The dialog's size.

TitleFunc<TItem, string>? (computed)Added in 0.1.0-alpha.20

The dialog's title, from the row, which is the default for a new one. Defaults to "Edit" and the row's label.

`DataGridAdd`

Puts a DataGrid's Add button, from NewItem, among your toolbar items. It stays in the bar, at the end unless Position says otherwise.

ShowTextbool? (computed)Added in 0.1.0-alpha.20

Its text beside its icon, or only its icon. Defaults to the grid's ToolbarLabels.

PositionToolbarPosition = ToolbarPosition.EndAdded in 0.1.0-alpha.20

Where it sits, among the items of that position in the order they're written.

`PropertyColumn<TItem, TValue>`

A column that shows one property of each item, formatted, and can sort by it. The title and sort key come from the property ([Display(Name)] is used when present).

Editablebool?Added in 0.1.0-alpha.20

Whether a row's editor has a field for this column, in a DataGrid with an EditMode. Only editable columns take a value from a save, so a forged one changes nothing. By default a column is editable if it can be, shown or not: a settable property of the row, of a type with a field, without [Key], [Editable(false)] or [ReadOnly(true)]. Set it to false on what people mustn't change, such as the row's key.

EditTemplateRenderFragment<DataGridEditField<TItem>>?Added in 0.1.0-alpha.20

Your own field for the column, in place of the one for its type. Bind it to context.Item, and pass context.Attributes: <Select @bind-Value="context.Item.OwnerId" Items="owners" @attributes="context.Attributes" />.

Types (9)

`DataGridDelete`

class

A delete from a DataGrid, for its OnDelete. With no error added, the dialog closes and the rows load again.

DataGridDelete members
Member	Description
`Item TItem`	The row to delete.
`AddError(string message)`	Reports why it can't be deleted, shown in the dialog, which stays open.

`DataGridEditField`

class

A row's field in the editor, for a column's EditTemplate.

DataGridEditField members
Member	Description
`Item TItem`	The copy of the row being edited, to bind the field to.
`Name string`	The name the field posts under.
`Attributes IReadOnlyDictionary<string, object>`	What a library field needs to fit in: its name, label, hint and span. Pass them with `@attributes`.

`DataGridEditFormContext`

class

What a EditFormTemplate<T> gets.

DataGridEditFormContext members
Member	Description
`Item TItem`	The row as loaded, which isn't a copy, or the default for a new one.
`IsNew bool`	Whether it's a new row.
`Cancel RenderFragment`	The Cancel button, for your `DialogFooter`.
`CloseAsync()`	Closes the dialog and loads the rows again, once your form has saved.

`DataGridEditMode`

enum

How a DataGrid edits a row.

DataGridEditMode values
Value	Description
`None`	It doesn't. The default.
`Dialog`	In a dialog, with a field for each editable column.
`Row`	In the row, with a field in each editable column that's shown. A new row starts at the top of the page. Not with rows that load as they're needed, which could scroll it away.
`Cell`	One cell at a time, on an interactive page: a click, Enter, F2 or typing starts it, and Tab, Enter or a click elsewhere saves it. `OnSave` runs for each cell that changed. A new row is edited as in `DataGridEditMode.Row`, and so is every row on a static page, where a round trip for each cell would make moving through them unusable.

`DataGridSave`

class

A save from a DataGrid, for its OnSave. With no errors added, the editor closes and the rows load again. With errors, it stays open and shows them.

DataGridSave members
Member	Description
`Item TItem`	The row with its new values: a copy, and valid by its rules. Only editable columns have changed.
`Original TItem`	The row as it was loaded, or the default for a new one.
`IsNew bool`	Whether it's a new row, from `NewItem`.
`AddError<TValue>(Expression<Func<TItem, TValue>> field, string message)`	Reports a problem with the save as a whole, shown at the top of the editor.
`AddError(string message)`	Reports a problem with the save as a whole, shown at the top of the editor.
`CopyTo(TItem target)`	Copies the editable columns' new values to `target`, such as an entity just read from the database, and leaves the rest of it alone.

`DialogSize`

enum

The width of a Dialog. A Drawer, or a dialog at the start or end edge, is narrower: Sm 20rem, Md 24rem, Lg 32rem, Xl 40rem.

DialogSize values
Value	Description
`Sm`	24rem. Confirmations.
`Md`	32rem (the default).
`Lg`	48rem. Forms with two columns.
`Xl`	64rem. Tables and previews.
`Full`	The whole viewport.

`FormLayout`

enum

How a Form lays out labels and fields.

FormLayout values
Value	Description
`Vertical`	Labels above fields (the default).
`Horizontal`	Labels in a column to the left of fields, from 640px up.

`RowActionOverflow`

enum

Where a row's action shows in a DataGrid's ActionColumn<T>.

RowActionOverflow values
Value	Description
`Auto`	A button in the row, until the grid hides columns to fit (`DataGridSmallScreen.HideColumns`); then in the row's ⋮ menu. The default.
`Never`	A button in the row, always.
`Always`	In the row's ⋮ menu.

`ToolbarPosition`

enum

Where an item of a Toolbar sits.

ToolbarPosition values
Value	Description
`Start`	At the start (the left in left-to-right text), the default.
`Center`	In the middle, kept centered between the start and the end.
`End`	At the end, before the "…" menu.