Blazor Hierarchical Grid Row Adding
Blazor Hierarchical Grid의 Ignite UI for Blazor 사용하면 사용자는 별도의 양식이나 페이지로 이동하지 않고도 새 데이터 레코드를 입력하고 제출할 수 있습니다. IgbHierarchicalGrid
를 사용하면 사용자는 인라인 행 추가와 CRUD 작업을 위한 강력한 API를 통해 데이터를 조작할 수 있습니다. 그리드 템플릿에서 편집 작업이 활성화된 IgbActionStrip
구성 요소를 추가합니다. 그런 다음 행을 마우스오버하고 제공된 버튼을 사용합니다. 마지막으로 ALT + +를 눌러 행 추가 UI를 생성합니다.
Blazor Hierarchical Grid Row Adding Example
Row Adding Usage
그런 다음 바인딩된 데이터 소스를 정의하고 RowEditable
IgbActionStrip
true로 설정하고 편집 작업이 활성화된 구성 요소를 정의합니다 IgbHierarchicalGrid
. 입력은 AddRow
UI를 추가하는 행을 생성하는 버튼의 가시성을 제어합니다.
<IgbHierarchicalGrid AutoGenerate="false" Id="hGrid" PrimaryKey="Debut" RowEditable="true">
<IgbColumn Field="Artist" Header="Artist" DataType="GridColumnDataType.String"></IgbColumn>
<IgbColumn Field="HasGrammyAward" Header="Has Grammy Award" DataType="GridColumnDataType.Boolean"></IgbColumn>
<IgbColumn Field="Debut" Header="Debut" DataType="GridColumnDataType.Number"></IgbColumn>
<IgbColumn Field="GrammyNominations" Header="Grammy Nominations" DataType="GridColumnDataType.Number"></IgbColumn>
<IgbColumn Field="GrammyAwards" Header="Grammy Awards" DataType="GridColumnDataType.Number"></IgbColumn>
<IgbActionStrip>
<IgbGridEditingActions AddRow="true"></IgbGridEditingActions>
</IgbActionStrip>
<IgbRowIsland AutoGenerate="false" Key="Albums" PrimaryKey="USBillboard200" RowEditable="true">
<IgbColumn Field="Album" Header="Album" DataType="GridColumnDataType.Number"></IgbColumn>
<IgbColumn Field="LaunchDate" Header="Launch Date" DataType="GridColumnDataType.Date"></IgbColumn>
<IgbColumn Field="BillboardReview" Header="Billboard Review" DataType="GridColumnDataType.Number"></IgbColumn>
<IgbColumn Field="USBillboard200" Header="US Billboard 200" DataType="GridColumnDataType.Number"></IgbColumn>
<IgbColumn Field="GrammyAwards" Header="Grammy Awards" DataType="GridColumnDataType.Number"></IgbColumn>
<IgbRowIsland AutoGenerate="false" Key="Songs" PrimaryKey="Number" RowEditable="true">
<IgbColumn Field="Number" Header="Number" DataType="GridColumnDataType.String"></IgbColumn>
<IgbColumn Field="Title" DataType="GridColumnDataType.String"></IgbColumn>
<IgbColumn Field="Released" DataType="GridColumnDataType.Date"></IgbColumn>
<IgbColumn Field="Genre" DataType="GridColumnDataType.String"></IgbColumn>
<IgbActionStrip>
<IgbGridEditingActions AddRow="true"></IgbGridEditingActions>
</IgbActionStrip>
</IgbRowIsland>
<IgbActionStrip>
<IgbGridEditingActions AddRow="true"></IgbGridEditingActions>
</IgbActionStrip>
</IgbRowIsland>
</IgbHierarchicalGrid>
참고: 행 추가 작업에는 기본 키 설정이 필수입니다.
참고: 기본 키를 제외한 모든 열은 기본적으로 UI를 추가하는 행에서 편집 가능합니다. 특정 열에 대한 편집을 비활성화하려면
Editable
열의 입력을false
로 설정해야 합니다.
참고: 행 추가 버튼의 가시성을 제어하는
IgbGridEditingActions
입력은 버튼이 표시하는 레코드를 미세 조정하기 위해IgbRowType
유형인 작업 스트립 컨텍스트를 사용할 수 있습니다.
내부 BaseTransactionService
는 자동으로 제공됩니다 IgbHierarchicalGrid
. 행 상태가 제출되거나 취소될 때까지 보류 중인 셀 변경 내용을 보유합니다.
Start Row Adding Programmatically
IgbHierarchicalGrid
두 개의 서로 다른 공용 메서드를 사용하여 Add Row UI를 프로그래밍 방식으로 생성할 수 있습니다. 하나는 UI가 생성되어야 하는 행을 지정하기 위해 행 ID를 허용하는 것이고 다른 하나는 인덱스로 작동하는 것입니다. 이러한 메서드를 사용하여 현재 데이터 뷰 내의 아무 곳에나 UI를 생성할 수 있습니다. 페이지를 변경하거나 필터링된 행을 지정하는 것은 지원되지 않습니다.
BeginAddRowById
사용하려면 해당 RowID
(PK)를 통해 작업의 컨텍스트로 사용할 행을 지정해야 합니다. 그런 다음 메서드는 최종 사용자가 지정된 행에 대한 행 추가 작업 스트립 버튼을 클릭한 것처럼 작동하여 그 아래에 UI를 생성합니다. 첫 번째 매개변수에 null
전달하여 UI가 그리드의 첫 번째 행으로 생성되도록 할 수도 있습니다.
@code {
await this.grid.BeginAddRowByIdAsync('ALFKI', false); // Spawns the add row UI under the row with PK 'ALFKI'
await this.grid.BeginAddRowByIdAsync(null, false); // Spawns the add row UI as the first record
}
이 메서드는 BeginAddRowByIndex
비슷하게 작동하지만 UI가 생성되어야 하는 인덱스를 지정해야 합니다. 허용되는 값의 범위는 0에서 데이터 뷰의 크기(1) 사이입니다.
@code {
await this.grid.BeginAddRowByIndexAsync(10); // Spawns the add row UI at index 10
await this.grid.BeginAddRowByIndexAsync(0); // Spawns the add row UI as the first record
}
Positioning
행 추가 UI의 기본 위치는 최종 사용자가 행 추가 버튼을 클릭한 행 아래에 있습니다.
스크롤하면
IgbHierarchicalGrid
행 추가 UI가 자동으로 완전히 표시됩니다.행 추가 UI의 오버레이는 스크롤 중에 위치를 유지합니다.
Behavior
행 추가 UI는 최종 사용자에게 일관된 편집 환경을 제공하도록 설계되었으므로 행 편집 UI와 동작이 동일합니다. 자세한 내용은 계층적 그리드 행 편집 항목을 참조하세요.
행 추가 UI를 통해 새 행이 추가되면 해당 위치 및/또는 가시성은 의 정렬, 필터링 및 그룹화 상태에 IgbHierarchicalGrid
따라 결정됩니다. 이러한 상태가 적용되지 않은 a IgbHierarchicalGrid
에서는 마지막 레코드로 표시됩니다. 스낵바가 잠깐 표시되며, 최종 사용자가 시야에 없는 경우 해당 위치로 스크롤 IgbHierarchicalGrid
하는 데 사용할 수 있는 버튼이 포함되어 있습니다.
Keyboard Navigation
- ALT + +- 행 추가를 위한 편집 모드로 들어갑니다.
ESC는 변경 사항을 제출하지 않고 행 추가 모드를 종료합니다.
Tab 키를 누르면 행의 편집 가능한 한 셀에서 다음 셀로, 가장 오른쪽의 편집 가능한 셀에서 CANCEL 및 DONE 버튼으로 초점을 이동합니다. 완료 버튼을 통한 탐색은 현재 편집된 행 내에서 편집 가능한 가장 왼쪽 셀로 이동합니다.
Feature Integration
의 데이터 뷰
IgbHierarchicalGrid
가 수정되면 모든 행 추가 작업이 중지됩니다. 최종 사용자가 변경한 모든 내용이 제출됩니다. 데이터 보기를 변경하는 작업에는 정렬, 그룹화, 필터링, 페이징 등이 포함되지만 이에 국한되지는 않습니다.행 추가 작업이 완료된 후 요약이 업데이트됩니다. 정렬, 필터링 등과 같은 다른 데이터 보기 종속 기능에도 동일하게 적용됩니다.
- 에 대한
IgbHierarchicalGrid
UI를 생성할 때 최종 사용자가 행 추가 버튼을 클릭하는 행에 대해 현재 확장된 모든 하위 레이아웃이 축소됩니다.
Customizing Row Adding Overlay
Customizing Text
오버레이를 추가하는 행의 텍스트를 사용자 정의할 수 있습니다. RowAddTextTemplate
<IgbHierarchicalGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowAddTextTemplate="addTextTemplate">
</IgbHierarchicalGrid>
@code {
private RenderFragment<IgbGridEmptyTemplateContext> addTextTemplate = (context) =>
{
return @<span>Adding Row</span>;
};
}
Customizing Buttons
RowEditActions
템플릿을 사용하면 행 편집 오버레이의 버튼을 사용자 정의할 수 있습니다.
<IgbHierarchicalGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowEditActionsTemplateScript="rowEditActionsTemplate">
</IgbHierarchicalGrid>
//In JavaScript:
igRegisterScript("rowEditActionsTemplate", (endRowEdit) => {
var html = window.igTemplating.html;
return html`<div class="row-actions">
<button @click="${evt => endRowEdit.implicit(false, evt)}">Cancel</button>
<button @click="${evt => endRowEdit.implicit(true, evt)}">Apply</button>
</div>`
}, false);
참고:
RowEditActions
템플릿을 사용하면 오버레이 버튼 편집 및 추가에 대한 편집 작업이 변경됩니다.
Styling
행 추가 UI는 IgbActionStrip
편집 작업의 버튼, 편집 편집기 및 오버레이, 최종 사용자가 새로 추가된 행으로 스크롤할 수 있는 스낵바로 구성됩니다. 이러한 구성 요소의 스타일을 지정하려면 해당 항목의 포괄적인 가이드를 참조할 수 있습니다.
API References
RowEditable
RowEditEnter
RowEdit
RowEditDone
RowEditCancel
EndEdit
PrimaryKey
IgbHierarchicalGrid
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.