Blazor 트리 그리드의 행 작업

The Ignite UI for Blazor Row Actions feature in Blazor Tree Grid enables developers to use an IgbActionStrip and utilize CRUD for row/cell components and row pinning. There are several predefined UI controls for these operations that are applicable to a specific row in the IgbTreeGrid – editing and pinning.

Usage

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

IgbGridEditingActions- 편집을 위해IgbTreeGrid 특별히 설계된 기능과 UI를 포함합니다. 셀이나 행의 편집 모드를 빠르게 토글할 수 있고, 행 삭제 여부RowEditable에 따라IgbTreeGrid 달라집니다.
IgbGridPinningActions- 행 고정을 위해IgbTreeGrid 특별히 설계된 기능과 UI를 포함합니다. 이 기능은 빠르게 줄 고정을 하고, 고정된 행과 비활성화된 행 사이를 탐색할 수 있게 해줍니다.

이들은 기본 상호작용을 제공하기 위해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

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