Blazor 그리드 편집
Blazor Grid의 Ignite UI for Blazor 생성, 업데이트, 삭제와 같은 데이터 조작 작업을 수행하는 쉬운 방법을 제공합니다. IgbGrid
이러한 작업이 수행되는 방식을 사용자 정의할 수 있는 강력한 공개 API를 제공합니다. 데이터 조작 단계는 다음과 같습니다.
Setup
활성화해야 하는 편집 모드를 지정하기 위해 IgbGrid
Editable
및 RowEditable
과 같은 부울 속성을 노출합니다.
Editable
속성을 사용하면 다음 옵션을 지정할 수 있습니다.
- false- 해당 열의 편집이 비활성화됩니다. 이것이 기본값입니다.
- true- 해당 열에 대한 편집이 활성화됩니다.
열을 편집할 수 없는 경우에도
IgbGrid
에서 노출하는 공개 API를 통해 해당 값을 수정할 수 있습니다.
RowEditable
속성을 사용하면 다음 옵션을 지정할 수 있습니다.
- false- 해당 그리드의 행 편집이 비활성화됩니다. 이것이 기본값입니다.
- true- 해당 그리드의 행 편집이 활성화됩니다.
IgbGrid
에서 RowEditable
속성을 true로 설정하고 Editable
속성을 어떤 열에도 명시적으로 정의하지 않은 경우 기본 키를 제외한 모든 열에 대해 편집이 활성화됩니다.
- 셀 및 일괄 편집- 이 시나리오에서는 각 셀의 모든 단일 수정 사항이 별도로 보존되며 실행 취소/다시 실행 작업이 셀 수준에서 가능합니다.
- 행 및 일괄 편집- 이 시나리오에서는 수정 사항이 행 수준에서 유지되므로 실행 취소/다시 실행 작업은 수정된 각 셀에 대해 작동하지 않고 각 행의 여러 셀에 대해 작동합니다.
Editing Templates
데이터 유형별 편집 템플릿을 사용하려면 열의 DataType
속성을 지정해야 합니다. 이제 각 유형의 기본 템플릿이 무엇인지 살펴보겠습니다.
-
string
데이터 유형의 경우 기본 템플릿은IgbInput
사용합니다. -
number
데이터 유형의 경우 기본 템플릿은IgbInput
type="number"를 사용하므로 숫자로 구문 분석할 수 없는 값으로 셀을 업데이트하려고 하면 변경 사항이 삭제되고 셀의 값은 0으로 설정합니다. -
date
데이터 유형의 경우 기본 템플릿은IgbDatePicker
사용합니다. -
dateTime
데이터 유형의 경우 기본 템플릿은DateTimeEditor
사용합니다. 이 편집기는 DateTime 개체의 입력 요소 부분에 대한 마스크 지침을 제공합니다. -
time
데이터 유형의 경우 기본 템플릿은TimePicker
사용합니다. -
boolean
데이터 유형의 경우 기본 템플릿은IgbCheckbox
사용합니다. -
currency
데이터 유형의 경우 기본 템플릿은 애플리케이션 또는 그리드 로케일 설정을 기반으로 하는 접두사/접미사 구성과 함께InputGroup
사용합니다. -
percent
데이터 유형의 경우 기본 템플릿은 편집된 값의 미리 보기를 백분율로 표시하는 접미사 요소와 함께InputGroup
사용합니다.
- 사용자 정의 템플릿의 경우 셀 편집 항목을 참조하세요.
사용 가능한 모든 열 데이터 유형은 공식 열 유형 항목에서 찾을 수 있습니다.
Event Arguments and Sequence
그리드는 편집 경험을 더 효과적으로 제어할 수 있는 다양한 이벤트를 표시합니다. 이러한 이벤트는 행 편집 및 셀 편집 수명 주기 동안(편집 작업을 시작, 커밋 또는 취소할 때) 발생합니다.
이벤트 | 설명 | 인수 | 취소 가능 |
---|---|---|---|
RowEditEnter |
만약에RowEditing 활성화되어 행이 편집 모드로 들어갈 때 실행됩니다. |
IgbGridEditEventArgs |
진실 |
CellEditEnter |
셀이 편집 모드로 들어갈 때 발생합니다(이후RowEditEnter ) |
IgbGridEditEventArgs |
진실 |
CellEdit |
값이 변경되면 셀 값이 커밋되기 직전에 실행 됩니다(예:Enter ) |
IgbGridEditEventArgs |
진실 |
CellEditDone |
값이 변경되면 셀이 편집되고 셀 값이 커밋 된 후에 실행됩니다. | IgbGridEditDoneEventArgs |
거짓 |
CellEditExit |
셀이 편집 모드를 종료할 때 발생합니다. | IgbGridEditDoneEventArgs |
거짓 |
RowEdit |
만약에RowEditing 활성화되면 편집 모드의 값이 커밋되기 직전에 실행 됩니다(예:Done 행 편집 오버레이의 버튼) |
IgbGridEditEventArgs |
진실 |
RowEditDone |
만약에RowEditing 활성화되면 행이 편집되고 새 행의 값이 커밋된 후에 실행 됩니다. |
IgbGridEditDoneEventArgs |
거짓 |
RowEditExit |
만약에RowEditing 활성화되면 행이 편집 모드를 종료할 때 실행됩니다. |
IgbGridEditDoneEventArgs |
거짓 |
Event Cancelation
RowEditEnter
- 둘 다 편집 모드로 들어가지 않습니다Row
Cell
.CellEditEnter
- 셀 편집 입력을 방지합니다.RowEditable
활성화되면 행 편집이 트리거되지만 셀 편집은 금지된 상태로 유지됩니다.CellEdit
- 허용Cell
및/또는Row
편집, 완료 버튼 또는 Enter 키를 누르면 값 또는 행 트랜잭션이 커밋되지 않습니다. 셀 편집 및 행 편집은 취소 버튼을 클릭할 때까지 닫히지 않습니다.RowEdit
- 셀 커밋이 가능하지만 전체 행은 불가능합니다. 행은 편집 모드로 유지되며 행 트랜잭션은 열린 것으로 간주됩니다. 완료를 누르면 행이 커밋되거나 닫히지 않습니다. 취소 버튼은 변경 사항을 적용하지 않고 편집 프로세스와 트랜잭션을 닫습니다.
다음 샘플은 실제 편집 실행 순서를 보여줍니다.
Features integration
셀/행이 편집 모드에 있는 동안 사용자는 다양한 방법으로 그리드와 상호 작용할 수 있습니다. 다음 표에서는 특정 상호 작용이 현재 편집에 어떤 영향을 미치는지 지정합니다.
그리드 | 필터링 | 정렬 | 페이징 | 움직이는 | 고정 | 숨김 | 그룹화 기준 | 크기 조정 | 탈출하다 | 입력하다 | F2 | 탭 | 셀 클릭 | 새 행 추가/삭제/수정 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
편집 모드 유지 | ✔ | |||||||||||||
편집 모드 종료 | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | |
저지르다 | ✔ | ✔ | ✔ | ✔ | ✔ | |||||||||
버리다 | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
표에서 볼 수 있듯이 열 크기 조정을 제외한 모든 상호 작용은 편집을 종료하고 새 값을 삭제합니다. 새 값이 커밋되어야 하는 경우 개발자는 해당 기능 "-ing" 이벤트에서 이를 수행할 수 있습니다.
셀/행이 편집 모드에 있는 동안 사용자가 열을 정렬하려고 시도하는 경우 새 값을 커밋하는 방법의 예:
<IgbGrid
Id="grid"
SortingScript="SortingHandler"
RowEditable="true">
</IgbGrid>
//In JavaScript
function SortingHandler() {
grid.endEdit(true);
}
igRegisterScript("SortingHandler", SortingHandler, false);