매쉬업 작성기 > 위젯 > 표준 위젯 > 그리드 위젯 > 그리드 위젯 내에서 데이터 편집
그리드 위젯 내에서 데이터 편집
그리드 위젯 내에서 편집을 활성화하려면 다음 단계를 수행하십시오.
1. Mashup Builder의 캔버스에서 또는 탐색기 패널을 사용하여 그리드 위젯을 선택합니다.
2. 속성 패널에서 IsEditable을 True로 설정한 다음 위젯 구성 버튼을 클릭하여 위젯 구성 대화 상자를 엽니다.
3. 왼쪽 창에서 열을 선택한 다음 오른쪽 창에서 편집 가능 확인란을 선택합니다.
필요한 경우 다음 옵션을 구성합니다.
셀 콘텐츠를 편집할 때 항상 값을 요구하려면 필수 확인란을 선택합니다.
셀 콘텐츠에 유효성 검사 규칙을 적용하려면 유효성 검사 식 상자에 유효성 검사 식을 정의합니다.
유효성 검사에 대해 표시할 메시지 및 세부 정보를 정의합니다.
4. 편집하려는 모든 열에 대해 위의 단계를 반복합니다.
5. 완료를 클릭하여 대화 상자를 닫은 다음 매쉬업을 저장합니다.
편집 모드 선택
런타임에 그리드를 편집할 수 있는 방법을 제어하려면 위젯 EditLevel 속성을 다음 옵션 중 하나로 설정합니다.
전체 그리드 - 개별 셀을 편집하고 버튼이나 서비스를 사용하여 변경 사항을 수동으로 저장합니다.
단일 행 - 양식을 사용하여 행을 개별적으로 편집합니다.
단일 셀 - 셀을 개별적으로 편집하고 편집이 완료되면 변경 사항을 자동으로 저장합니다.
유효성 검사가 활성화된 열을 편집하면 입력한 데이터가 유효한지 확인하기 위해 입력이 평가됩니다. 유효성 검사에 실패하면 오류 메시지가 표시되고 변경 사항이 저장되지 않습니다. 유효성 검사에 대한 자세한 내용은 그리드 내 입력 유효성 검사를 참조하십시오.
IsEditable 속성 대신 EditButton 속성을 활성화할 수도 있습니다. 이 속성을 true로 설정하면 편집 버튼이 그리드 도구 모음에 추가됩니다. 런타임에 이 버튼을 클릭하여 편집 모드를 켜거나 끌 수 있습니다.
그리드 편집 모드
그리드 편집 모드를 사용하면 여러 셀을 업데이트 한 다음 저장 버튼을 클릭하여 모든 변경 사항을 동시에 저장할 수 있습니다.
다음 이미지는 전체 그리드를 편집할 때 런타임에 위젯의 왼쪽 위 영역에 있는 편집 버튼을 보여줍니다.
편집을 클릭하면 저장취소 버튼이 표시됩니다. 그리드에서 편집이 활성화된 각 셀에 대해 편집 컨트롤이 표시됩니다. 하나 이상의 셀 데이터를 편집한 다음 저장을 클릭하여 편집 내용을 저장할 수 있습니다. 저장하지 않은 편집 내용이 포함된 셀을 강조 표시하려면 HighlightDraftState 속성을 True로 설정합니다. 편집 내용이 있는 셀을 나타내기 위해 다른 배경색이 나타냅니다.
이 모드에서는 다음과 같은 편집 이벤트를 사용할 수 있습니다.
EditStarted - 편집을 클릭하면 트리거됩니다.
EditCompleted - 저장을 클릭하면 트리거됩니다.
EditCancelled - 취소를 클릭하면 트리거됩니다.
행 편집 모드
행 편집을 사용하면 한 번에 한 행을 편집할 수 있습니다. 이 모드를 활성화하면 편집 컨트롤이 포함된 열이 그리드의 왼쪽에 추가됩니다. 다음 이미지는 행 편집 모드로 설정된 그리드 위젯을 보여줍니다.
행을 편집하려면 편집 아이콘 또는 링크를 클릭합니다. 행 내의 셀이 포함된 편집 양식이 표시됩니다. 값을 편집한 후 업데이트를 클릭하여 현재 행에 대한 모든 변경 사항을 저장합니다.
이 모드에서는 다음과 같은 편집 이벤트를 사용할 수 있습니다.
EditRowStarted - 편집 아이콘 또는 링크를 클릭하여 양식을 사용한 행 편집을 시작하면 트리거됩니다.
EditRowCompleted - 업데이트를 클릭하면 트리거됩니다.
EditCancelled - 취소를 클릭하면 트리거됩니다.
셀 편집 모드
이 모드에서는 다음과 같은 편집 이벤트를 사용할 수 있습니다.
EditCellStarted - 편집 아이콘 또는 링크를 클릭하여 셀 편집을 시작하면 트리거됩니다.
EditCellCompleted - ENTER 키를 누르거나 값을 변경한 후 셀 바깥쪽을 클릭하면 트리거됩니다.
EditCancelled - 셀 편집을 취소하면 트리거됩니다.
편집 아이콘 또는 링크를 클릭하여 셀을 편집할 수 있습니다. 편집 상자가 활성화되어 있으면 형식 없이 원시 값이 표시됩니다. 편집을 마치면 열 렌더러가 적용되어 값에 형식이 지정됩니다. 렌더러에 대한 자세한 내용은 그리드 열 렌더러 및 형식을 참조하십시오.
* 
변경 사항을 저장하지 않고 편집을 취소하려면 ESCAPE 키를 누릅니다.
편집 컨트롤 구성
EditControlType 속성을 사용하여 편집 컨트롤의 아이콘 또는 링크를 표시합니다. EditControlIcon 속성을 사용하면 아이콘을 서버의 미디어 엔티티로 바꿀 수 있습니다. 링크의 기본 편집 레이블을 변경하려면 EditControlLabel 속성을 사용합니다. 기본적으로 편집 컨트롤은 셀에 포인터를 놓으면 표시됩니다. EditControlVisibility 속성을 사용하여 편집 컨트롤의 표시 유형을 구성할 수 있습니다.
JSON 구성 데이터를 사용하여 편집 활성화
JSON 구성에서 셀 편집을 활성화하려면 다음 최상위 글로벌 속성을 추가합니다.
var config = { “cellEditingEnabled”: true, “columns”: ... } };
열에 대한 편집을 활성화하려면 다음 JSON 데이터를 추가하십시오.
...
“ColumnFormatter”: {
“type”: “boolean”,
“format”: “notext”,
“cellEditor”: {
“enabled”: true, // *{boolean} to indicate whether cell editing is enable for this column
},
}
...
도움이 되셨나요?