igniteui-angular-samples/src/app/tree-grid/tree-grid-cell-merge-sample/tree-grid-cell-merge-sample.component.html at e06c4e11a2d1cbf48283343816435bc1ad6beaec · IgniteUI/igniteui-angular-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="grid__wrapper">
    <igx-tree-grid #treeGrid [igxPreventDocumentScroll]="true" [data]="data" width="100%" height="800px"
        [sortingExpressions]="sortExpr" [autoGenerate]="false" primaryKey="ID" foreignKey="ParentID"
        [cellMergeMode]="cellMergeMode" [mergeStrategy]="mergeStrategy">
        <igx-grid-toolbar>
            <igx-select [(ngModel)]="cellMergeMode">
                <label igxLabel>Select Merge Mode</label>
                @for (type of mergeTypes; track type) {
                <igx-select-item [value]="type.value">
                    {{type.name}}
                </igx-select-item>
                }
            </igx-select>

            <igx-select (selectionChanging)="strategySelection($event)">
                <label igxLabel>Select Merge Strategy</label>
                @for (type of mergeStrategies; track type) {
                <igx-select-item [value]="type.value" [selected]="type.value === treeGrid.mergeStrategy">
                    {{type.name}}
                </igx-select-item>
                }
            </igx-select>
        </igx-grid-toolbar>
        <igx-column [field]="'Name'" dataType="string" width="250px" [editable]="true"></igx-column>
        <igx-column [field]="'Title'" dataType="string" width="250px" [merge]="true" [editable]="true" [sortable]="true"></igx-column>
        <igx-column [field]="'HireDate'" dataType="date" width="200px"></igx-column>
        <igx-column [field]="'Country'" dataType="string" width="200px" [merge]="true" [editable]="true" [sortable]="true"></igx-column>
        <igx-column [field]="'City'" dataType="string" width="200px" [merge]="true" [editable]="true" [sortable]="true"></igx-column>
        <igx-column [field]="'Age'" dataType="number" width="200px" [editable]="true"></igx-column>
        <igx-column [field]="'Address'" dataType="string" width="200px" [editable]="true"></igx-column>
        <igx-column [field]="'Fax'" dataType="string" width="200px"></igx-column>
        <igx-column [field]="'PostalCode'" dataType="string" width="200px"></igx-column>
        <igx-column [field]="'Phone'" dataType="string" width="200px"></igx-column>

    </igx-tree-grid>
</div>