Save button is not work in dialog when i use loadNewAndOpenDialog or loadEntityAndOpenDialog

[wow-prime]

My code in GridEditorBase grid:
protected onClick(e: MouseEvent, row: number, cell: number): void {

// let base grid handle clicks for its edit links
super.onClick(e, row, cell);

// if base grid already handled, we shouldn"t handle it again
if (e.defaultPrevented || (e as any)?.isDefaultPrevented?.()) {
    return;
}

// get reference to current item
var item = this.itemAt(row);

// get reference to clicked element
var target = Fluent(e.target);

if (target.parent().hasClass('inline-action'))
    target = target.parent();
if (target.hasClass("delete-row")) {
    e.preventDefault();
    this.view.deleteItem(this.view.getItems()[row].Code);
    this.view.refresh();
}

if (target.hasClass('add-row')) {
    var dlg = new BudgetOrganizationGridEditorDialog();
    //this.initDialog(dlg);
    var Code = this.slickGrid.getDataItem(row).Code;
  
    dlg.loadNewAndOpenDialog(false);
    //dlg.loadEntityAndOpenDialog({
    //    OrganizationKey: null,
    //    BudgetPermissionsKey: null,
    //    Code: '',
    //    Name: '',
    //    ParentCode: Code,
    //    StoreType: 0,
    //    Type: 1,
    //    OpenMonth: '',
    //    HistoryStore: '',
    //    AliasCode: '',
    //    CreateUser: '',
    //    CreateDateTime: '',
    //    ModifyUser: '',
    //    ModifyDateTime: ''
    //    }, false);
}

}

My Code in Dialog:

@Decorators.registerClass('Budget.BasicData.BudgetOrganizationGridEditorDialog')
export class BudgetOrganizationGridEditorDialog extends GridEditorDialog<BudgetOrganizationRow, any> {
protected getFormKey() { return BudgetOrganizationForm.formKey; }
protected getRowDefinition() { return BudgetOrganizationRow; }
protected getService() { return BudgetOrganizationService.baseUrl; }
protected form = new BudgetOrganizationForm(this.idPrefix);
constructor(props?: any) {
super(props);
var _this = this;
}
protected afterLoadEntity() {
super.afterLoadEntity();
}
protected getToolbarButtons() {
var buttons = super.getToolbarButtons();
var _this = this;
return buttons;
}
}

How to solve this problem?

[LSNicholls]

@wow-prime,

One things I see that is different from how I use loadNewAndOpenDialog (which works fine):

Why have you commented out //this.initDialog(dlg); ? I think this is needed?

I can't comment on your usage of loadEntityAndOpenDialog, although that has always worked fine for me as well.

[wow-prime]

Regardless of whether there are commented out //this.initDialog(dlg); or not,
There is no way to execute it correctly.

[LSNicholls]

OK I just realized I don't fully understand what you are doing. Typically you don't have an "add entity row" in the rows of a grid; there is a button at the top of the page for that, outside the individual rows.

So you may be doing one of two things in your row-level button, and from the code you posted I can't tell which:

[ ] - are you trying to "clone" that specific row, in other words create a new entity row with some characteristics of the row the button is on, similar to a clone button in a dialog? This is something I have done a lot, and have generalized methods for, so if it is your goal I can show you that code.

[ ] - are you trying to add a new child entity row, which will have this specific row as its parent, so the dialog is a different entity than the grid? I am not sure if I have done this but would be happy to write a quick sample if this is your goal.

Also, just in case, can you answer the following:

1. do you see any errors in the console, is there a javascript error somewhere?
2. what version of Serenity are you using?
3. I don't know what protected getToolbarButtons() method in your dialog is supposed to be accomplishing, but since your problem is with the dialog save button, what happens if you don't have that method? Is there any other special code in the dialog related to saving or to that button that you haven't shown, or is it just a Serenity-native button?

[wow-prime]

There are two buttons.
the button 1 is Serenity-native button(save-and-close-button).
the button 2 was made by me.

1. do you see any errors in the console, is there a javascript error somewhere?
   =>there is no errors in the console when i click button 1(save-and-close-button)

2. what version of Serenity are you using?
   =>
   

3.I don't know what protected getToolbarButtons() method in your dialog is supposed to be accomplishing.....
=> my code in dialog is below:

import { BudgetAuthorizationService, BudgetOrganizationForm, BudgetOrganizationRow, BudgetOrganizationService, BudgetAuthorizationRow } from '@/ServerTypes/BasicData';
import { Decorators, Fluent, localText, EditorUtils } from '@serenity-is/corelib';
import { GridEditorDialog } from "@serenity-is/extensions";
@Decorators.registerClass('Budget.BasicData.BudgetOrganizationGridEditorAddDialog')
export class BudgetOrganizationGridEditorAddDialog extends GridEditorDialog<BudgetOrganizationRow, any> {
protected getFormKey() { return BudgetOrganizationForm.formKey; }
protected getRowDefinition() { return BudgetOrganizationRow; }
protected getService() { return BudgetOrganizationService.baseUrl; }

protected form = new BudgetOrganizationForm(this.idPrefix);

constructor(props?: any) {
    super(props);
    var _this = this;
    this.form.Name.change(e => {
        this.form.StoreNoName.value = Fluent(e.target).val();
    });
    
}


protected afterLoadEntity() {

    super.afterLoadEntity();

    if (this.form.Type.value == "0") {
        EditorUtils.setReadOnly(this.form.Code, true);
        EditorUtils.setReadOnly(this.form.Name, true);
        EditorUtils.setReadOnly(this.form.StoreType, true);
    }
    
}

protected getToolbarButtons() {
    var buttons = super.getToolbarButtons();//super.getToolbarButtons()
    var _this = this;
    buttons.push(
        {
            title: localText('Controls.EntityDialog.SaveButton'),	// *** Get button text from translation
            cssClass: 'SaveButton',
            icon: 'fa fa-check-circle text-purple',
            onClick: () => {
                //Fluent(_this.saveAndCloseButton);

                var Authorization = "";
                var items = _this.form.BudgetAuthorizationGridEditor.view.getItems();
                for (var i = 0; i < items.length; i++) {
                    Authorization += items[i].WangNoName + ', ';
                }
                if (Authorization != "")
                    Authorization = Authorization.substring(0, Authorization.length - 2)
                var selectedItem = // do something to get selected item
                    this.done && this.done({
                        OrganizationKey: null,
                        BudgetPermissionsKey: _this.form.BudgetPermissionsKey.value,
                        Code: _this.form.Code.value,
                        Name: _this.form.Name.value,
                        StoreNoName: _this.form.StoreNoName.value,
                        ParentCode: _this.form.ParentCode.value,
                        StoreType: parseInt(_this.form.StoreType.value),
                        Type: parseInt(_this.form.Type.value),
                        OpenMonth: _this.form.OpenMonth.value,
                        HistoryStore: _this.form.HistoryStore.value,
                        AliasCode: _this.form.AliasCode.value,
                        Authorization: Authorization,
                        BudgetAuthorizationGridEditor: items,
                        CreateUser: _this.form.CreateUser.value,
                        CreateDateTime: _this.form.CreateDateTime.value,
                        ModifyUser: _this.form.ModifyUser.value,
                        ModifyDateTime: _this.form.ModifyDateTime.value
                    }); // trigger event
                // this.dialogClose(); might close dialog here, or let callback do it after everything goes ok

                _this.dialogClose();

                //_this.saveAndCloseButton.trigger("onClick");
            }
        },

    );

    return buttons;
}


public done: (selectedItem: BudgetOrganizationRow) => void;

}

[LSNicholls]

OK @wow-prime I'm sorry to have to keep asking you questions, but while I understand your dialog a bit better now, I still don't understand the button on the grid row that you are using to invoke the dialog, and what it is supposed to be doing for you.

And it is the way you are invoking the dialog that is causing the problem you are trying to solve.

So, as I asked before:

you may be doing one of two things in your row-level button, and from the code you posted I can't tell which:

[ ] - are you trying to "clone" that specific row, in other words create a new entity row with some characteristics of the row the button is on, similar to a clone button in a dialog? This is something I have done a lot, and have generalized methods for, so if it is your goal I can show you that code.

[ ] - are you trying to add a new child entity row, which will have this specific row as its parent, so the dialog is a different entity than the grid? I am not sure if I have done this but would be happy to write a quick sample if this is your goal.

I want to try to repro your scenario so I can see what is not working for you with loadNewAndOpenDialog or loadEntityAndOpenDialog. But I am not sure which of the above two scenarios I need to repro.

If you are doing neither of these two things, explain what the button on the grid row is doing, and I will try to repro that. OK?

[volkanceylan]

You can not use ordinary dialog operations as GridEditor is in memory and has to bind to the dialogs events for saving deleting etc. to work. Use this.editItem