angular - 如何将 dx 按钮放在 dxo-export 旁边?
问题描述
导出按钮/dxo-export 是 dx-data-grid 的一部分。我想让这两个 dx 按钮与 dxo-export 按钮并行,并使它们也右对齐。因此,dx-buttons 和 dxo-export button 具有相同的线并对齐。
这是我的代码。Dx 按钮在 dx 数据网格之外。所以我想这就是为什么按钮不能在一起
<dx-button id="gridRealistSelected"
icon="fas fa-clipboard-check"
[height]="34" [width]="40">
</dx-button>
<dx-button id="gridSharePlan"
icon="fa fa-share-alt"
[height]="34" [width]="40">
</dx-button>
<dx-data-grid id="gridContainer"
keyExpr="id"
[dataSource]="shoppingPlan">
<dxo-export
fileName="Rencana Belanja"
[enabled]="true"
[allowExportSelectedData]="false">
</dxo-export>
<dxi-column
dataField="ket"
caption="Keterangan">
</dxi-column>
<dxi-column
dataField="harga"
caption="Harga">
</dxi-column>
</dx-data-grid>
解决方案
onToolbarPreparing(e){
this.gridElement = e.element;
this.toolbarItems = e.toolbarOptions.items;
this.toolbarItems.unshift({
name: 'realistPlanButton',
location: 'after',
widget: 'dxButton',
options: {
hint: 'Realisasi Rencana',
icon: 'fas fa-clipboard-check',
onClick: this.realistPlan.bind(this)
}
},{
name: 'sharePlanButton',
location: 'after',
widget: 'dxButton',
options: {
hint: 'Realisasi Rencana',
icon: 'fa fa-share-alt',
onClick: this.sharePlan.bind(this)
}
});
}
推荐阅读
- css - html/css按钮透明第二层悬停效果
- sql - 如何在 PostgreSQL 中检索表属性?
- amazon-web-services - AWS Session Manager 如何绕过安全组?
- editor - 强大的 geojson 编辑器,可编辑 10MB 的 .geojson 数据
- docker - 此 set-cookie 被阻止,因为它的域包含 docker 和 nginx
- mule - 在 Mule 4 中通过 HTTP 请求发送 PDF
- reactjs - react-native app错误未知选项:.name(?)
- java - 如何以编程方式使用执行器端点?
- python - 如何在 VS Code 中定义 pylance linting 参数(类似于“python.linting.pylanceArgs”)?
- html - 使用 bootstrap flexbox 准备网格布局