我们正在使用devexpress.com开发一个角度应用程序,我想用 dx-data-grid 制作“my-grid”控制器,我想将 dx-data-grid 工具包装到我的工具中,但是有一个问题,可以你帮我解决吗?
dx-data-grid.component.html
<dx-data-grid id="gridContainer"
[dataSource]="dataSource"
[showBorders]="true"
[allowColumnResizing]="true"
[columnAutoWidth]="true"
[allowColumnReordering]="true">
<!-- filter -->
<dxo-filter-row [visible]="true"></dxo-filter-row>
<dxo-header-filter [visible]="true"></dxo-header-filter>
<!-- column chooser -->
<dxo-column-chooser [enabled]="true"></dxo-column-chooser>
**<!-- COLUMN WILL APPEAR TO HEAR -->**
<!-- summary -->
<dxo-summary>
<dxi-total-item column="branchId" summaryType="count"></dxi-total-item>
<dxi-total-item column="docKind" summaryType="sum">
<!--<dxo-value-format type="decimal" [precision]="2"></dxo-value-format>-->
</dxi-total-item>
</dxo-summary>
<!-- pagination -->
<dxo-paging [pageSize]="10"></dxo-paging>
<dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="false" [showInfo]="true">
</dxo-pager>
</dx-data-grid>
我的grid.component.html
<my-grid [dataSource]="dataSource"
[showBorders]="true"
[allowColumnResizing]="true"
[columnAutoWidth]="true"
[allowColumnReordering]="true">
<!-- columns -->
<dxi-column dataField="Product_ID"></dxi-column>
<dxi-column dataField="Product_Name" [width]="250"></dxi-column>
<dxi-column dataField="Product_Cost" caption="Cost" dataType="number" format="currency"></dxi-column>
<dxi-column dataField="Product_Sale_Price" caption="Sale Price" dataType="number" format="currency"></dxi-column>
<dxi-column dataField="Product_Retail_Price" caption="Retail Price" dataType="number" format="currency"></dxi-column>
<dxi-column dataField="Product_Current_Inventory" caption="Inventory"></dxi-column>
</my-grid>
dx-data-grid 选项我可以输入但dxi-clumns
我不能。
我的grid.component.ts
@Input()
public dataSource: string;
@Input()
public columnAutoWidth: boolean;
@Input()
public allowColumnReordering: boolean;
@Input()
public showBorders: boolean;
@Input()
public allowColumnResizing: boolean;
@ViewChild(DxDataGridComponent) dxDataGrid: DxDataGridComponent;
ngAfterViewInit() {
this.dxDataGrid.dataSource = this.dataSource;
this.dxDataGrid.columnAutoWidth = this.columnAutoWidth;
this.dxDataGrid.allowColumnReordering = this.allowColumnReordering;
this.dxDataGrid.showBorders = this.showBorders;
this.dxDataGrid.allowColumnResizing = this.allowColumnResizing;
}
所以我需要输入dxi-columns
我的网格,在另一种情况下可能dxo-paging
等等。
谢谢