Web Components 그리드 행 고정

    The Ignite UI for Web Components Row Pinning feature in Web Components Grid allows you to pin one or multiple rows to the top or bottom of grid. Row Pinning allows end-users to pin rows in a particular order, duplicating them in a special area that is always visible even when they scroll the IgcGridComponent vertically. The Web Components Grid has a built-in row pinning UI, which is enabled by initializing an IgcActionStrip component in the context of Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API.

    Web Components Grid Row Pinning Example

    Row Pinning UI

    The built-in row pinning UI is enabled by adding an IgcActionStrip component with the IgcGridPinningActions component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well.

    <igc-grid auto-generate="false">
    <igc-column field="Name" header="Full Name"></igc-column>
    <igc-action-strip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions></igc-grid-editing-actions>
    </igc-action-strip>
</igc-grid>

    Row Pinning API

    Row pinning is controlled through the pinned input of the Row. Pinned rows are rendered at the top of the IgcGridComponent by default and stay fixed through vertical scrolling of the unpinned rows in the IgcGridComponent body.

    this.grid.getRowByIndex(0).pinned = true;

    You may also use the IgcGridComponent's pinRow or unpinRow methods of the to pin or unpin records by their ID:

    this.grid.pinRow('ALFKI');
this.grid.unpinRow('ALFKI');

    Note that the row ID is the primary key value, defined by the primaryKey of the grid, or the record instance itself. Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the row is already in the desired state.

    A row is pinned below the last pinned row. Changing the order of the pinned rows can be done by subscribing to the RowPinning event and changing the InsertAtIndex property of the event arguments to the desired position index.

    <igc-grid id="grid" auto-generate="true">
</igc-grid>

    constructor() {
    var grid1 = document.getElementById('grid1') as IgcGridComponent;
    grid1.data = this.data;
    grid1.addEventListener("rowPinning", this.rowPinning);
}

public rowPinning(event) {
    event.detail.insertAtIndex = 0;
}

    Pinning Position

    You can change the row pinning position via the pinning configuration option. It allows you to set the pin area position to either Top or Bottom. When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom.

    <igc-grid id="dataGrid" auto-generate="true"></igc-grid>

    var grid = document.getElementById('dataGrid') as IgcGridComponent;
grid.pinning = { rows: RowPinningPosition.Bottom };

    Custom Row Pinning UI

    사용자 정의 UI를 정의하고 관련 API를 통해 행의 핀 상태를 변경할 수 있습니다.

    Via extra column with icon

    액션 스트립 대신 최종 사용자가 클릭하여 특정 행의 핀 상태를 변경할 수 있도록 모든 행에 핀 아이콘을 표시하고 싶다고 가정해 보겠습니다. 이는 사용자 정의 아이콘이 포함된 셀 템플릿이 있는 추가 열을 추가하여 수행할 수 있습니다.

    <igc-grid id="grid" primary-key="ID" auto-generate="false">
    <igc-column id="column1" name="column1"></igc-column>
</igc-grid>

    constructor() {
    var grid = document.getElementById('grid') as IgcGridComponent;
    var column = document.getElementById('column1') as IgcColumnComponent;

    grid.data = this.data;
    column.bodyTemplate = this.pinCellTemplate;
}

public pinCellTemplate = (ctx: IgcCellTemplateContext) => {
   const index = ctx.cell.id.rowIndex;
    return html`<span @pointerdown=${(e: any) => this.togglePinning(index)}>📌</span>`;
}

    사용자 정의 아이콘을 클릭하면 해당 행의 API 메소드를 사용하여 관련 행의 고정 상태를 변경할 수 있습니다.

    public togglePinning(index: number) {
    var grid = document.getElementsByTagName("igc-grid")[0] as IgcGridComponent;
    grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
}

    데모

    Row Pinning Limitations

    • 데이터 원본에 존재하는 레코드만 고정할 수 있습니다.
    • 행 고정 상태는 Excel로 내보내지지 않습니다. 행 고정이 적용되지 않은 것처럼 그리드가 내보내집니다.
    • 그리드의 스크롤 가능 영역에 있는 고정된 행의 복사본은 고정된 행이 있을 때 다른 그리드 기능이 해당 기능을 달성하는 방법의 필수 부분이므로 생성을 비활성화하거나 제거할 수 없습니다.
    • 행 선택은 행 ID와 함께 완전히 작동하므로 고정된 행을 선택하면 해당 복사본도 선택됩니다(그 반대의 경우도 마찬가지). 또한 고정된 영역 내에서 범위 선택(예: 사용 SHIFT + 클릭)은 스크롤 가능한 영역 내에서 행 범위를 선택하는 것과 동일한 방식으로 작동합니다. 결과 선택 항목에는 현재 고정되어 있지 않은 경우에도 그 사이의 모든 행이 포함됩니다. API를 통해 선택한 행을 가져오면 선택한 각 레코드의 단일 인스턴스만 반환됩니다.

    Styling

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

    <igc-grid class="grid"></igc-grid>

    그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

    .grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-style: double;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-cell-active-border-color: #FFCD0F;
}

    데모

    API References

    Additional Resources

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