Tips for triggering the update of index.view when the Save command is triggered within an active dialog

Question

Tips for triggering the update of index.view when the Save command is triggered within an active dialog

When I try to save in an open dialog using the Save command, the parent index.view does not update. However, everything works fine when using the SaveAndClose command. This was tested on the Product object at https://github.com/alex-kukhtin/A2v10.Web.Sample.git. The platform used is A2v10, but unfortunately I am unable to tag yet.

<Dialog xmlns="clr-namespace:A2v10.Xaml;assembly=A2v10.Xaml" 
        Title="{Bind Product.Id, Format='@[Product] [{0}]'}">
    <Dialog.Buttons>
        <Button Content="@[SaveAndClose]" Command="{BindCmd SaveAndClose, ValidRequired=True}"/>
        <Button Content="@[Save]" Command="{BindCmd Save, ValidRequired=True}"/>
        <Button Content="@[Cancel]" Command="{BindCmd Close}"/>
    </Dialog.Buttons>
    <TabPanel>
        <Tab Header="@[General]">
            <Grid>
                <TextBox Label="@[Name]" Value="{Bind Product.Name}"/>
                <TextBox Label="@[BarCode]" Value="{Bind Product.BarCode}" Width="20rem"/>
                <TextBox Label="@[Article]" Value="{Bind Product.Article}" Width="20rem"/>
                <TextBox Label="@[Memo]" Value="{Bind Product.Memo}" Multiline="True" Rows="3"/>
            </Grid>
        </Tab>
        <Tab Header="@[Images]" Padding="1rem">
            <Image Source="{Bind Product.Picture}" Limit="100"
                Base="/catalog/product" Height="18rem"/>
        </Tab>
    </TabPanel>
</Dialog>

PS: Triggered by the Edit command


I try: executing the Save command in an open dialog
I expecting: The parent index.view is update

typescript xaml

Answer 1

Answer №1

This is the intended behavior.

The update process is determined by how the dialog is triggered.

If you use the Edit command, the index will update the editing element after the dialog closes with the SaveAndClose command.

When the Save command is used, the dialog remains open, so the calling code does not regain control.

To resolve this issue, it is recommended to utilize events.

You can specify that when the element is saved, an event should be triggered and caught in the index.

Here's an example:

    <Dialog SaveEvent="app.element.saved">

Within index.template.ts

const template: Template = {
    events: {
        'app.element.saved': elementSaved
    }
};

export default template;

function elementSaved(elem) {
   const ctrl: IController = this.$ctrl;
   // Find the element in the list and update if found or add if not.
   let found = this.Items.find(x => x.Id === elem.Id);
   if (found)
      found.$merge(elem);
   else
      this.Items.$append(elem); 
}

Lastly, if you are working with events, call the dialog using the Show command instead of the Edit command to prevent unnecessary updates.

Answer 2

This is the intended behavior.

The update process is determined by how the dialog is triggered.

If you use the Edit command, the index will update the editing element after the dialog closes with the SaveAndClose command.

When the Save command is used, the dialog remains open, so the calling code does not regain control.

To resolve this issue, it is recommended to utilize events.

You can specify that when the element is saved, an event should be triggered and caught in the index.

Here's an example:

    <Dialog SaveEvent="app.element.saved">

Within index.template.ts

const template: Template = {
    events: {
        'app.element.saved': elementSaved
    }
};

export default template;

function elementSaved(elem) {
   const ctrl: IController = this.$ctrl;
   // Find the element in the list and update if found or add if not.
   let found = this.Items.find(x => x.Id === elem.Id);
   if (found)
      found.$merge(elem);
   else
      this.Items.$append(elem); 
}

Lastly, if you are working with events, call the dialog using the Show command instead of the Edit command to prevent unnecessary updates.

Tips for triggering the update of index.view when the Save command is triggered within an active dialog

Answer №1

Similar questions

The risk of a race condition could arise when working with nested switchMaps in ngr

Having trouble with your React/TypeScript/Redux/Thunk action not dispatching and the state remaining unchanged?

Error: module not found in yarn

Using Angular 4 constructor value in a condition with *ngIf

The 'target' property is not found on the specified 'string' type

Exploring TypeScript: Determining the data type of an object key within the object

TypeScript enables the use of optional arguments through method overloading

When an object in Typescript is clearly a function, it throws a 'cannot invoke' error

Executing the routing component prior to any other tasks

callback triggering state change

What is the best way to transfer the variant property of the material-ui TextField when using a higher-level React component?

What is the best way to convert a recordset to an array using React?

Error: Missing provider for MatBottomSheetRef

What is the correct method for retrieving a specific child element in React?

What are some best practices for implementing pagination using Angular Material?

Generating a fresh instance of input value in Angular2

When zooming out, Leaflet displays both tile layers

Is Angular2 detecting changes based on value equivalence or reference equality?

The Angular Material side navigation module is not being acknowledged

Retrieve an instance of the property class within a property decorator