[]
__CollectionView__는 .NET의 IEditableCollectionView 인터페이스에 있는 것과 유사한 메서드를 사용하여 항목 편집을 지원합니다: editItem, commitEdit,cancelEdit
편집이 시작되면, 연필 아이콘이 행 머리글에 나타나 컬렉션이 편집 모드에 있음을 알 수 있습니다.
편집 모드에서 'Escape' 키를 누르면 편집이 취소되고 원본 데이터가 복원됩니다.
선택 항목을 다른 행으로 이동하거나, 포커스를 그리드에서 멀리 이동하면, 편집이 반영됩니다! 그러면 컬렉션이 새로 고침되고 활성 필터링/정렬이 새 항목 값을 사용하여 적용됩니다.
__CollectionView__는 addNew, commitNew 및 cancelNew 메서드를 사용하여 항목 추가를 지원합니다. 항목 제거는 remove 메서드로 수행됩니다.
addNew 메서드는 컬렉션에 빈 항목을 추가하고 새 항목에 대한 참조를 반환합니다. 호출자는 이 반환 값을 사용하여 새 항목을 초기화할 수 있습니다. 또는 CollectionView.newItemCreator 함수를 제공하여 새 항목을 만들고 초기화할 수 있습니다.
또한 addNew 메서드는 컬렉션을 'add' 모드로 설정하여 새 항목이 커밋될 때까지 정렬 및 필터링을 일시 중단합니다.
commitNew 메서드는 컬렉션이 'add mode'를 종료시키고, 컬렉션을 새로 고쳐 정렬 및 필터링이 복원되도록 합니다.
cancelNew 메서드는 컬렉션에서 새 항목을 제거하고 'add mode'를 종료합니다.
항목을 추가하려면 먼저 그리드를 활성화하여 새 항목을 추가해야 합니다. allowAddNew 속성을 _true_로 설정합니다. 그런 다음 선택 항목을 마지막 행인 "새 항목 템플릿"으로 이동합니다(행 머리글에 별표가 있음). 다음과 같습니다:
평소처럼 새 항목을 편집하고 완료되면 Enter 키를 누르거나 선택 항목을 다른 행으로 이동하여 새 행을 반영합니다.
새 행을 편집하는 동안 'Escape' 키를 누르면 추가가 취소되고 컬렉션에서 새 행이 제거됩니다.
항목을 제거하기 위해선, 행 머리글을 클릭하여 전체 행을 선택한 다음 Delete 키를 누릅니다. 그리드는 컬렉션의 remove 메서드를 호출하고 항목은 컬렉션에서 제거됩니다.
웹 어플리케이션은 주로 서버에서 일부 데이터를 다운로드하고, 로컬적으로 변경한 후, 나중에 변경 내용으로 서버를 업데이트하는 패턴을 사용합니다.
__CollectionView__는 추가, 제거 또는 수정된 항목을 추적하는 데 도움이 됩니다.
이 기능을 사용하려면 trackChanges 속성을 true로 설정하십시오. 그렇게 하면 __CollectionView__가 다음 컬렉션에 항목을 추가합니다.
준비가 되었으면 변경 사항을 서버로 전송하고 clearChanges 메서드를 호출하여 변경 추적 컬렉션을 재설정하십시오.
Tracking Changes Demo 확인하시길 바랍니다.
__CollectionView__에는 유효성 검사 지원을 제공하는 getError 속성이 있습니다. 이를 사용하려면 __getError__를 유효성 검사 중인 데이터 항목과 유효성 검사할 속성을 포함하는 두 개의 매개 변수를 사용하는 함수로 설정하고, 오류 조건을 설명하는 문자열을 반환합니다(오류가 없으면 null).
import * as wijmo from '@grapecity/wijmo';
let view = new wijmo.CollectionView();
// only accept gmail email addresses.
view.getError = (item, property) => {
if ( property == "email" && item.endsWith('@gmail.com') ) {
return null;
}
else {
return 'Invalid email. Please enter a gmail address';
}
}
getError 속성은 값 자체(예: 최소, 최대, 필수, 패턴 등)만을 기반으로 하는 기본 HTML5 유효성 검사 이상입니다. 이를 통해 여러 속성을 포함하는 조건을 지정할 수 있습니다.
getError 속성을 사용하면 항목 편집에 사용되는 UI가 아닌, 컬렉션 자체에 유효성 검사 논리를 포함할 수 있습니다. 그런 다음 입력 양식이나 __FlexGrid__와 같은 컨트롤에서 동일한 방법을 사용할 수 있습니다.