如何在Angular的DevExtreme DataGrid中添加Bootstrap按钮列？

你当前的写法无效，是因为dxi-column type="buttons"仅支持渲染DevExtreme内置的<dxi-button>组件，直接放入原生<button>标签会被组件忽略。下面提供两种可行的解决方案：

方案一：使用自定义列模板（推荐，灵活性更高） #

通过dxTemplate自定义单元格内容，直接渲染Bootstrap按钮，同时可以绑定当前行数据处理下载逻辑：

<dx-data-grid id="pmschedule-dataGrid" [hoverStateEnabled]="true" [dataSource]="ds"
            [showBorders]="true" [allowColumnResizing]="true" (onSelectionChanged)="onDataGridSelectionChanged($event)">
    <!-- 其他配置项保持不变 -->
    <dxi-column caption="Download Link">
        <!-- 用dxTemplate定义单元格内容，rowData代表当前行的数据 -->
        <div *dxTemplate="let rowData of 'cell'">
            <button class="btn btn-primary" (click)="handleRowDownload(rowData)">Download</button>
        </div>
    </dxi-column>
</dx-data-grid>

在组件类中实现下载逻辑：

handleRowDownload(rowData: any) {
    // 根据行数据执行下载操作，比如获取文件URL并触发下载
    // 示例：
    // if (rowData.downloadUrl) {
    //     window.open(rowData.downloadUrl, '_blank');
    // }
    console.log('触发下载，行数据：', rowData);
}

方案二：改造内置命令按钮为Bootstrap样式 #

如果想沿用DevExtreme的内置按钮列，可以给<dxi-button>添加Bootstrap类，再通过CSS覆盖默认样式冲突：

<dx-data-grid id="pmschedule-dataGrid" [hoverStateEnabled]="true" [dataSource]="ds"
            [showBorders]="true" [allowColumnResizing]="true" (onSelectionChanged)="onDataGridSelectionChanged($event)">
    <!-- 其他配置项保持不变 -->
    <dxi-column type="buttons" caption="Download Link">
        <dxi-button text="Download" (click)="handleRowDownload($event)" class="btn btn-primary"></dxi-button>
    </dxi-column>
</dx-data-grid>

添加CSS解决样式冲突：

/* 覆盖DevExtreme按钮的默认样式，对齐Bootstrap按钮的外观 */
.dx-button.btn.btn-primary {
    border: none;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

内容的提问来源于stack exchange，提问作者Alex Wright