# 기타 호환성 가이드

# 4. 기타 호환성 가이드

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-" inline-copy-host=""></div><div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk--1" inline-copy-host="">---

</div>### **4.1. 그리드 필터 리스트 구성 방식 변경**

#### 4.1.1. 변경사항

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

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-%EA%B8%B0%EC%A1%B4%3A-%EC%BB%A8%ED%8A%B8%EB%A1%A4%EC%9D%98-value-%EA%B0%92-%EA%B8%B0%EC%A4%80%EC%9C%BC" inline-copy-host="">- **기존:** 컨트롤의 value 값 기준으로 필터 팝업 리스트가 구성
- **변경:** 컨트롤의 text 값 기준으로 필터 팝업 리스트가 구성

</div>#### 4.1.2. 참고 코드

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

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

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk--2" inline-copy-host=""></div>```
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;
    });
}

```

<div _ngcontent-ng-c2410288600="" class="code-block ng-tns-c2410288600-378 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwjcgerorqCRAxUAAAAAHQAAAAAQmwI" decode-data-ved="1" id="bkmrk--4" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_b2efeb21fc658887","c_89468985c62b47cb",null,"rc_f82fbda57994164d",null,null,"ko",null,1,null,null,1,0]]"><div _ngcontent-ng-c2410288600="" class="formatted-code-block-internal-container ng-tns-c2410288600-378"><div _ngcontent-ng-c2410288600="" class="animated-opacity ng-tns-c2410288600-378"></div></div></div><div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk--6" inline-copy-host=""></div>또한, 프로젝트 내 모든 필터 다이얼로그에 해당 기능을 적용하실 경우 addFilter를 통해 공통 처리할 수 있습니다.

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk--7" inline-copy-host=""></div>```
cpr.events.EventBus.INSTANCE.addFilter("filterdialog-open", function(e){
    var grd1 = e.control;
    //스크립트는 상단의 내용과 동일
});

```

<div _ngcontent-ng-c2410288600="" class="code-block ng-tns-c2410288600-379 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwjcgerorqCRAxUAAAAAHQAAAAAQnAI" decode-data-ved="1" id="bkmrk--9" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_b2efeb21fc658887","c_89468985c62b47cb",null,"rc_f82fbda57994164d",null,null,"ko",null,1,null,null,1,0]]"><div _ngcontent-ng-c2410288600="" class="formatted-code-block-internal-container ng-tns-c2410288600-379"><div _ngcontent-ng-c2410288600="" class="animated-opacity ng-tns-c2410288600-379"></div></div></div><div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk--11" inline-copy-host=""></div>### **4.2. 캘린더 헤더 레이아웃 변경**

#### 4.2.1. 변경 사항

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

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

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk--12" inline-copy-host="">---

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

#### 4.3.1. 변경 사항

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

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk--13" inline-copy-host="">---

</div>### **4.4. 그리드 필터 다이얼로그의 tab키 이동 개선**

#### 4.4.1. 변경 사항

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

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-%EA%B8%B0%EC%A1%B4-%5B%EA%B2%80%EC%83%89%5D-%EC%9D%B8%ED%92%8B-%EB%B0%95%EC%8A%A4-%3E-%EB%AA%A8%EB%91%90-%EC%84%A0" inline-copy-host="">- 기존
    
    \[검색\] 인풋 박스 &gt; 모두 선택 체크박스 &gt; 확인 버튼 &gt; 취소 버튼 &gt; 헤더 텍스트 &gt; 정렬 버튼 &gt; 닫기 버튼
- 변경 후
    
    \[검색\] 인풋 박스 &gt; 각 아이템별 체크박스 &gt; 확인 버튼 &gt; 취소 버튼 &gt; 헤더 텍스트 &gt; 정렬 버튼 &gt; 닫기 버튼

---

</div>### **4.5. 트리 아이템 체크 동작 변경**

#### 4.5.1. 변경 사항

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

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-%EC%B5%9C%EC%83%81%EC%9C%84-%EB%B6%80%EB%AA%A8-%EC%95%84%EC%9D%B4%ED%85%9C-%EC%B2%B4%ED%81%AC-%3E-%EC%9E%90%EC%8B%9D-%EC%95%84" inline-copy-host="">- 최상위 부모 아이템 체크 &gt; 자식 아이템 체크 해제 &gt; 부모 아이템, 최상위 부모 아이템 체크 상태 변경(부분체크 상태)

---

</div>### **4.6. 내비게이션 바, 메뉴의 하위 메뉴 표시 동작 개선**

#### 4.6.1. 변경 사항

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

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-%EB%82%B4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98-%EB%B0%94%EC%9D%98-%ED%95%98%EC%9C%84-%EB%A9%94%EB%89%B4%EA%B0%80-%EB%82%B4%EB%B9%84%EA%B2%8C%EC%9D%B4" inline-copy-host="">- 내비게이션 바의 하위 메뉴가 내비게이션 바 영역을 초과하여 표시되지 않도록 개선
- 내비게이션 바의 menuType 속성이 "menu"인 경우와 메뉴 컨트롤의 서브 메뉴 기본 표시동작이 아래와 같이 개선
    
    
    - 각 메뉴 아이템 기준으로 서브 메뉴가 표시됩니다.
    - 메뉴 아이템 기준 아래쪽에 표시됩니다.
    - 서브 메뉴에 스크롤이 생기는 경우 부모 메뉴 기준 위, 아래 영역 중 빈 영역이 넓은 방향으로 표시됩니다.

---

</div>### **4.7. 링크드 콤보 박스, 링크드 리스트 박스의 키보드 조작 개선**

#### 4.7.1. 변경 사항

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

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-%EB%B9%88-%EC%98%81%EC%97%AD-%ED%81%B4%EB%A6%AD-%EC%8B%9C-%EC%B2%AB-%EB%B2%88%EC%A7%B8-%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EB%B0%95" inline-copy-host="">- 빈 영역 클릭 시 첫 번째 리스트 박스에 포커스가 발생되는 동작 수정 -&gt; 빈 영역 클릭 시 포커스가 발생하지 않음
- Tab 키로 다음, 이전 리스트 박스 이동되도록 개선되었습니다.
- 다음 컨트롤에서 Shift+Tab 누르면 링크드 리스트 박스의 마지막 리스트 박스에 초점이 이동되도록 접근성이 개선되었습니다.
- disabled 아이템에 방향키로 이동되지 않도록 개선되었습니다.
- 리스트 박스에 초점이 있을 때 위 방향키 누르면 마지막 아이템부터 시작되도록 개선되었습니다.

---

</div>### **4.8. 리스트 박스의 키보드 조작 개선**

#### 4.8.1. 변경 사항

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

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-disabled-%EC%95%84%EC%9D%B4%ED%85%9C%EC%9D%80-%EA%B1%B4%EB%84%88%EB%9B%B0%EA%B3%A0-%ED%83%90" inline-copy-host="">- disabled 아이템은 건너뛰고 탐색되도록 개선되었습니다.
- hover 상태에서 Spacebar 키로 아이템이 선택되도록 개선되었습니다.
- 아래 방향키 입력 시 처음 아이템에서 시작되도록 개선되었습니다.
- 위 방향키 입력 시 마지막 아이템에서 시작되도록 개선되었습니다.

---

</div>### **4.9. 모달 다이얼로그 이동, 리사이즈 조작 개선**

#### 4.9.1. 변경 사항

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

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

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-%EA%B8%B0%EC%A1%B4%3A-%EB%AA%A8%EB%8B%AC-%EB%8B%A4%EC%9D%B4%EC%96%BC%EB%A1%9C%EA%B7%B8-%EC%9D%B4%EB%8F%99-%EC%8B%9C-%EC%98%81%EC%97%AD" inline-copy-host="">- **기존:** 모달 다이얼로그 이동 시 영역 밖으로도 이동 가능
- **개선:** 모달 다이얼로그 이동 시 영역 내에서만 다이얼로그 이동 가능

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

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk--14" inline-copy-host="">---

</div>### **4.10. 입력 계열 컨트롤의 displayText 속성 deprecated**

#### 4.10.1. 변경 사항

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

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

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

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

<div _ngcontent-ng-c1011350532="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk--15" inline-copy-host=""></div>