Как обернуть dx-data-grid и его инструменты в другой компонент и сделать его контроллером? - PullRequest
Новая
       15

Как обернуть dx-data-grid и его инструменты в другой компонент и сделать его контроллером?

0 голосов
/ 26 ноября 2018

Мы разрабатываем угловое приложение с devexpress.com , и я хотел бы сделать контроллер 'my-grid' с помощью dx-data-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>

my-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, которые я могу ввести, но dxi-clumns я не могу.

my-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 в my-grid, в другом случае может быть dxo-paging и т. д. Спасибо вам

1 Ответ

0 голосов
/ 25 декабря 2018

Это моё решение. my-grid.zip

...