dxDataGrid - How to customize buttons in the Popup Edit Form

saeedeh k

created 8 years ago

[DevExpress Support Team: CLONED FROM T549384: How to implement cascaded editors in the Popup Edit Form]
How can I have access and manipulate the default save button in popup?
Is it possible to have other buttons in popup?
Thank you

Answers approved by DevExpress Support

DevExpress Support Team

created 8 years ago (modified 7 years ago)

Hi saeedeh,

The dxDataGrid.editing.popup option represents a configuration object of the Popup Edit Form. So, you can add your buttons using the toolbarItems option as shown in the https://codepen.io/anon/pen/PKxgEX example.

UPDATED BY Alessandro (DevExpress Support Team):

You can use the following markup to accomplish a similar task in Angular:

HTML
<dxo-editing  
            mode="popup"  
            [allowUpdating]="true">  
            <dxo-popup  
                title="Employee Info"  
                [showTitle]="true"  
                [width]="700"  
                [height]="345"  
                [position]="{ my: 'top', at: 'top', of: window }"  
             [toolbarItems]="[  
            {  
            widget: 'dxButton',  
            location: 'before',  
            options: {  
              text: 'Yes',  
              icon: 'save'  
            },  
            toolbar: 'bottom',  
            onClick: onClick  
        }]"  
                       >  
            </dxo-popup>  
        </dxo-editing>

Here is a complete code example: https://plnkr.co/edit/xT4dKglUFSxSpinH6vZs?p=preview.

Comments (3)

Elie Naulleau 7 years ago

HI Nikolai,

I cannot reproduce in Angular what you did in JS.

HTML
<dxo-editing mode="popup" [allowAdding]="true" [allowDeleting]="true" [allowUpdating]="true" >  
            <dxo-popup [fullScreen]="false" title="Détails de l'usage de la référence" [showTitle]="true" [width]="1000" [height]="500">  
            </dxo-popup>  
            <dx-toolbar [items]="items"> </dx-toolbar>  
            <dxo-form [colCount]="1" [labelLocation]="'left'" formData=""  >  
                <dxi-item dataField="noeud"></dxi-item>  
                <dxi-item dataField="motsClefs"></dxi-item>  
            </dxo-form>  
        </dxo-editing>

I need take control over the save action performed when the popup is closed by pressing the Save button. I need to access form field and transform a bit the data.
I tried to catch onRowUpdating event but it does not work when form or popup edit mode rather than row mode.

The approach you provide in this codepen example seems adapted to my case, hence I am trying to replicate it in Angular.

Thank you

Alessandro (DevExpress Support) 7 years ago

Hi,

Thank you for the clarification. I have updated our original answer. Please review it.

Elie Naulleau 7 years ago

Thank you

dxDataGrid - How to customize buttons in the Popup Edit Form

Answers approved by DevExpress Support

Recently viewed tickets