뷰 편집

CollectionView는 .NET의 IEdableCollectionView 인터페이스(editItem, commitEdit, cancelEdit)와 유사한 방법으로 항목을 편집할 수 있도록 지원합니다.

  • editItem 메서드는 아이템의 복사본을 저장하고 컬렉션을 '편집 모드'로 설정합니다. 편집 모드에 있는 동안에는 뷰가 새로 고쳐지지 않으므로 편집 프로세스 중에 항목이 정렬되거나 보기에서 필터링되지 않습니다.

  • commitEdit 메서드는 편집 모드를 종료하여 정렬 및 필터링이 다시 활성화됩니다. 항목이 변경된 경우 바인딩된 컨트롤이 변경 내용을 표시할 수 있도록 collectionChanged 이벤트가 실행됩니다.

  • cancelEdit 메서드는 원래 데이터를 복원하고 편집 모드를 종료합니다.

편집 동작

편집이 시작되면 행 헤더에 연필 아이콘이 나타나 컬렉션이 편집 모드에 있음을 나타냅니다.

편집 모드에 있는 동안 'Escape' 키를 누르면 편집이 취소되고 원래 데이터가 복원됩니다.

선택을 다른 행으로 이동하거나 그리드에서 포커스를 이동하면 편집이 커밋됩니다! 이 때 컬렉션이 새로 고쳐지고 활성 필터링/정렬이 새 항목 값을 사용하여 적용됩니다.

아이템 추가

CollectionView는 addNew, commitNew 및 cancelNew 등의 메서드으로 항목을 추가할 수 있도록 지원합니다. 항목 제거는 제거 메서드로 수행됩니다.

addNew 메서드는 컬렉션에 빈 항목을 추가하고 새 항목에 대한 참조를 반환합니다. 호출자는 이 반환 값을 사용하여 새 항목을 초기화할 수 있습니다. 또는 CollectionView.newItemCreator 함수를 제공하여 새 항목을 생성하고 초기화할 수 있습니다.

addNew 메서드는 또한 컬렉션을 'add' 모드로 전환하여 새 항목이 커밋될 때까지 새 항목이 제자리에 있도록 정렬 및 필터링을 일시 중단합니다.

commitNew 메서드는 컬렉션을 '추가 모드'로 종료하고 정렬 및 필터링이 복원되도록 컬렉션을 새로 고칩니다.

cancelNew 메서드는 컬렉션에서 새 항목을 제거하고 '추가 모드'를 종료합니다.

항목을 추가하려면 먼저 그리드를 활성화하여 새 항목을 추가해야 합니다. allowAddNew 속성을 true로 설정합니다. 그런 다음 선택 영역을 마지막 행인 "새 항목 템플릿"(행 머리글에 별표가 있음)으로 이동합니다.

평소와 같이 새 항목을 편집하고 완료되면 Enter 키를 누르거나 선택 항목을 다른 행으로 이동하여 새 행을 커밋합니다.

새 행을 편집하는 동안 'Escape' 키를 누르면 추가 작업이 취소되고 새 행이 컬렉션에서 제거됩니다.

아이템 제거

항목을 제거하려면 행 헤더를 클릭하여 전체 행을 선택한 다음 삭제 키를 누릅니다. 그리드가 컬렉션 제거 방법을 호출하고 항목이 컬렉션에서 제거됩니다.

변경 추적

웹 응용 프로그램은 종종 서버에서 일부 데이터를 다운로드하고 로컬에서 변경한 후 나중에 변경된 내용으로 서버를 업데이트하는 패턴을 사용합니다.

CollectionView 는 추가, 제거 또는 수정된 항목을 추적함으로써 도움이 될 수 있습니다.

이 기능을 사용하려면 trackChanges 속성을 true로 설정해주시기 바랍니다. 이렇게 하면 CollectionView가 다음 컬렉션에 항목을 추가합니다.:

  • itemsAdded
  • itemsRemoved
  • itemsEdited

준비가 되었으면 서버로 변경사항을 보낸 후 clearChanges 메소드를 호출하여 변경 추적 컬렉션을 재설정합니다.

변경 사항 추적 데모를 확인하시기 바랍니다.

유효성 검사

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 속성은 값 자체(min, max, required, pattern 등)에 기반한 기본 HTML5 유효성 검사를 넘어서 여러 속성을 포함하는 조건을 지정할 수 있습니다.

getError 속성을 사용하면 항목을 편집하는 데 사용되는 UI가 아니라 컬렉션 자체에 검증 논리를 포함할 수 있습니다. 입력 양식이나 FlexGrid와 같은 컨트롤 에서도 동일한 방법을 사용할 수 있습니다.

Previous
페이징
Next
편집