
Table
Commonly used in single table maintenance, simple addition, deletion, modification, search, sorting, filtering, search and other common functions can be realized through attribute configuration, and very complex business requirements can be realized through advanced usage of Template
Set Items
as the data source, without setting OnSaveAsync
OnDeleteAsync
callback delegate to use built-in processing logic to update and delete functions
Demo
Setting Items
as the data source eliminates the need to set OnSaveAsync
OnDeleteAsync
callback delegates to use built-in processing logic for updates and deletes
Set ShowSearch
to show the query component
Demo
In this example, the right alignment of Count
is set, the Complete
column is set to center alignment, and the Boolean column is automatically rendered as a Switch
component
When the OnAddAsync
or OnSaveAsync
callback delegate method is set, if the EditTemplate
is not set to edit the template, the component will try to automatically generate the form maintenance UI
Demo
Client-side validation can be achieved by setting validation tags such as [Required]
of the Foo
attribute of the class instance Foo
of the generic constraint of TItem
When the data binding type is a nullable type, it is automatically allowed to be null, such as the date binding column is of type DateTime?
When the data binding type is a numerical type, for example, if the quantity binding column is of type int
, numerical verification is performed automatically
Some data columns presented in the table are calculated results. This type of column cannot be edited. By setting Editable=false
to automatically generate the editing UI, the editing component of this column will not be generated, such as In this example, the Count
column does not appear in the edit popup
By setting Readonly=true
to automatically generate editing UI, this field will be read-only, please assign the default value to Model
when creating a new one
Make the extension buttons appear in front of the row by setting IsExtendButtonsInRowHeader=true
Make the edit popup draggable by setting EditDialogDraggable='true'
When the EditTemplate
of the column is set, the component automatically generates the form maintenance UI using this template as the rendered UI
Demo
EditTemplate
of the name columnName
is listed as a custom component TableNameDrop
, which defaults to please select ...
when creating a new oneBy setting the EditMode
property of the table, set the component to edit the row data in the pop-up window or edit the data in the row
Demo
EditMode
is an enumeration type and its values are: Popup
EditForm
InCell
Its default value is Popup
pop-up window to edit row data
In this example, the data source Items
is set as two-way binding, which is especially suitable for parent-child table entry. You can directly use the data source when saving.
EditForm
Pattern example
InCell
Pattern example
When the data operation callback method is not provided, the component automatically finds the registered data service to add, delete, modify and check the data.
Demo
The database operations of adding, deleting, modifying and checking are performed by registering the data service without assigning the following callback delegates. The priority level is that the callback method is called first if there is a callback method.
OnAddAsync
OnDeleteAsync
OnSaveAsync
OnQueryAsync
services.AddTableDemoDataService();
By setting the DataService
attribute of the table, use an independent data service to add, delete, modify and check data
Demo
custom data service
DataServices
parameter, if the instance provided by the internal use of the injected service is not setEditDialogShowMaximizeButton
parameter, the Maximize button is displayed in the edit pop-up windowservices.AddTableDemoDataService();
Set EditFooterTemplate
custom button in EditDialog
Footer
Demo
Click the Edit button in the table to pop up the Edit pop-up window. The buttons in the pop-up window Footer
are user-defined buttons. In order to keep the functions of the original Close and Save buttons while facilitating the second opening, two corresponding components DialogCloseButton
DialogSaveButton
These two buttons do not need to write the click related processing methods
<EditFooterTemplate Context="model">
<Button Text="Popup" Color="Color.Danger" Icon="fa-regular fa-comment-dots" OnClick="() => OnClick(model)"></Button>
<DialogCloseButton />
<DialogSaveButton Color="Color.Primary" Icon="fa-solid fa-floppy-disk" Text="Save" />
</EditFooterTemplate>
B station related video link
交流群