Activities of "mladen.macanovic"

Yes, I gave you one example for create modal. But the same rule can be applied for edit also.

Hi,

1. In our current implementation of AbpCrudPageBase it is required to have two modals for new and edit operations. If you don't want to make too much duplicate code you can optimize it a little by creating a new wrapper component for the modal fields. eg

Create a component named UserFields.razor

<Validation MessageLocalizer="@LH.Localize">
    <Field>
        <FieldLabel>@L["DisplayName:Name"]</FieldLabel>
        <TextEdit @bind-Text="Entity.Name">
            <Feedback>
                <ValidationError />
            </Feedback>
        </TextEdit>
    </Field>
</Validation>
<Validation MessageLocalizer="@LH.Localize">
    <Field>
        <FieldLabel>@L["DisplayName:Surname"]</FieldLabel>
        <TextEdit @bind-Text="Entity.Surname">
            <Feedback>
                <ValidationError />
            </Feedback>
        </TextEdit>
    </Field>
</Validation>
@code{
  [Parameter] public IdentityUserCreateOrUpdateDtoBase Entity { get; set; }
}

And in modals pass it an entity reference

<Modal @ref="CreateModal">
        <ModalBackdrop />
        <ModalContent Centered="true">
            <Form>
                <ModalHeader>
                    <ModalTitle>@L["NewUser"]</ModalTitle>
                    <CloseButton Clicked="CloseCreateModalAsync" />
                </ModalHeader>
                <ModalBody>
                    <Validations @ref="@CreateValidationsRef" Model="@NewEntity" ValidateOnLoad="false">
                        <UserFields Entity="@NewEntity" />
                    </Validations>
                </ModalBody>
                <ModalFooter>
                    <Button Color="Color.Secondary" Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
                    <SubmitButton Clicked="@CreateEntityAsync" />
                </ModalFooter>
            </Form>
        </ModalContent>
    </Modal>

The same can be done for edit modal.

2. You can distinguish New from Editing operation when you click on the New or Edit buttons.

For example , create an enum Operation { Create, Edit } and override OpenCreateModalAsync and OpenEditModalAsync to set your variable operation = Operation.Create or operation = Operation.Edit.

That way you can decide which entity to change.

Regarding your final question for FileEdit, it looks good. That is how it is meant to be used.

Use StatusChanged event on <Validations> component.

Here I have modified the code from Blazorise demo for demonstration.

<Modal @ref="modalRef">
    <ModalContent Centered="true">
        <ModalHeader>
            <ModalTitle>
                <Icon Name="IconName.Edit" />
                User edit
            </ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody>
            <Validations @ref="modalValidations" Model="@modalUser" ValidateOnLoad="false" StatusChanged="@OnStatusChanged">
                <Validation>
                    <Field Horizontal="true">
                        <FieldLabel ColumnSize="ColumnSize.IsFull.OnTablet.Is2.OnDesktop">Full Name</FieldLabel>
                        <FieldBody ColumnSize="ColumnSize.IsFull.OnTablet.Is10.OnDesktop">
                            <TextEdit Placeholder="First and last name" @bind-Text="@modalUser.Name">
                                <Feedback>
                                    <ValidationError />
                                </Feedback>
                            </TextEdit>
                        </FieldBody>
                    </Field>
                </Validation>
                <Validation>
                    <Field Horizontal="true">
                        <FieldLabel ColumnSize="ColumnSize.IsFull.OnTablet.Is2.OnDesktop">Email</FieldLabel>
                        <FieldBody ColumnSize="ColumnSize.IsFull.OnTablet.Is10.OnDesktop">
                            <TextEdit Placeholder="Enter email" @bind-Text="@modalUser.Email">
                                <Feedback>
                                    <ValidationError />
                                </Feedback>
                            </TextEdit>
                        </FieldBody>
                    </Field>
                </Validation>
            </Validations>
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@CloseUserModal">Close</Button>
            <Button Color="Color.Primary" Clicked="@CloseUserModal" Disabled="@saveDisabled">Save Changes</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

@code{
    Validations validations;
    Validations annotationsValidations;

    bool saveDisabled = true;

    Modal modalRef;
    Validations modalValidations;
    User modalUser = new User();

    Task OnStatusChanged( ValidationsStatusChangedEventArgs eventArgs )
    {
        saveDisabled = eventArgs.Status != ValidationStatus.Success;

        return Task.CompletedTask;
    }
    
    Task OpenUserModal()
    {
        saveDisabled = true;

        // re-initialite model will be act as a "first load" for validations inside of modal dialog
        modalUser = new User();

        modalValidations.ClearAll();

        modalRef.Show();

        return Task.CompletedTask;
    }

    Task CloseUserModal()
    {
        modalRef.Hide();

        return Task.CompletedTask;
    }
}

You need to wrap Select with validations and use Feedback element.

<Validation>
    <Select TValue="int" @bind-SelectedValue="@NewEntity.NetworkTypeId">
        <SelectItem TValue="int" Value="0">@L["SupplyNetwork:SelectNetworkType"]</SelectItem>
        @foreach ( var network in networkTypeList )
        {
            <SelectItem TValue="int" Value="@network.Id">
                @network.Name
            </SelectItem>
        }
        <Feedback>
            <ValidationError />
        </Feedback>
    </Select>
</Validation>

Also, don't forget to read Blazorise documentation for reference.

Hi @safi,

Multiselect with checkboxes is not supported in Blazorise. You can try building your own custom component by using other parts of Blazorise. Here I will show you one example using Dropdown and Check boxes.

<Dropdown>
    <DropdownToggle Color="Color.Primary">Menu</DropdownToggle>
    <DropdownMenu>
        <Check TValue="bool">One</Check>
        <Check TValue="bool">Two</Check>
        <Check TValue="bool">Three</Check>
        <Check TValue="bool">Four</Check>
    </DropdownMenu>
</Dropdown>

Please look at the Blazorise to learn how to use a DetailRowTemplate https://blazorise.com/docs/extensions/datagrid/#detailrowtemplate

To control the visibility of DetailRowTemplate you can use DetailRowTrigger handler. Once youz click on your button you set the flag that will be used by the DetailRowTrigger handler.

Example:

Task OnButtonClick()
{
  someFlag = true;
  return Task.CompletedTask;
}

and

DetailRowTrigger="@((item)=>item != null && someFlag == true)"

@safi Can you please post a code sample of how you use the DataGrid? Thanks