0

Within my Angular 6 App , i'm using the DataGrid widget of DevExtreme.

Here is my implementation :

<dx-data-grid 
    id="gridContainer"
    [dataSource]="dataSource"
    keyExpr="ID"
    [allowColumnReordering]="true"
    [showBorders]="true"
    (onEditingStart)="logEvent('EditingStart')"
    (onInitNewRow)="logEvent('InitNewRow')"
    (onRowInserting)="logEvent('RowInserting')"
    (onRowInserted)="logEvent('RowInserted')"
    (onRowUpdating)="logEvent('RowUpdating')"
    (onRowUpdated)="logEvent('RowUpdated')"
    (onRowRemoving)="logEvent('RowRemoving')"
    (onRowRemoved)="logEvent('RowRemoved')">

    <dxo-paging [enabled]="true"></dxo-paging>
    <dxo-editing 
         mode="row"
         [allowUpdating]="true"
         [allowDeleting]="true"
         [allowAdding]="true">
        <dxo-popup
                title="Employee Info"
                [showTitle]="true"
                [width]="1300"
                [height]="345"
                [position]="{ my: 'top', at: 'top', of: window }">
            </dxo-popup>
    </dxo-editing>

    <dxi-column dataField="Prefix" caption="Title"></dxi-column>
    <dxi-column dataField="FirstName"></dxi-column>
    <dxi-column dataField="LastName"></dxi-column>
    <dxi-column dataField="Position" [width]="130"></dxi-column>
    <dxi-column
        dataField="StateID"
        caption="State"
        [width]="125">         
        <dxo-lookup
            [dataSource]="states"
            displayExpr="Name"
            valueExpr="ID">
        </dxo-lookup>
    </dxi-column>
    <dxi-column
        dataField="BirthDate"
        [width]="125"
        dataType="date">
    </dxi-column>
</dx-data-grid>

As you can see , i ve tried to inject this block , of popup options , inside the <dxo-edining> block :

<dxo-popup
 title="Employee Info"
 [showTitle]="true"
 [width]="1300"
 [height]="345"
 [position]="{ my: 'top', at: 'top', of: window }">
</dxo-popup>

My purpose is to become able to customize the appearence of the popup which appears when "delete" row , (to confirm or not)

That didn't work ,

Any suggestions?

firasKoubaa
  • 6,439
  • 25
  • 79
  • 148
  • Even if you were to solve this, soon or later, you will be running into more limitations, whether it's the styling of the popup, or input validation, provided that you are trying to use functionality out of the box as in your example. You should consider creating custom components that do CRUD on your rows of your grid. – Uğur Dinç Sep 07 '18 at 20:09
  • try to use a custom item template to display your row, and at the end add a delete button, bind a method to it and pass the rowIndex as a parameter, turn on a flag to display the popup and store the rowIndex as a private variable. When the user select yes then read the rowIndex and remove the row from the grid. But yes, as @dexter said, try to create your custom component to be able to customize all you want. – Jesus Gilberto Valenzuela Sep 10 '18 at 19:11

0 Answers0