Current filter:
                                You should refresh the page.
                                  • I am using a DxDataGrid with the popup editor. Inside the editor I need a form with various fields that behave as expected, except for the DxTagBox.
                                    (see attached image) where it behaves as a radio group  without saving its selection once closed.

                                    The first thing I tried is to test the same DxTagBox with the same datasource outside this dx-data-grid / dxo-popup / dxo-form context. It turned out it is working well.

                                    [HTML]
                                    <dx-tag-box [showSelectionControls]="true" [searchEnabled]="true" applyValueMode="useButtons" [dataSource]="veillesDataSource" displayExpr="label" valueExpr="id"> </dx-tag-box>

                                    Here is the code snippet that does not work, I have removed all unecessary fields and columns.

                                    [HTML]
                                    <dx-data-grid #siteGrid id="siteGrid" [dataSource]="siteDataSource" keyExpr="id"> <dxo-search-panel [visible]="true" [width]="240" placeholder="Chercher..."></dxo-search-panel> <dxo-paging [enabled]="true"></dxo-paging> <dxo-editing mode="popup" [allowAdding]="true" [allowDeleting]="true" [allowUpdating]="true"> <dxo-popup [fullScreen]="true" title="Détails du Site" [showTitle]="true" [width]="1000" [height]="800"></dxo-popup> <dxo-form [colCount]="2" [labelLocation]="'left'" formData="{ client: {{currentClient}} }"> <dxi-item itemType="group" caption="Veilles souscrites"> <dxi-item editorType="dxTagBox" [editorOptions]="{ searchEnabled: true, showClearButton: true, hideSelectedItems: true, showSelectionControls: true, applyValueMode: 'useButtons' }" dataField="veillesSouscrites"></dxi-item> </dxi-item> </dxo-form> </dxo-editing> <dxi-column cssClass="align-cell-vertical" dataField="veillesSouscrites" [visible]="false"> <dxo-lookup [dataSource]="veillesDataSource" displayExpr="label" valueExpr="id"> </dxo-lookup> </dxi-column> </dx-d

                                    May be I set the wrong parameters in the editorOptions ?

                                    Thank you

                                1 Solution

                                Creation Date Importance Sort by

                                Hi,

                                Please note that the form configuration is appropriate only for the layout reorganization or extra settings specification. If you wish to define the column template in edit mode, set this template at the column level via its editCellTemplate option. For example, review the following tickets:

                                T530809: dxDataGrid - How to save value from editCellTemplate in Angular 2?
                                T597229: dxDataGrid popup window in a editCellTemplate

                                Updated

                                Lookup columns are designed for single selection by default. If you wish to display an array of values in browse mode, you need to manually transform it to a comma-separated string (e.g., see DataGrid - How to use DropDownBox as a column editor in edit mode ). The same approach will work in Angular as well. Also, you need to specify the value option for TagBox in editCellTemplate. For example:

                                [JavaScript]
                                <div *dxTemplate="let data of 'dataCellTemplate'"> <dx-tag-box [value]="data.value" [showSelectionControls]="true" [searchEnabled]="true" applyValueMode="useButtons" [dataSource]="veillesDataSource" displayExpr="label" valueExpr="id" (onValueChanged)="onTagBoxValueChanged($event, data)"></dx-tag-box> </div>

                                See also
                                Customize Editors
                                DataGrid - How to use TagBox for editing in Angular

                                • Elie Naulleau 02.07.2018

                                  Thank you.
                                  It helped fixing the behavior of the DxTagBox.

                                  [HTML]
                                  dxo-editing mode="popup" [allowAdding]="true" [allowDeleting]="true" [allowUpdating]="true"> <dxo-popup [fullScreen]="true" title="Détails du Site" [showTitle]="true" [width]="1000" [height]="800"></dxo-popup> <dxo-form [colCount]="2" [labelLocation]="'left'" formData="{ client: {{currentClient}} }"> <dxi-item dataField="veillesSouscrites"></dxi-item> </dxo-form> </dxo-editing> <dxi-column cssClass="align-cell-vertical" dataField="veillesSouscrites" [visible]="true" editCellTemplate="dataCellTemplate"> <dxo-lookup [dataSource]="veillesDataSource" displayExpr="label" valueExpr="id"></dxo-lookup> </dxi-column> <div *dxTemplate="let data of 'dataCellTemplate'"> <dx-tag-box [showSelectionControls]="true" [searchEnabled]="true" applyValueMode="useButtons" [dataSource]="veillesDataSource" displayExpr="label" valueExpr="id" (onValueChanged)="onTagBoxValueChanged($event, data)"></dx-tag-box> </div>

                                  But I am still struggling to make it completely work, now it has more to do with my understanding of how data is processed.

                                  So far when I select some tags in the tagbox, I click on save, and that works : the selected ids from the tagbox are being copied to the row record and transmitted via a rest custom datasource  to the server side and saved in a database.
                                  Problem: when I reopen the editor on the same row, the previously selected tags do not reappear. However the data is attached to the objects as list of ids.

                                  profil:null
                                  telephone:"02 41 21 25 06"
                                  veillesSouscrites : [3612, 3603, 3542, 3422, 3290, 1]
                                  ville : "..."

                                  This is the point that needs to be clarified.
                                  The editor has a lookup data source declared as  veillesDataSource
                                  I thought that the lookup mechanism would display in the tagbox the prexisting listed ids fetching them from the lookup datasource using (valueExpr and displayExpr).
                                  This does not seem the case, so what is the correct way to handle this situation ?

                                  Thanks

                                • Artem (DevExpress Support) 02.08.2018

                                  Hi,

                                  Thank you for your code. Lookup columns are designed for single selection by default. If you wish to display an array of values in browse mode, you need to manually transform it to a comma-separated string (e.g., see DataGrid - How to use DropDownBox as a column editor in edit mode ). The same approach will work in Angular as well. Also, you need to specify the value option for TagBox in editCellTemplate. For example:

                                  [JavaScript]
                                  <div *dxTemplate="let data of 'dataCellTemplate'"> <dx-tag-box [value]="data.value" [showSelectionControls]="true" [searchEnabled]="true" applyValueMode="useButtons" [dataSource]="veillesDataSource" displayExpr="label" valueExpr="id" (onValueChanged)="onTagBoxValueChanged($event, data)"></dx-tag-box> </div>

                                  See also
                                  Customize Editors
                                  Angular 2 - DxDataGrid with DxTagBox

                                  Please check these ideas and let us know your results.

                                • Elie Naulleau 02.08.2018

                                  Thank you Artem, that works perfectly now. The attribute
                                  [value]="data.value"did the trick since the data as already formatted as expected.