Blazor Hierarchical Grid Column Pinning

    The Ignite UI for Blazor Column Pinning feature in Blazor Hierarchical Grid enables developers to lock specific columns in a desired order, ensuring visibility all the time even when users scroll horizontally through the IgbHierarchicalGrid. There’s an integrated UI for Column Pinning, accessible via the Blazor Hierarchical Grid toolbar. Additionally, developers have the flexibility to build a custom user interface which changes the pin state of the columns.

    Blazor Hierarchical Grid Column Pinning Example

    이 예시는 한 열 또는 여러 열을 왼쪽 또는 오른쪽IgbHierarchicalGrid에 고정하는 방법을 보여줍니다.

    Column Pinning API

    컬럼 핀닝은 의Pinned 속성에 의해IgbColumn 제어됩니다. 고정된 열은 기본적으로 왼쪽IgbHierarchicalGrid에 렌더링되며, 고정되지 않은 열IgbHierarchicalGrid을 가로 스크롤하여 고정 상태를 유지합니다.

    또한 열을 필드 이름으로 고정하거나 해제하는 방법이나 방법IgbHierarchicalGrid 들을 사용할PinColumn​UnpinColumn​IgbHierarchicalGrid 수도 있습니다:

    두 메서드 모두 해당 작업의 성공 여부를 나타내는 부울 값을 반환합니다. 일반적으로 실패하는 이유는 열이 이미 원하는 상태에 있기 때문입니다.

    가장 오른쪽 고정된 열의 오른쪽에 열이 고정되어 있습니다. 고정된 열의 순서를 변경하려면 이벤트에ColumnPin 가입하고 이벤트 인자의 속성을 원하는 위치 인덱스로 변경InsertAtIndex 하면 가능합니다.

    가장 오른쪽 고정된 열의 오른쪽에 열이 고정되어 있습니다. 고정된 열의 순서를 변경하려면 이벤트에ColumnPinScript 구독하고 이벤트 인수의 속성을 원하는 위치 인덱스로 변경InsertAtIndex 하는 JavaScript 함수를 제공함으로써 가능합니다.

    <IgbHierarchicalGrid Data=data AutoGenerate=true ColumnPinScript="onColumnPin"/>


//In JavaScript
function onColumnPin(e) {
    if (e.detail.column.field == "Country") {
        e.detail.insertAtIndex = 0;
    }
}

igRegisterScript("onColumnPin", onColumnPin, false);

    Pinning Position

    구성 옵션을 통해Pinning 열의 고정 위치를 변경할 수 있습니다. 열의 위치를 시작 또는 끝으로 설정할 수 있습니다. End로 설정하면 열은 고정되지 않은 열들 다음, 그리드 끝에 렌더링됩니다. 고정되지 않은 열은 가로로 스크롤할 수 있고, 고정된 열은 오른쪽에 고정되어 있습니다.

    <IgbHierarchicalGrid Data=data AutoGenerate=true Pinning="pinningConfig"></IgbHierarchicalGrid>

@code {
    private IgbPinningConfig pinningConfig = new() {
        Columns = ColumnPinningPosition.End
    };
}

    Demo

    Column Pinning on Both Sides

    또한, 각 열의 핀 위치를 따로 지정할 수 있어, 격자 양쪽에 열을 고정하여 데이터 세트의 편의와 최적화를 쉽게 할 수 있습니다. 자세한 내용은 아래 데모를 참고해 주세요. 열을 고정하려면 헤더를 클릭해 툴바에 추가된 핀 버튼을 사용해 열을 선택하거나, 단순히 고정된 다른 열로 드래그해 주세요.

    Custom Column Pinning UI

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

    도구 모음 대신 최종 사용자가 클릭하여 특정 열의 핀 상태를 변경할 수 있는 열 헤더에 핀 아이콘을 정의한다고 가정해 보겠습니다.

    이는 사용자 정의 아이콘이 있는 열의 헤더 템플릿을 생성하여 수행할 수 있습니다.

    Demo

    Pinning Limitations

    • 열 너비를 백분율(%)로 설정하면 고정된 열이 있을 때 본문과 헤더 내용이IgbHierarchicalGrid 어긋나게 됩니다. 컬럼 핀닝이 제대로 작동하려면 칼럼 너비가 픽셀(px) 단위이거나 자동 할당되어야 합니다IgbHierarchicalGrid.

    Styling

    미리 정의된 테마 외에도, 일부 사용 가능한 CSS 속성을 설정하여 그리드를 추가로 맞춤화할 수 있었습니다. 색상을 변경하고 싶다면, 먼저 그리드에 대해 aID를 설정해야 합니다:

    <IgbHierarchicalGrid Id="grid"></IgbHierarchicalGrid>

    그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

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

    Demo

    API References

    Additional Resources

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