CollectionView로 뷰(View) 편집하기

CollectionView는 .NET의 IEditableCollectionView 인터페이스에 있는 것과 유사한 메서드를 사용하여 항목 편집을 지원합니다: editItem, commitEdit,cancelEdit

• editItem 메서드는 항목의 복사본을 저장하고 컬렉션을 '편집 모드'로 설정합니다. 편집 모드에서는 뷰(View)의 새로고침이 되지 않으므로, 아이템이 편집 과정에서 뷰(View)에 정렬되거나 필터링되지 않습니다.

• commitEdit 메서드가 편집 모드를 종료하여 정렬 및 필터링이 다시 활성화됩니다. 아이템이 변경된 경우 collectionChanged 이벤트가 발생하여 바인딩된 컨트롤이 변경 사항을 표시할 수 있습니다.

• 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가 다음 컬렉션에 항목을 추가합니다.

• itemsAdded

• itemsRemoved

• itemsEdited

준비가 되었으면 변경 사항을 서버로 전송하고 clearChanges 메서드를 호출하여 변경 추적 컬렉션을 재설정하십시오.

Tracking Changes Demo 확인하시길 바랍니다.

확인

CollectionView에는 유효성 검사 지원을 제공하는 getError 속성이 있습니다. 이를 사용하려면 getError를 유효성 검사 중인 데이터 항목과 유효성 검사할 속성을 포함하는 두 개의 매개 변수를 사용하는 함수로 설정하고, 오류 조건을 설명하는 문자열을 반환합니다(오류가 없으면 null).

import * as wijmo from '@mescius/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와 같은 컨트롤에서 동일한 방법을 사용할 수 있습니다.