igniteui-angular-samples/src/app/grid/grid-sample-pinning-both-sides/grid-toolbar-pinning-both-sides.component.ts at 9c301a4ed2894d6d614c69cc82d795fa3c81f4db · 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import { Component, ViewChild, ViewEncapsulation, OnInit, inject } from '@angular/core';
import { NgClass } from '@angular/common';
import {
    IgxColumnComponent,
    IgxGridComponent,
    IgxGridToolbarComponent,
    IgxGridToolbarActionsComponent,
    IgxGridToolbarPinningComponent,
    IgxDropDownComponent,
    IgxDropDownItemComponent,
    IgxButtonDirective,
    IgxToggleActionDirective,
    IgxDropDownItemNavigationDirective,
    ColumnPinningPosition,
    IPinningConfig
} from 'igniteui-angular';
import { DATA } from '../../data/customers';
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
import { ActivatedRoute } from '@angular/router';

@Component({
    encapsulation: ViewEncapsulation.None,
    providers: [],
    selector: 'app-grid-sample',
    styleUrls: ['grid-toolbar-pinning-both-sides.component.scss'],
    templateUrl: 'grid-toolbar-pinning-both-sides.component.html',
    imports: [
        NgClass,
        IgxGridComponent,
        IgxPreventDocumentScrollDirective,
        IgxGridToolbarComponent,
        IgxGridToolbarActionsComponent,
        IgxGridToolbarPinningComponent,
        IgxColumnComponent,
        IgxDropDownComponent,
        IgxDropDownItemComponent,
        IgxButtonDirective,
        IgxToggleActionDirective,
        IgxDropDownItemNavigationDirective
    ]
})

export class GridBothSideToolbarPinningSampleComponent implements OnInit{
    private activatedRoute = inject(ActivatedRoute);

    @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;

    public useDarkTheme: boolean = false;
    public data: any[];
    public columns: any[];
    public pinningConfig: IPinningConfig  = { columns: ColumnPinningPosition.End };

    public ngOnInit(): void {
        this.columns = [
            { field: 'CompanyName', header: 'Company Name', width: 300 },
            { field: 'ContactName', header: 'Contact Name', width: 200, pinned: true, pinningPosition: ColumnPinningPosition.Start },
            { field: 'ContactTitle', header: 'Contact Title', width: 200, pinned: true, pinningPosition: ColumnPinningPosition.End },
            { field: 'Address', header: 'Address', width: 300},
            { field: 'City', header: 'City', width: 120 },
            { field: 'Region', header: 'Region', width: 120 },
            { field: 'PostalCode', header: 'Postal Code', width: 150 },
            { field: 'Phone', header: 'Phone', width: 150 },
            { field: 'Fax', header: 'Fax', width: 150 }
        ];
        this.data = DATA;

        this.activatedRoute.queryParams.subscribe(params => {
            this.useDarkTheme = params.dark === 'true';
        });
    }

    public pinLeft(){
        this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
            col.pinningPosition = ColumnPinningPosition.Start;
            col.pinned = true;
        });
    }
    public pinRight(){
        this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
            col.pinningPosition = ColumnPinningPosition.End;
            col.pinned = true;
        });
    }

    public unpinColumn(){
        this.grid1.selectedColumns().forEach((col: IgxColumnComponent) => {
            col.pinned = false;
        });
    }
}