- book-store/part-02: switch the Books page from AbpMudExtensibleDataGrid to
the standard MudBlazor MudDataGrid + <PropertyColumn> pattern (matches
Identity.Pro SecurityLogManagement); use RowsPerPage instead of PageSize
- book-store/part-03: replace the abp-internal MudDataGridEntityActionsColumn /
MudEntityActions / MudEntityAction wrappers with the standard MudBlazor
TemplateColumn + MudMenu + MudMenuItem so the tutorial stays approachable;
drop a misleading link to the legacy abp-samples/MudBlazorSample demo;
add a note that MudDatePicker.@bind-Date requires DateTime?
- book-store/part-09: wrap MudDialog.ShowAsync/CloseAsync calls with
InvokeAsync (matches Identity.Pro OrganizationUnitsManagement) and harden
OnDataGridReadAsync against null SortBy entries
@ -651,9 +651,9 @@ Open the `Books.razor` and replace the content as the following:
</CardHeaderContent>
</MudCardHeader>
<MudCardContent>
<AbpMudExtensibleDataGridT="BookDto"
ServerData="OnDataGridReadAsync"
RowsPerPage="@PageSize">
<MudDataGridT="BookDto"
ServerData="OnDataGridReadAsync"
RowsPerPage="@PageSize">
<Columns>
<PropertyColumnProperty="x => x.Name"
Title="@L["Name"]" />
@ -678,7 +678,7 @@ Open the `Books.razor` and replace the content as the following:
</CellTemplate>
</PropertyColumn>
</Columns>
</AbpMudExtensibleDataGrid>
</MudDataGrid>
</MudCardContent>
</MudCard>
@ -696,7 +696,7 @@ Open the `Books.razor` and replace the content as the following:
* Inherited from `AbpMudCrudPageBase<IBookAppService, BookDto, Guid, PagedAndSortedResultRequestDto, CreateUpdateBookDto>` which implements all the CRUD details for us.
* `Entities`, `TotalCount`, `PageSize`, `OnDataGridReadAsync` are defined in the base class.
* `LocalizationResource` is set to the `BookStoreResource` to localize the texts.
* `AbpMudExtensibleDataGrid` is the ABP-extended `MudDataGrid` that supports the [data table column extension system](../../framework/ui/blazor/data-table-column-extensions.md).
* This page uses the standard MudBlazor `MudDataGrid` with `<PropertyColumn>` definitions. ABP also ships an `AbpMudExtensibleDataGrid` that integrates with the [data table column extension system](../../framework/ui/blazor/data-table-column-extensions.md) when you need to extend module pages.
While the code above is pretty easy to understand, you can check the MudBlazor [Card](https://mudblazor.com/components/card) and [DataGrid](https://mudblazor.com/components/datagrid) documents to understand them better.
@ -1253,7 +1253,7 @@ Open the `Books.razor` and add the following code to the end of the page:
* The form uses `[Required]`/DataAnnotations for validation; messages are localized via the same `AbpResource` localization system.
* The `_createDialog` field, `CloseCreateDialogAsync`, `CreateFormRef` and `CreateEntityAsync` are all defined in `AbpMudCrudPageBase`. Check the [MudBlazor documentation](https://mudblazor.com/components/dialog) if you want to understand the `MudDialog` and other components.
* `MudDatePicker.@bind-Date` requires a nullable `DateTime?`. If your DTO uses non-nullable `DateTime`, change it to `DateTime?` (`public DateTime? PublishDate { get; set; }`) when using the MudBlazor variant — see [abp-samples/MudBlazorSample](https://github.com/abpframework/abp-samples/tree/master/MudBlazorSample) for a complete reference.
* `MudDatePicker.@bind-Date` requires a nullable `DateTime?`. If your DTO uses non-nullable `DateTime`, change it to `DateTime?` (`public DateTime? PublishDate { get; set; }`) when using the MudBlazor variant.
{{end}}
@ -1291,23 +1291,23 @@ The `DataGridEntityActionsColumn` component is used to show an "Actions" dropdow
{{if BlazorUI == "MudBlazor"}}
Open the `Books.razor` and add the following `MudDataGridEntityActionsColumn` as the first column inside the `<Columns>` section of the `AbpMudExtensibleDataGrid`:
Open the `Books.razor` and add the following `TemplateColumn` as the first column inside the `<Columns>` section of the `MudDataGrid`:
* `OpenEditDialogAsync` is defined in the base class which takes the entity (book) to edit.
The `MudDataGridEntityActionsColumn` component is used to show an "Actions" menu for each row in the data grid. It shows a **single icon button** when there is only one available action and a dropdown menu when there are multiple actions.
This renders an "Actions" dropdown menu (`MudMenu`) for each row in the data grid. We will add the **Delete** menu item later in the *Deleting a Book* section.
{{end}}
@ -1463,13 +1463,17 @@ Add the following `EntityAction` code under the "Edit" action inside `EntityActi
{{if BlazorUI == "MudBlazor"}}
Add the following `MudEntityAction` code under the "Edit" action inside `MudEntityActions`:
Add the following `MudMenuItem` after the "Edit" item inside the actions `MudMenu`: