Blazor Tree Grid Column Pinning

    Blazor 트리 그리드의 Ignite UI for Blazor 컬럼 고정 기능은 개발자가 특정 열을 원하는 순서로 잠글 수 있게 해주어, 사용자가 수평으로IgbTreeGrid 스크롤해도 항상 가시성을 보장합니다. Blazor 트리 그리드 툴바를 통해 접근할 수 있는 통합 UI가 있습니다. 또한, 개발자는 열의 핀 상태를 변경하는 사용자 인터페이스를 유연하게 만들 수 있습니다.

    Blazor Tree Grid Column Pinning Example

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

    Column Pinning API

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

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

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

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

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

    <IgbTreeGrid 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로 설정하면 열은 고정되지 않은 열들 다음, 그리드 끝에 렌더링됩니다. 고정되지 않은 열은 가로로 스크롤할 수 있고, 고정된 열은 오른쪽에 고정되어 있습니다.

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

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

    Demo

    Column Pinning on Both Sides

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

    Custom Column Pinning UI

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

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

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

    <IgbTreeGrid AutoGenerate="false" Name="treeGrid" @ref="treeGrid" Data="EmployeesFlatData" PrimaryKey="ID" ForeignKey="ParentID">
    <IgbColumn Field="Name" DataType="String" Pinned="true"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column1" @ref="column1"></IgbColumn>

    <IgbColumn Field="Title" DataType="String" Pinned="true"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column2" @ref="column2"></IgbColumn>

    <IgbColumn Field="Phone" DataType="String"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column3" @ref="column3"></IgbColumn>

    <IgbColumn Field="Age" DataType="Number"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column4" @ref="column4"></IgbColumn>

    <IgbColumn Field="HireDate" DataType="Date"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column5" @ref="column5"></IgbColumn>

    <IgbColumn Field="OnPTO" DataType="Boolean"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column6" @ref="column6"></IgbColumn>
</IgbTreeGrid>


// In JavaScript

igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
    var html = window.igTemplating.html;
    window.toggleColumnPin = function toggleColumnPin(field) {
        var grid = document.getElementsByTagName("igc-tree-grid")[0];
        var col = grid.getColumnByName(field);
        col.pinned = !col.pinned;
        grid.markForCheck();
    }
    return html`<div>
    <span style="float:left">${ctx.column.field}</span>
    <span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
</div>`;
}, false);

    Demo

    Pinning Limitations

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

    Styling

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

    <IgbTreeGrid Id="grid"></IgbTreeGrid>

    그런 다음 관련 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

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