cssClass 적용 부분은 문제없이 잘되어서 감사드립니다.

위의 추가적인 설명으로 현상을 좀 더 자세히 설명드립니다.

코드는 그리드 생성 외 추가한 부분은

클릭 시 rowIndex를 추출하는 이벤트와

theGrid.hostElement.addEventListener("click",  (e) => {
    let ht = theGrid.hitTest(e);
selectRowIndex = ht.row;
})

Add 버튼 클릭 시

theGrid.collectionView.sourceCollection.splice(selectRowIndex + 1, 0, {status:'U'});
theGrid.collectionView.refresh();

로 추가행을 생성하는 것입니다. 

원하는 방향은 어떤 cell이 클릭되었을때 Add 버튼을 클릭하게 되면 해당 cell 아래 신규 row가 생성되는 것입니다. 

(단순 선택 후 Add를 클릭 시엔 정상적으로 동작합니다.)

위는 Picklist 데이터를 Draft -> InProgress로 변경한 직 후 상황입니다.

beginningEdit로 cssClass가 활성화 되어 있고 변경한 Cell이 선택이 되어 있습니다.

현 상태에서 Add 버튼을 클릭을 4번을 했음에도 추가행이 생성되는 모습이 보이지 않습니다.

위의 상태에서 다른 행을 클릭할 시 Add버튼을 클릭한 횟수만큼 4개의 row가 갑작스레 등장하게 됩니다.

혹시 위와 같은 현상이 일어나지 않는건지 죄송하지만 다시 한번 확인부탁드립니다.

코드가 필요하다면 현재 개발중인 부분에 변수가 많아서 해당 부분을 제거하고 올려보도록 하겠습니다.

안녕하세요 메시어스입니다.

문의하신 내용과 관련하여 디테일한 내용 공유 감사합니다.

공유해주신 내용으로 확인했을 때, 안타깝게도 행 자체가 삽입이 되지 않는 현상은 저희 쪽에서 재현이 되지 않고 있습니다. 

다만 dataMap의 dropdown 버튼 클릭 시, 그리드의 hostElement가 아닌 glyph 아이콘이 인식되어 click 이벤트 내에서 행의 인덱스가 업데이트되지 않아 원하는 지점에 행이 삽입되지 않는 현상이 파악되었습니다.

이를 해결하기 위해서는 아래 코드와 같이 hitTest 메서드 외에 현재 선택된 행의 인덱스를 가져오기 위해 그리드의 현재 선택된 행 정보를 가져오는 selectedRows를 이용하여 행의 index 속성을 적용 및 구현해보시기 바랍니다.

// add 버튼 클릭 시
  document.getElementById('btn').addEventListener('click', function () {
    let clickedRowIdx = theGrid.selectedRows[0].index;
    theGrid.collectionView.sourceCollection.splice(clickedRowIdx + 1, 0, {id:1000});
    theGrid.collectionView.refresh();
  });

감사합니다.

메시어스 드림