Current filter:
                                You should refresh the page.
                                  • I am trying to get a DxTagBox in the DxDataGrid on Angular2 to work.I managed to get the TagBox working with the template and the onValueChanged event, but the values don't get saved back into the grid. My method is also very crude and I am not sure how to get a reference to the right grid cell to update the value manually with this approach.

                                    I have seen multiple examples that only use the onEditorPreparing event to create the dxTagBox within the grid cell. As you can see down below in my code I have tried this as well, but I always get an error, which I cant figure out how to get rid of...

                                    [JavaScript]
                                    [JavaScript]
                                    export class PersonenCompanyComponent implements OnDestroy { @Input() public set PersonID(value: number) { if (value != null && value > 0) { this.LoadPersonCompany(value); this._PersonID = value; } } @ViewChild("addressGrid") private _grid: DxDataGridComponent; _DataSource: DataSource; _PersonID = 0; _Companies = []; _CompanyPeopleRoles = []; constructor( @Inject("ContextConfig") config: any, private context: ContextService, private dataControl: DataControlService) { this._DataSource = new DataSource({ store: context.StoreCustom('CompanyPeople', () => this._DataSource.items()), expand: ['Company', 'RoleTags($expand=Role)'], map: (item) => { item.CompanyName = item.Company.Name; //currently selected values as inteeger array item.SelectedTagValues = item.RoleTags.map(p=>p.ID); //currently selected values as object array item.SelectedTags = item.RoleTags.map(s => { return { CompanyPersonID: s.CompanyPersonID, CompanyPersonRoleID: s.CompanyPersonRoleID, Name: s.Role.Name };}) return item; }, onChanged: () => { this._Companies = _.uniqBy(this._DataSource.items().map(s => s.Company), (s) => s.ID); this.context.Store("CompanyPeopleRoles").load( { select: ["ID", "Name"] } ).then((items) => { this._CompanyPeopleRoles = items.map(item => Object.assign(item, {CompanyPersonRoleID : item.ID})); }); } }); dataControl.onSave.subscribe(() => this._grid.instance.saveEditData()); dataControl.onUndo.subscribe(() => this._grid.instance.cancelEditData()); } private LoadPersonRoles() { this.context.Store("CompanyPeopleRoles") .load() .then(items => this._CompanyPeopleRoles = items); } private LoadPersonCompany(personid: number) { console.log("LoadPersonCompany"); this._DataSource.filter(["PersonID", "=", personid]); this._DataSource.load(); } onRowInsert(event) { event.data.PersonID = this._PersonID; } onRoleValueChanged(event) { this.log("onRoleValueChanged", event); this._DataSource.items().forEach(value => { let ID = value.ID; value.SelectedTags = value.SelectedTagValues.map(t => { let ref = this._CompanyPeopleRoles.find(i=>i.ID == t); return { CompanyPersonID: ID, CompanyPersonRoleID: t, Name: ref.Name }; }); }); } onEditorPreparation(event) { if (event.parentType === 'dataRow' && event.dataField === 'RoleTags') { this.log("onEditorPreparation " + event.dataField + ' ' + event.parentType, event); // event.editorName = "dxTagBox"; // event.editorOptions.dataSource = this._CompanyPeopleRoles, // event.editorOptions.displayExpr = 'Name', // event.editorOptions.valueExpr = 'CompanyPersonRoleID', // event.editorOptions.onValueChanged = function(ea) { // console.log(ea); } } } }
                                    [HTML]
                                    <dx-data-grid #addressGrid [disabled]="_PersonID == 0" [dataSource]="_PersonID != 0 ? _DataSource : []" (onEditorPreparing)="onEditorPreparation($event)" (onRowInserting)="onRowInsert($event)" [showColumnLines]="true" [showRowLines]="true" [showBorders]="false" [rowAlternationEnabled]="true"> <dxo-editing mode="batch" [allowUpdating]="true" [allowDeleting]="true" [allowAdding]="true"> </dxo-editing> <dxi-column dataField="ID" [editorOptions]="{ disabled: true }" [width]="70"></dxi-column> <dxi-column dataField="CompanyID" caption="Unternehmen" calculateDisplayValue="CompanyName" [width]="140"> <dxo-lookup [dataSource]="this._Companies" displayExpr="Name" valueExpr="ID"> </dxo-lookup> </dxi-column> <dxi-column dataField="NameForHomepage" caption="Homepage" [width]="120"> </dxi-column> <dxi-column dataField="RoleTags" caption="Rollen" cellTemplate="editCellTemplate" editCellTemplate="editCellTemplate" [width]="400" ></dxi-column> <dxi-column dataField="From" caption="Von" dataType="date" [width]="120"></dxi-column> <dxi-column dataField="To" caption="Bis" dataType="date" [width]="120"></dxi-column> <div *dxTemplate="let cell of 'editCellTemplate'"> <dx-tag-box [dataSource]="this._CompanyPeopleRoles" [(value)]="cell.data.SelectedTagValues" displayExpr="Name" valueExpr="CompanyPersonRoleID" (onValueChanged)="onRoleValueChanged($event)"> </dx-tag-box> </div> </dx-data-grid>

                                1 Solution

                                Creation Date Importance Sort by

                                Hi Thomas,

                                The editCellTemplate argument has the setValue method to pass new data to the grid from an editor. Use it.

                                [HTML]
                                (onValueChanged)="onRoleValueChanged($event, cell)"
                                [JavaScript]
                                onRoleValueChanged(event, cell) { this.log("onRoleValueChanged", event); cell.setValue(event.value); }

                                If this does not resolve the issue, provide me with a sample project to reproduce it.

                                • Thomas Mitteregger 1 11.28.2017

                                  Perfect, that's it. Thanks!

                                • Gosha (DevExpress Support) 11.28.2017

                                  You are welcome, Thomas!