CollectionView로 보기 편집

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

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

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

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

편집 방식

편집이 시작되면, 연필 아이콘이 행 머리글에 나타나 컬렉션이 편집 모드에 있음을 알 수 있습니다.

편집 모드에서 'Escape' 키를 누르면 편집이 취소되고 원본 데이터가 복원됩니다.

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

새 항목의 삽입 위치 제어

기본적으로 addNew()를 호출하면 새 항목이 sourceCollection의 마지막에 추가됩니다.

따라서 페이징이 활성화된 경우(pageSize > 0), 현재 표시 중인 페이지와 관계없이 새 항목은 마지막 페이지에 나타납니다.

새 항목의 삽입 위치를 제어하려면 다음 API를 사용합니다.

• CollectionView.newItemIndex

• CollectionView.insertAt()

페이징이 활성화된 경우 삽입 인덱스는 현재 페이지를 기준으로 해석됩니다.

페이징이 비활성화된 경우 음수가 아닌 인덱스는 전체 sourceCollection을 기준으로 해석됩니다.

페이지 기준 삽입

페이징이 활성화된 경우:

• 유효한 인덱스 범위는 0부터 pageSize - 1까지입니다.

• 인덱스 0은 현재 페이지의 맨 위에 항목을 삽입합니다.

• 인덱스 pageSize - 1은 현재 페이지의 맨 아래에 항목을 삽입합니다.

페이징이 비활성화된 경우(pageSize <= 0), 음수가 아닌 인덱스 값은 전체 sourceCollection 내의 위치를 나타냅니다.

newItemIndex 사용

newItemIndex 속성은 FlexGrid의 새 행 템플릿을 포함한 표준 addNew() 작업에서 사용됩니다.

이 속성을 현재 페이지의 유효한 인덱스 범위 내 값으로 설정하면 새 항목이 현재 페이지의 해당 위치에 삽입됩니다.

유효한 범위를 벗어난 값으로 설정하면 기본 동작에 따라 새 항목이 마지막에 추가됩니다.

import * as wijmo from '@mescius/wijmo';

let view = new wijmo.CollectionView(data, {
    pageSize: 5
});

// 현재 페이지의 맨 위에 새 항목 삽입
view.newItemIndex = 0;

let item = view.addNew();
item.name = 'New Item';
view.commitNew();

정렬, 필터링 또는 그룹화가 적용된 경우에는 명시적으로 지정한 삽입 위치가 적용되지 않습니다.

이 경우 새 항목은 기본 추가 동작에 따라 sourceCollection의 마지막에 추가되며, 이후 활성화된 뷰 변환에 따라 최종 위치가 결정됩니다.

insertAt 사용

insertAt(index, item?, commit?) 메서드는 뷰의 지정된 위치에 새 항목을 삽입합니다.

페이징이 활성화된 경우:

• 유효한 인덱스 범위는 0부터 pageSize - 1까지입니다.

• 0보다 작거나 pageSize 이상인 인덱스는 무시됩니다.

페이징이 비활성화된 경우:

• 음수가 아닌 인덱스는 전체 sourceCollection 내의 위치를 나타냅니다.

정렬, 필터링 또는 그룹화가 적용된 경우 유효한 인덱스를 지정하더라도 기본 새 항목 추가 동작이 적용되며, 항목은 sourceCollection의 마지막에 추가됩니다.

이 메서드는 다음 값을 반환합니다.

• commit이 false인 경우 삽입된 항목

• commit이 true이거나 항목을 삽입할 수 없는 경우 null

import * as wijmo from '@mescius/wijmo';

let view = new wijmo.CollectionView(data, {
    pageSize: 5
});

// 현재 페이지의 인덱스 2 위치에 항목 삽입
let item = view.insertAt(2);

if (item) {
    item.name = 'Inserted Item';
    view.commitNew();
}

커밋 동작

addNew() 또는 insertAt()을 여러 번 호출하면서 각 작업 사이에 commitNew()를 호출하지 않은 경우, 보류 중인 항목이 커밋될 때까지 추가 삭제 작업은 지원되지 않습니다.

moveToPage()를 호출하거나 현재 페이지를 변경하면 commitNew()가 자동으로 호출되어 보류 중인 새 항목이 커밋됩니다.

참고 사항

• 이 API는 메모리에 저장된 sourceCollection의 항목 순서에만 영향을 줍니다.

• 정렬, 필터링 또는 그룹화와 같은 뷰 변환이 적용된 경우 최종 표시 위치는 해당 변환에 따라 결정됩니다.

• 원격 데이터 소스를 사용하는 경우 삽입 순서를 영구적으로 저장하는 작업은 사용자가 직접 처리해야 합니다.

항목 추가

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와 같은 컨트롤에서 동일한 방법을 사용할 수 있습니다.