[]
        
(Showing Draft Content)

CollectionView로 뷰(View) 편집하기

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

  • editItem 메서드는 항목의 복사본을 저장하고 컬렉션을 '편집 모드'로 설정합니다. 편집 모드에서는 뷰(View)의 새로고침이 되지 않으므로, 아이템이 편집 과정에서 뷰(View)에 정렬되거나 필터링되지 않습니다.
  • commitEdit 메서드가 편집 모드를 종료하여 정렬 및 필터링이 다시 활성화됩니다. 아이템이 변경된 경우 collectionChanged 이벤트가 발생하여 바인딩된 컨트롤이 변경 사항을 표시할 수 있습니다.
  • cancelEdit 메서드는 기존 데이터를 복원하고 편집 모드를 종료합니다.

편집 방식

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

Editing a Row in FlexGrid

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

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

항목 추가

__CollectionView__는 addNew, commitNewcancelNew 메서드를 사용하여 항목 추가를 지원합니다. 항목 제거는 remove 메서드로 수행됩니다.

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

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

commitNew 메서드는 컬렉션이 'add mode'를 종료시키고, 컬렉션을 새로 고쳐 정렬 및 필터링이 복원되도록 합니다.

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

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

Add New Row of FlexGrid

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

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

항목 제거

항목을 제거하기 위해선, 행 머리글을 클릭하여 전체 행을 선택한 다음 Delete 키를 누릅니다. 그리드는 컬렉션의 remove 메서드를 호출하고 항목은 컬렉션에서 제거됩니다.

변경 사항 추적

웹 어플리케이션은 주로 서버에서 일부 데이터를 다운로드하고, 로컬적으로 변경한 후, 나중에 변경 내용으로 서버를 업데이트하는 패턴을 사용합니다.

__CollectionView__는 추가, 제거 또는 수정된 항목을 추적하는 데 도움이 됩니다.

이 기능을 사용하려면 trackChanges 속성을 true로 설정하십시오. 그렇게 하면 __CollectionView__가 다음 컬렉션에 항목을 추가합니다.

  • itemsAdded
  • itemsRemoved
  • itemsEdited

준비가 되었으면 변경 사항을 서버로 전송하고 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__와 같은 컨트롤에서 동일한 방법을 사용할 수 있습니다.