Serenity: Sum of column in Detail Dialog - Shown/calculated immediately in a field of Parent Dialog

[biggikalli]

Hi community,

Does anyone have a better solution regarding sum field in a form, exactly like issue #1021?
A solution where you do not have to save the master dialog before getting the sum-amount into the field in the master dialog? (Not write to SQL table before, preferably)

I have the exact same field, a sum of a column in detail dialog which I want to be calculated and shown immediately in the master dialog after the detail dialog has been closed. But if you take the steps in #1021, then you need to save the master-form before to be able to query directly from the saved table.

Is it possible to call List action in xyzDetailEndpoint to sum up the cached/in-memory column data?
OR could someone point me in the right direction on how to Save a Parent-Dialog automatically upon closing it's Child-Detail-Dialog.

Thanks

[ramveersgh]

Why don't you use the grouping to show the total? like this -

[biggikalli]

Hi Ramveer, 

I want the sum to appear in a specific field on the master form/dialog, not in the detail grid which is inside the form. 

The grouping example doesn't cover that part.

I would be happy if I could just let the form save (apply changes) when the details dialog closes. With that, the sum field would calculate and show the value...  as per my picture of the form. 

Regards, Biggi 

[volkanceylan]

Here is a sample for you for OrderDialog constructor:

    @Serenity.Decorators.registerClass()
    export class OrderDialog extends Serenity.EntityDialog<OrderRow, any> {
        constructor() {
            super();

            (this.form.DetailList.view as any).onDataChanged.subscribe(() => {
                var total = 0;
                for (var k of this.form.DetailList.getItems()) {
                    total += k.LineTotal || 0;
                }
                Q.notifySuccess(total.toString());
            });
        }

Replace Q.notifySuccess with form.MyField.value = total;

[biggikalli]

@volkanceylan, thank you.
This code worked like a charm, just like you yourself always do :)

[rgilsimoes]

Hi! I'm tying this snipet in my Form and I get the Q.notifySuccess message upon openning the Master form but not after adding new records on the Detail Grid.

Any clues on this?

[rgilsimoes]

I just found out that I add not inherited the Dialog from GridEditorDialog. After changing the grid updated fine and the subscribe() function also worked!

[ckrassas]

Here is a sample for you for OrderDialog constructor:

    @Serenity.Decorators.registerClass()
    export class OrderDialog extends Serenity.EntityDialog<OrderRow, any> {
        constructor() {
            super();

            (this.form.DetailList.view as any).onDataChanged.subscribe(() => {
                var total = 0;
                for (var k of this.form.DetailList.getItems()) {
                    total += k.LineTotal || 0;
                }
                Q.notifySuccess(total.toString());
            });
        }

Replace Q.notifySuccess with form.MyField.value = total;

I've been dealing with this issue for about a week now. The code from @volkanceylan works amazing. The only problem is when deleting. I did some research and it seems that instead of using just onDataChanged you can also use onRowCountChanged for when deleting. For my project it works amazing. Hope it helps.

This should help #3818 / #3769 and so on with delete issue. Many thanks to @volkanceylan for an amazing product and the help provided.

[ga5tan]

@ckrassas but how do u use onRowCountChange?
this:

(this.form.MailingList.view as any).onRowCountChange.subscribe(() => {
                this.UpdateEmailCount();                
            });

fails, says there is no onRowCountChange:

Message: TypeError: _this.form.MailingList.view.onSubmit.subscribe is not a function

[ckrassas]

@ckrassas but how do u use onRowCountChange?
this:

(this.form.MailingList.view as any).onRowCountChanged.subscribe(() => {
                this.UpdateEmailCount();                
            });

fails, says there is no onRowCountChange:

Message: TypeError: _this.form.MailingList.view.onSubmit.subscribe is not a function

Sorry @ga5tan but it is OnRowCountChanged. I misspelled it when I was writing my reply. Hope that helps. I updated my response also.

[ga5tan]

@ckrassas
same with changed :(

Message: TypeError: _this.form.MailingList.view.OnRowCountChanged is undefined

My Editor is:

export class MailingListEditor extends Common.GridEditorBase

I ont understand what is the diference here :(

[ckrassas]

@ga5tan This is not to placed in the editor. This is to be used within your Dialog. It is there to see changes made to the grid.

[ga5tan]

@ckrassas - yeah, I do it in EntityDialog and it's working:

(this.form.MailingList.view as any).onDataChanged.subscribe(() => {
this.UpdateEmailCount();
});

but your :

        (this.form.MailingList.view as any).OnRowCountChanged.subscribe(() => {
            this.UpdateEmailCount();                
        });

wont work :(

[ckrassas]

@ga5tan Please check the version that you are using. I am using 3.7.7 and Also make sure that your grid is updating once a change is made to reflect the changes on the grid. Another this is to make sure this is placed inside the constructor(). Not sure why it is not working if you editor works correctly.

[ga5tan]

@ckrassas somehow I ended up with spelling mistake OnDataChanged instead of onDataChanged (leading O should be lowercase)
now it works! thx

[stixoffire]

@ckrassas
Thanks for posting this answer - it is an extremely important detail - the intellisense does not show this as a function but it does work!

I have a button in my dialog that is dependent on an item in the DetailsList - Items present button visible, no items and button must be disabled.

I also have in the detailseditor a need to calculate the totals for that grid as items are added and removed.

With your direction I used the following code to achieve both requirements.

Dialog

            (this.form.ItemsList.view as any).onRowCountChanged.subscribe(() => {
                this.submitHidden = (this.form.ItemsList.rowCount() < 1);
                this.toggleSubmitVisibility(this.submitHidden);
            });

DetailEditor

            (this.view as any).onRowCountChanged.subscribe(() => {
                var total = 0;
                for (var k of this.getItems()) {
                    total += k.LineTotal || 0;
                }
    });

[flextrio-gandhi]

@ramveersgh > Why don't you use the grouping to show the total? like this -

Hi Ramveer, I'm trying this, but i didn't get it .please post clearly