안녕하세요 그레이프시티입니다.

먼저 답변이 지연되어 죄송합니다.

문의 주신 내용에 대해 답변 드립니다.

Input 컨트롤을 통해 편집 된 항목들을 배열 변수에 저장하는 사용자 정의 함수를 이용하여 FlexGrid 컨트롤 내의 모든 셀 값을 인라인 편집할 수 있습니다.

아래의 샘플을 참고해 보시기 바랍니다.

샘플은 다음과 같은 방법으로 구현되었습니다.

1. '편집', '확인', '취소' 버튼과 FlexGrid 컨트롤을 생성하고 변수 edit를 선언합니다.
2. FlexGrid 컨트롤의 formatItem 이벤트에 변수 edit 이 true의 값을 가지면 편집 중인 항목에 대한 Input 컨트롤을 생성하는 코드를 작성합니다.
3. 아래 코드와 같이 FlexGrid 컨트롤의 Input 컨트롤을 통해 편집 된 항목들의 데이터를 변수 editedValues 에 저장하는 사용자 정의 함수 updatedEditVal 를 구현하고, 해당 함수를 FlexGrid 컨트롤의 updatingView 이벤트에 지정합니다.
   샘플에서는 67~94번 라인에서 확인해보실 수 있습니다.
   

   let editedValues = [];
   //
   function updatedEditVal() {
     if (currentEditItem.length > 0) {
       theGrid.columns.forEach(function (col) {
         var input = theGrid.hostElement.querySelectorAll('#' + col.binding);
         if (input.length > 0) {
           input.forEach((input,index) => {
             let row = input.getAttribute('row');
             var value = wijmo.changeType(input.value, col.dataType, col.format);
             let item = {
               index: row,
               binding: col.binding,
               value: value
             };
             if(editedValues.length == 0 || isExisting()){
               editedValues.push(item)
             }
             function isExisting(){
               let index = editedValues.findIndex(val => val.index == item.index && val.binding == item.binding && val.value == item.value)
               return index == -1 ? true : false;
             }
           })
         }
       });
     }
   }
   theGrid.updatingView.addHandler(updatedEditVal);

4. '편집' 버튼의 클릭 이벤트에 변수 edit의 값을 true로 지정하는 코드를 작성합니다.
5. '확인', '취소' 버튼의 클릭 이벤트에 변수 edit의 값을 false로 지정하는 코드를 작성합니다.
6. '편집', '확인', '취소' 버튼의 각 클릭 이벤트에 editItem 메서드(편집을 시작하는 메서드), commitEdit 메서드(편집을 마치는 메서드), cancelEdit 메서드(편집을 취소하는 메서드) 를 호출하는 코드를 작성합니다.

- 인라인 편집 데모

- updatingView API 문서

API 문서를 공유드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.

감사합니다.

그레이프시티 드림