Serenity: How to change Save button location

[srinivas1910]

Hi,
I am a newbie to Serenity, Please tell me how to change the Save Button from top of the griddialog to bottom of the griddialog.

thankx

[Estrusco]

You can use css or jQuery to move items in the dialog. Search for .s-DialogToolbar class to get toolbar

[srinivas1910]

Iam able to find out the .s-DialogToolbar class, not able to change the save button from top of the form to bottom of the form as every time i have to go to top to save the form as it is having around 25 fields in the form. Please help with a little bit of procedure to get it done.
Thank you

[Estrusco]

In your xyzDialog.ts constructor, some like this

    constructor() {
        super();

        var tb = this.element.find('.s-DialogToolbar');
        this.element.append(tb);
    }

[dfaruque]

change the following file
Views\Templates\EntityDialog.Template.html
with the following content.

<div class="s-DialogContent">

    <div class="s-Form">
        <form id="~_Form" action="">
            <div class="fieldset ui-widget ui-widget-content ui-corner-all">
                <div id="~_PropertyGrid"></div>
                <div class="clear"></div>
            </div>
        </form> 
    </div>

    <div id="~_Toolbar" class="s-DialogToolbar">
    </div>
</div>

[srinivas1910]

Hi Estrusco,

constructor() {
super();

    var tb = this.element.find('.s-DialogToolbar');
    this.element.append(tb);
}

This Worked form me. But I want this for all the forms. Where should i implement this to get it on all the forms and the same to align right.
Thank you

[Estrusco]

The solution proposed by @dfaruque is useful to you.

[srinivas1910]

Thank you @Estrusco and @dfaruque I Got the solution.

[gowthamcarmel]

Thank you @Estrusco and @dfaruque I Got the solution.

Can you please tell how to keep both in top and bottom of the dialog