igniteui-angular-samples/src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component.html at 42bb471c2fb255e19a1ca46c07f7ce109531a4c3 · 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
37
38
39
40
41
42
43
44
45
46
47
48
49
<div class="grid__wrapper">
    <igx-input-group type="search" class="offset">
        <igx-prefix>
            <igx-icon *ngIf="searchText.length === 0">search</igx-icon>
            <igx-icon *ngIf="searchText.length > 0" (click)="clearSearch()">clear</igx-icon>
        </igx-prefix>

        <input #search1 id="search1" igxInput placeholder="Search" [(ngModel)]="searchText" (ngModelChange)="treeGrid.findNext(searchText, caseSensitive, exactMatch)"
            (keydown)="searchKeyDown($event)" />

        <igx-suffix *ngIf="searchText.length > 0">
            <div class="resultsText">
                <span *ngIf="treeGrid.lastSearchInfo.matchCount > 0">
                    {{ treeGrid.lastSearchInfo.activeMatchIndex + 1 }} of {{ treeGrid.lastSearchInfo.matchCount }}
                    results
                </span>
                <span *ngIf="treeGrid.lastSearchInfo.matchCount === 0">
                    No results
                </span>
            </div>
            <div class="chips">
                <igx-chips-area>
                    <igx-chip (click)="updateSearch()" [color]="caseSensitive? 'lightgrey' : 'rgba(0, 0, 0, .04)'">
                        <span title="Match case">Aa</span>
                    </igx-chip>
                    <igx-chip (click)="updateExactSearch()" [color]="exactMatch? 'lightgrey' : 'rgba(0, 0, 0, .04)'">
                        <u title="Exact match">Ab</u>
                    </igx-chip>
                </igx-chips-area>
            </div>
            <div class="searchButtons">
                <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="treeGrid.findPrev(searchText, caseSensitive, exactMatch)">
                    <igx-icon family="material">navigate_before</igx-icon>
                </button>
                <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="treeGrid.findNext(searchText, caseSensitive, exactMatch)">
                    <igx-icon family="material">navigate_next</igx-icon>
                </button>
            </div>
        </igx-suffix>
    </igx-input-group>

    <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid1 [data]="data" [autoGenerate]="false" primaryKey="ID" foreignKey="ParentID" height="480px" width="100%" [allowFiltering]="true">
        <igx-column [field]="'Name'" dataType="string" [sortable]="true"></igx-column>
        <igx-column [field]="'ID'" dataType="number" [sortable]="true"></igx-column>
        <igx-column [field]="'Title'" dataType="string" [sortable]="true"></igx-column>
        <igx-column [field]="'Age'" dataType="number" [sortable]="true"></igx-column>
        <igx-column [field]="'HireDate'" dataType="date" [sortable]="true"></igx-column>
    </igx-tree-grid>
</div>
No results