기타 호환성 가이드

4. 기타 호환성 가이드

4. 기타 호환성 가이드

4.1. 그리드 필터 리스트 구성 방식 변경

4.1.1. 변경사항

그리드의 필터 팝업 펼침 시 필터 리스트가 구성되는 방식이 다음과 같이 변경되었습니다.

기존: 컨트롤의 value 값 기준으로 필터 팝업 리스트가 구성
변경: 컨트롤의 text 값 기준으로 필터 팝업 리스트가 구성

4.1.2. 참고 코드

그리드 디테일 컬럼에 넘버 에디터 컨트롤이 바인딩 되어있거나 아웃풋의 datatype=number, format=”#,##0”으로 설정된 경우 필터 다이얼로그 확인 시 천 자리 구문 문자(ex. 10000 -> 10,000)가 표시됩니다.

필터 다이얼로그 검색 시 천 자리 구문 문자를 제외하고 검색할 경우 다음과 같이 설정해주시기 바랍니다.

function onGrd1FilterdialogOpen(e) {
    var grd1 = e.control;
    grd1.setFilterDialogMatcher(function(itemLabel, searchText, columnName) {
        if (itemLabel == null) {
            return false;
        }

        var label = itemLabel;
        if (columnName == "column1") {
            label = (label != null) ? label.split(",").join("") : label;
        }
        if (label.indexOf(searchText) != -1) {
            return true;
        }
        return false;
    });
}

또한, 프로젝트 내 모든 필터 다이얼로그에 해당 기능을 적용하실 경우 addFilter를 통해 공통 처리할 수 있습니다.

cpr.events.EventBus.INSTANCE.addFilter("filterdialog-open", function(e){
    var grd1 = e.control;
    //스크립트는 상단의 내용과 동일
});

4.2. 캘린더 헤더 레이아웃 변경

4.2.1. 변경 사항

캘린더 헤더 레이아웃이 table에서 grid-layout으로 구조가 변경되었습니다.

기존에 table에서 제공하는 스타일 요소(border-spacing, border-collapse)를 사용한 경우 1.0.5243(2024년 8월 릴리즈) 이후 버전으로 업데이트 시 해당 스타일 요소가 적용되지 않을 수 있습니다. 만약 border-spacing을 사용한 경우 gap 속성을 사용하여 컬럼 간 간격을 설정할 수 있습니다.

4.3. 데이트 인풋 캘린더의 포커스 순환 구조 변경

4.3.1. 변경 사항

기존에는 데이트 인풋의 캘린더가 펼쳐진 경우 tab, shift+tab 이동 시 캘린더 내 요소 순회 후 마지막 요소에서 tab 이동 시 다음 컨트롤로 포커스가 이동하면서 캘린더가 닫혔습니다. 1.0.5243(2024년 8월 릴리즈) 이후 버전부터 캘린더가 펼쳐진 경우 tab, shift+tab 이동 시 다음 컨트롤로 포커스가 이동하지 않고 캘린더 내 요소를 반복적으로 순회하도록 기능이 수정되었습니다.

4.4. 그리드 필터 다이얼로그의 tab키 이동 개선

4.4.1. 변경 사항

기존에는 필터 다이얼로그에서 tab, shift+tab 이동 시 영역별(검색 인풋 박스, 모두 선택 체크박스, 확인, 취소, 헤더 텍스트, 정렬 버튼, 닫기 버튼) 이동만 지원했으며 아이템 간 이동은 키보드 상/하향키를 통해서만 가능했습니다. 1.0.5306(2024년 9월 릴리즈)에서부터 tab키 이동 시 아이템 간 포커스 이동이 가능하도록 기능이 수정되었습니다.

기존

[검색] 인풋 박스 > 모두 선택 체크박스 > 확인 버튼 > 취소 버튼 > 헤더 텍스트 > 정렬 버튼 > 닫기 버튼
변경 후

[검색] 인풋 박스 > 각 아이템별 체크박스 > 확인 버튼 > 취소 버튼 > 헤더 텍스트 > 정렬 버튼 > 닫기 버튼

4.5. 트리 아이템 체크 동작 변경

4.5.1. 변경 사항

1.0.5346(2024년 10월) 릴리즈에서 트리의 showItemCheckbox=true, itemCheckType=allchild인 경우 부모 아이템 체크 시 자식 아이템 체크 동작이 변경되었습니다.

최상위 부모 아이템 체크 > 자식 아이템 체크 해제 > 부모 아이템, 최상위 부모 아이템 체크 상태 변경(부분체크 상태)

4.6. 내비게이션 바, 메뉴의 하위 메뉴 표시 동작 개선

4.6.1. 변경 사항

1.0.5384(2024년 11월) 릴리즈에서 내비게이션 바, 메뉴 컨트롤의 하위 메뉴 표시 방식이 변경되었습니다.

내비게이션 바의 하위 메뉴가 내비게이션 바 영역을 초과하여 표시되지 않도록 개선
내비게이션 바의 menuType 속성이 "menu"인 경우와 메뉴 컨트롤의 서브 메뉴 기본 표시동작이 아래와 같이 개선
- 각 메뉴 아이템 기준으로 서브 메뉴가 표시됩니다.
- 메뉴 아이템 기준 아래쪽에 표시됩니다.
- 서브 메뉴에 스크롤이 생기는 경우 부모 메뉴 기준 위, 아래 영역 중 빈 영역이 넓은 방향으로 표시됩니다.

4.7. 링크드 콤보 박스, 링크드 리스트 박스의 키보드 조작 개선

4.7.1. 변경 사항

1.0.5384(2024년 11월) 릴리즈에서 링크드 콤보 박스, 링크드 리스트 박스의 키보드 조작 방식이 개선되었습니다.

빈 영역 클릭 시 첫 번째 리스트 박스에 포커스가 발생되는 동작 수정 -> 빈 영역 클릭 시 포커스가 발생하지 않음
Tab 키로 다음, 이전 리스트 박스 이동되도록 개선되었습니다.
다음 컨트롤에서 Shift+Tab 누르면 링크드 리스트 박스의 마지막 리스트 박스에 초점이 이동되도록 접근성이 개선되었습니다.
disabled 아이템에 방향키로 이동되지 않도록 개선되었습니다.
리스트 박스에 초점이 있을 때 위 방향키 누르면 마지막 아이템부터 시작되도록 개선되었습니다.

4.8. 리스트 박스의 키보드 조작 개선

4.8.1. 변경 사항

1.0.5384(2024년 11월) 릴리즈에서 리스트 박스의 키보드 조작이 개선되었습니다.

disabled 아이템은 건너뛰고 탐색되도록 개선되었습니다.
hover 상태에서 Spacebar 키로 아이템이 선택되도록 개선되었습니다.
아래 방향키 입력 시 처음 아이템에서 시작되도록 개선되었습니다.
위 방향키 입력 시 마지막 아이템에서 시작되도록 개선되었습니다.

4.9. 모달 다이얼로그 이동, 리사이즈 조작 개선

4.9.1. 변경 사항

1.0.5424(2024년 12월) 릴리즈에서 다이얼로그의 modal=true인 경우 다이얼로그 이동 시 다이얼로그 영역 내에서만 이동 가능하도록 기능이 개선되었습니다.

다이얼로그가 펼쳐지는 시점에 영역을 벗어난 경우에는 영역을 자유롭게 이동할 수 있으나, 영역 내에서 이동을 멈추면 영역 밖으로 다시 이동할 수 없습니다.

기존: 모달 다이얼로그 이동 시 영역 밖으로도 이동 가능
개선: 모달 다이얼로그 이동 시 영역 내에서만 다이얼로그 이동 가능

리사이즈 동작도 이동과 동일하게 앱 영역 내에서만 리사이즈가 가능하도록 개선되었습니다.

4.10. 입력 계열 컨트롤의 displayText 속성 deprecated

4.10.1. 변경 사항

1.0.5647(2025년 5월 릴리즈) 버전에서 입력 계열 컨트롤의 입력상자 컨트롤에 표시중인 텍스트 값을 반환하는 속성이 좀 더 명확하게 개선되었습니다.

기존의 displayText 속성이 deprecated 되었으며, displayingText 속성이 추가되었습니다.

반영된 컨트롤: 넘버에디터, 인풋박스, 마스크에디터, 서치인풋, 텍스트에리어, 데이트인풋, 트리셀

※ Deprecated된 API의 경우 이전 버전과의 호환성을 위해 기존의 동작을 유지하고 있습니다. 해당 API는 deprecated 표시될 뿐 추후에 제거될 예정이 없기 때문에 동작에 영향을 주지 않습니다.