Blazor 트리 그리드의 행 작업

    Blazor Tree Grid의 Ignite UI for Blazor 사용하면 개발자가 IgbActionStrip을 사용하고 행/셀 구성 요소와 행 고정을 위한 CRUD를 활용할 수 있습니다. 이러한 작업에 대한 여러 가지 미리 정의된 UI 컨트롤이 있으며, IgbTreeGrid의 특정 행에 적용할 수 있습니다. 편집 및 고정.

    Usage

    사전 정의된 작업 UI 구성 요소는 다음과 같습니다.

    • IgbGridEditingActions- 편집을 위해 특별히 설계된 기능 및 UI가 포함되어 있습니다 IgbTreeGrid. 셀 또는 행의 편집 모드를 빠르게 전환할 수 있습니다., 옵션 및 행 삭제 IgbTreeGrid에 따라 RowEditable.

    • IgbGridPinningActions- 행 고정을 위해 특별히 설계된 기능 및 UI가 IgbTreeGrid 포함되어 있습니다. 이를 통해 행을 빠르게 고정하고 고정된 행과 비활성화된 행 사이를 탐색할 수 있습니다.

    그것들은 내부에 IgbTreeGrid 추가되며 기본 상호 작용을 IgbActionStrip 제공하는 데 모두 필요합니다.

    <IgbTreeGrid Data=northwindEmployees RowEditable="True" PrimaryKey="ID">
    @foreach (var c in columns)
    {
        <IgbColumn Field="@c.Field">
        </IgbColumn>
    }
    <IgbActionStrip @ref=actionstrip>
        <IgbGridPinningActions></IgbGridPinningActions>
        <IgbGridEditingActions></IgbGridEditingActions>
    </IgbActionStrip>
</IgbTreeGrid>

    [!Note] When ActionStripComponent is a child component of the IgbTreeGrid, hovering a row will automatically show the UI.

    Custom Implementation

    이러한 구성 요소는 사용자 지정을 위한 유연성을 제공하는 템플릿을 노출합니다. 예를 들어, IgbActionStrip 다음과 같은 행 작업이 있는 Gmail 시나리오의 경우 삭제하다, 편집하다 그리고 등등. 아이콘으로 버튼 구성 요소를 만들고 클릭 이벤트를 추가하고 삽입 할 수 있습니다. IgbActionStrip.

    <div class="grid__wrapper">
    <IgbTreeGrid Data=northwindEmployees>
        <IgbActionStrip @ref=actionstrip>
            <IgbGridPinningActions></IgbGridPinningActions>
            <IgbButton Title="Edit" @onclick="() => StartEdit(actionstrip.Context)">
                <IgbIcon>edit</IgbIcon>
            </IgbButton>
            @if (!IsDeleted(actionstrip.Context))
            {
                <IgbButton Title="Delete" @onclick="() => Delete(actionstrip.Context)">
                    <IgbIcon>delete</IgbIcon>
                </IgbButton>
            }
        </IgbActionStrip>
    </IgbTreeGrid>
</div>

    API References

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