Activities of "mladen.macanovic"

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

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)"

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>

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.

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;
    }
}

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.

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

Hi,

Regarding the version conflict it might be the same issue as described in https://github.com/abpframework/abp/issues/7997. But without more information I can only guess. If that is the same issue then you will need to wait a little more until we release new ABP.

As of the sidebar problem. While you are still free to use it keep in mind it is an obsolete component for Blazorise. If possible you should switch to the more advanced and feature rich Bar component https://blazorise.com/docs/components/bar/. And if you want to look at the source, look at https://github.com/stsrki/Blazorise/blob/master/Demos/Blazorise.Demo/Layouts/MainLayout.razor

As far as I know the OrderBy only works with single list sources, which is usualy used for repository pattern.

You could try with diferent approach maybe:

• https://stackoverflow.com/questions/32061770/call-orderby-with-a-field-name-as-a-string
• https://stackoverflow.com/questions/41244/dynamic-linq-orderby-on-ienumerablet-iqueryablet?rq=1

Based on stackstrace message it seems the problem is with one of your model members. I see that all your Data grid fields are defined with nameof except for Location, eg. <GridColumn Field="Location" FieldType="@(typeof(string))" Title="@L["OutageReportGrid.Location"]" />. Maybe that is the problem? Also can you show us the OutageReportDto class?

I'm not that familiar with Telerik systems but I remember that Blazor don't work well with generic types when accesed through JSInterop. That is the only thing that comes to my mind regarding the error message. Maybe Telerik is doing something under the hood that could make trouble.