popoup or form mode of the angular devextreme is rendering with [object][object]

In the popoup mode of the devextreme: dxo-editing, UI is rendering [object][object]. UI/Data is rendering perfectly in the view mode without any issue.

My code:

    <dxo-editing
        mode="popup"
        [allowUpdating]="true"
        [allowDeleting]="true"
        [allowAdding]="true">
    </dxo-editing>

<dxi-column dataField="categories" cellTemplate="categoryCellTemplate" [width]="150">

    <div *dxTemplate="let cct of 'categoryCellTemplate'" class="source-cell">
        <span *ngFor="let category of cct.data.categories">
            <span [ngClass]="category.name.toLowerCase() ?? 'no-category'" class="source-item">{{category?.name}}</span>
        </span>
    </div>

Am I missing anything ? BTW trying Angular/devextreme first time.

Solution

Your cellTemplate has nothing to do with your popup. I guess you are using the dx-data-grid component. Creating a cell template for a column will only change the appearance of the cell for that specific column inside your data grid.

In the popup there will be a default editor, trying to display an array of objects. DevExtreme tries to use a dx-tag-box or a dx-select-box to render an array. This tag box does not know how to interpret your array of categories.

Here is an example how you could solve this issue:

Use the editCellTemplate to change the appearance of the editor inside the popup form.
Use the calculateDisplayValue to change the appearance inside the data grid column cells. Instead of using the cellTemplate like you are doing.

<dxi-column
    dataField="categories"
    editCellTemplate="categoryEditCellTemplate"
    [calculateDisplayValue]="calculateCategoriyDisplayValue">
</dxi-column>


<!-- this is for using a tag box inside the popup form to be able to select multiple categories based on their id -->
<div *dxTemplate="let cct of 'categoryEditCellTemplate'" class="source-cell">
    <dx-tag-box [dataSource]="categories" valueExpr="id" displayExpr="name" [(value)]="cct.data.categories"></dx-tag-box>
</div>

class MyComponent {

    constructor() {
        this.calculateCategoriyDisplayValue = this.calculateCategoriyDisplayValue.bind(this);
    }

    rows: { categories: number[] }[] = [
        { categories: [1,2] },
        { categories: [2,3] },
        { categories: [1] },
    ];

    categories: { id: number; name: string; }[] = [
        { id: 1, name: 'Category1' },
        { id: 2, name: 'Category2' },
        { id: 3, name: 'Category3' }
    ];

    // this is for showing category names inside the categories column cells
    calculateCategoriyDisplayValue(rowData: {categories: number[]}) {
        if (rowData.categories == null) return;
        return rowData.categories.map(id => this.categories.find(c => c.id == id)?.name).filter(x => x != null).join(', ');
    }
}

I recommend changing your data model so you have only the category ids inside the array instead of objects, like i did in my example. This will make it easier.