Grid Column Pinning

A column or multiple columns can be pinned to the left-hand side of the Angular UI Grid. Column Pinning in Ignite UI for Angular allows the end users to lock column in a particular column order, this will allow them to see it while horizontally scrolling the Grid. The Material UI Grid has a built-in column pinning UI, which can be used through the Grid's toolbar to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns via the Column Pinning API.

데모


열 핀 고정 API

핀 고정된 영역이 Grid 자체보다 넓지 않는 한 각 열을 핀 고정할 수 있습니다. 열 핀 고정은 igx-column의 핀 고정된 입력을 통해 제어됩니다. 핀 고정된 열은 항상 Grid의 왼쪽에 렌더링되고 Grid 자체의 핀 고정되어 있지 않은 열의 수평 스크롤로 고정됩니다.

<igx-grid #grid1 [data]="data | async" [width]="700px" [autoGenerate]="false" [paging]="true" [perPage]="6" (onColumnInit)="initColumns($event)"
    (onSelection)="selectCell($event)">
    <igx-column [field]="Name" [pinned]="true"></igx-column>
    <igx-column [field]="AthleteNumber"></igx-column>
    <igx-column [field]="TrackProgress"></igx-column>
</igx-grid>

Grid의 IgxGridComponentpinColumn 또는 unpinColumn 메소드를 사용하여 열을 필드 이름별로 핀 고정하거나 핀 고정 해제할 수도 있습니다:

this.grid.pinColumn("AthleteNumber");
this.grid.unpinColumn("Name");

두 메소드는 각각 조작이 성공했는지 여부를 나타내는 불 값을 반환합니다. 일반적인 실패 원인으로 열이 이미 원하는 상태인 경우가 있습니다. pinColumn은 결과가 핀 고정 영역이 Grid 자체보다 크거나 같을 경우에도 실패합니다. 다음의 예제를 참조하십시오:

<igx-grid #grid1 [data]="data | async" [width]="300px" [autoGenerate]="false">
    <igx-column [field]="Name" [width]="200px" [pinned]="true"></igx-column>
    <igx-column [field]="AthleteNumber" [width]="200px"></igx-column>
</igx-grid>
var succeed = this.grid.pinColumn("AthleteNumber"); // pinning fails and succeed will be false

AthleteNumber 열을 핀 고정하는 것이 허용되면 핀 고정된 영역은 Grid의 너비보다 커집니다.

열은 가장 오른쪽에 배치된 핀 고정된 열의 오른쪽에 핀 고정됩니다. onColumnPinning 이벤트에서 이벤트 인수인 insertAtIndex 속성을 원하는 위치 인덱스로 변경하면 핀 고정 열의 순서를 변경할 수 있습니다.

<igx-grid #grid1 [data]="data | async" [autoGenerate]="true" (onColumnPinning)="columnPinning($event)"></igx-grid>
public columnPinning(event) {
    if (event.column.field === "Name") {
        event.insertAtIndex = 0;
    }
}

Custom Column Pinning UI

You can define your custom UI and change the pin state of the columns via the related API.

Let's say that instead of a toolbar you would like to define pin icons in the column headers that the end user can click to change the particular column's pin state. This can be done by creating a header template for the column with a custom icon.

<igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'500px'">
    <igx-column #col *ngFor="let c of columns" [field]="c.field" [header]="c.header" [width]="c.width" [pinned]='c.pinned'
        [hidden]='c.hidden' [headerClasses]="'customHeaderSyle'">
        <ng-template igxHeader>
            <div class="title-inner">
                <span style="float:left">{{col.header}}</span>
                <igx-icon class="pin-icon" fontSet="fas" name="fa-thumbtack" (click)="toggleColumn(col)"></igx-icon>
            </div>
        </ng-template>
    </igx-column>
</igx-grid>

On click of the custom icon the pin state of the related column can be changed using the column's API methods.

public toggleColumn(col: IgxColumnComponent) {
    col.pinned ? col.unpin() : col.pin();
}

Demo


핀 고정 제한

  • 열 너비를 백분율(%)로 명시적으로 설정한 경우, 핀 고정 열이 있으면 Grid 자체 및 헤드 내용이 바르게 정렬되지 않습니다. 열 핀 고정 기능이 제대로 작동하려면 열 너비가 픽셀(px)로 설정하거나 Grid에 의해 자동 할당되어야 합니다.

문제 해결

이 부분에서는 열 핀 고정 기능에 문제가 있는 경우, 취할 수 있는 조치에 대한 방안을 제공합니다.

경고

  • IgxGrid - 핀 고정 영역이 최대 핀 고정 폭을 초과합니다. 다음 열은 다른 문제를 방지하기 위해 핀 고정 해제되었습니다:... . - 사용자가 처음에 너무 많은 핀 고정 열을 정의한 경우에 이 경고가 표시됩니다. 처음에 핀 고정된 열의 합계 너비는 Grid 너비의 80%를 넘지 않아야 합니다. 그렇지 않으면 기본적으로 Grid의 제한을 초과하지 않는 최초의 열(정의된 순서)을 취하고 나머지(경고에 나열된 열)는 핀 고정 해제됩니다. Grid에서 핀 고정을 초기화하기 전에 onColumnInit 이벤트를 사용하여 초기화할 때 일부 열을 수동으로 핀 고정 해제할지 결정하기 위해 자체 논리를 실행할 수 있습니다. 각 열에 트리거됩니다.

Styling

The igxGrid allows styling through the Ignite UI for Angular Theme Library. The grid's theme exposes a wide variety of properties, which allow the customization of all the features of the grid.

In the below steps, we are going through the steps of customizing the grid's Pinning styling.

Importing global theme

To begin the customization of the Pinning feature, you need to import the index file, where all styling functions and mixins are located.

@import '~igniteui-angular/lib/core/styles/themes/index'

Defining custom theme

Next, create a new theme, that extends the igx-grid-theme and accepts the parameters, required to customize the Pinning feature as desired.

$custom-theme: igx-grid-theme(
    /* Pinning properties that affect styling */
    $pinned-border-width: 5px,
    $pinned-border-style: double,
    $pinned-border-color: #FFCD0F,
    $cell-active-border-color: #FFCD0F
    /* add other features properties here... */
);

Defining a custom color palette

In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the igx-palette and igx-color functions.
igx-palette generates a color palette, based on provided primary and secondary colors.

$primary-color: #292826;
$secondary-color: #ffcd0f;

$custom-palette: igx-palette(
 $primary: $primary-color,
 $secondary: $secondary-color
);

After a custom palette has been generated, the igx-color function can be used to obtain different varieties of the primary and the secondary colors.

$custom-theme: igx-grid-theme(
    $pinned-border-width: 5px,
    $pinned-border-style: double,
    $pinned-border-color: igx-color($custom-palette, "secondary", 500),
    $cell-active-border-color: igx-color($custom-palette, "secondary", 500)
);

The $custom-theme contains the same properties as the one in the previous section, but this time the colors are not hardcoded. Instead, the custom igx-palette was used and the colors were obtained through its primary and secondary colors, with a given color variant.

Defining custom schemas

You can go even further and build flexible structure that has all the benefits of a schema. The schema is the recipe of a theme.
Extend one of the two predefined schemas, that are provided for every component. In our case, we would use $_light_grid.

$custom-grid-schema: extend($_light-grid,(
    pinned-border-width: 5px,
    pinned-border-style: double,
    pinned-border-color: igx-color:("secondary", 500),
    cell-active-border-color: igx-color:("secondary", 500)
));

In order for the custom schema to be applied, either light, or dark globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.

$my-custom-schema: extend($light-schema, ( 
    igx-grid: $custom-grid-schema
));
$custom-theme: igx-grid-theme(
    $palette: $custom-palette,
    $schema: $my-custom-schema
);

Applying the custom theme

The easiest way to apply your theme is with a sass @include statement in the global styles file:

@include igx-grid($custom-theme);

Scoped component theme

In order for the custom theme to affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the index file).

This way, due to Angular's ViewEncapsulation, your styles will be applied only to your custom component.

Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep in order to style the grid.

Note

Wrap the statement inside of a :host selector to prevent your styles from affecting elements outside of our component:

:host {
    ::ng-deep {
        @include igx-grid($custom-theme);
    }
}

Demo

API 참조

추가 리소스

커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.