# Cascader

옵션에 명확한 계층 구조가 있는 경우 Cascader를 사용하여 옵션을 보고 선택할 수 있습니다.

### 빌더 화면&#x20;

<figure><img src="https://content.gitbook.com/content/kr3K95OpVnkhRrSKF3Qh/blobs/idsSLDOUeKtyzIzJ7zxh/image.png" alt=""><figcaption></figcaption></figure>

### 실행화면 (런타임)

<figure><img src="https://content.gitbook.com/content/kr3K95OpVnkhRrSKF3Qh/blobs/SJCPxtHbM0IqSmUlNrTB/image.png" alt=""><figcaption></figcaption></figure>

### 셀속성&#x20;

<figure><img src="https://content.gitbook.com/content/kr3K95OpVnkhRrSKF3Qh/blobs/IT43Abj3WQ4GEVivFC9g/image.png" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="263">이름 </th><th>설명 </th></tr></thead><tbody><tr><td>명령 편집</td><td>값이 변경될 때 실행할 명령 구성</td></tr><tr><td>데이터 유효성 검사</td><td>셀의 구성 데이터 유효성 검사, 업데이트 명령 실행 또는 요청 서버 명령 실행 시에만 유효성 검사</td></tr><tr><td>UI 권한</td><td>현재 사용자의 역할에 따라 표시/편집 가능/활성화 권한</td></tr><tr><td>기본값</td><td>기본값</td></tr><tr><td>바인딩 사용</td><td>항목이 데이터베이스에서 바인딩되는지 여부를 나타냅니다. </td></tr><tr><td>항목 구성 </td><td>디자인 타임에 바인딩 해제 항목 구성</td></tr><tr><td>바인딩 항목 구성 </td><td>구성 바인딩 항목. 구성 값/레이블 열, 필터, 정렬, 상단/오프셋 및 캐시 허용</td></tr><tr><td>자리 표시자</td><td>텍스트 상자 자리 표시자</td></tr><tr><td>접두사 아이콘</td><td><img src="https://grapecity.atlassian.net/wiki/download/thumbnails/2931197607/image2022-3-28_13-37-55.png?version=1&#x26;modificationDate=1648447973877&#x26;cacheVersion=1&#x26;api=v2&#x26;width=215&#x26;height=60" alt=""></td></tr><tr><td>접미사 아이콘</td><td><img src="https://grapecity.atlassian.net/wiki/download/thumbnails/2931197607/image2022-3-28_13-38-18.png?version=1&#x26;modificationDate=1648447973970&#x26;cacheVersion=1&#x26;api=v2&#x26;width=189&#x26;height=68" alt=""></td></tr><tr><td>내부 테두리 표시</td><td><img src="https://grapecity.atlassian.net/wiki/download/thumbnails/2931197607/image2022-3-28_13-39-5.png?version=1&#x26;modificationDate=1648447974087&#x26;cacheVersion=1&#x26;api=v2&#x26;width=209&#x26;height=66" alt=""></td></tr><tr><td>지우기 아이콘 활성화</td><td><p>선택한 항목이 비어 있지 않을 때 접미사 지우기 아이콘을 표시할지 여부를 결정합니다.</p><p><img src="https://grapecity.atlassian.net/wiki/download/thumbnails/2931197607/image2022-3-28_14-13-38.png?version=1&#x26;modificationDate=1648448018463&#x26;cacheVersion=1&#x26;api=v2&#x26;width=192&#x26;height=51" alt=""></p></td></tr><tr><td>읽기 전용</td><td><br></td></tr><tr><td>비활성화 </td><td><br></td></tr><tr><td>팝업 설정</td><td><p>도구 모음 표시: 팝업에 상단 표시줄을 표시할지 여부를 결정합니다.</p><p><img src="https://grapecity.atlassian.net/wiki/download/thumbnails/2931197607/image2022-3-28_14-17-31.png?version=1&#x26;modificationDate=1648448251613&#x26;cacheVersion=1&#x26;api=v2&#x26;width=338&#x26;height=229" alt=""></p><p>제목</p><p><img src="https://grapecity.atlassian.net/wiki/download/thumbnails/2931197607/image2022-3-28_14-15-29.png?version=1&#x26;modificationDate=1648448129857&#x26;cacheVersion=1&#x26;api=v2&#x26;width=334&#x26;height=238" alt=""></p><p>닫기가능 : 툴바에 닫기 아이콘 표시 여부</p><p><img src="https://grapecity.atlassian.net/wiki/download/attachments/2931197607/image2022-3-28_14-17-48.png?version=1&#x26;modificationDate=1648448268527&#x26;cacheVersion=1&#x26;api=v2" alt=""></p><p>활성 색 : 선택한 항목의 텍스트 색상</p><p>살짝 밀기 기간 : 제스처를 좌우로 슬라이드할 수 있는지 여부</p></td></tr></tbody></table>

### 관련 명령 빠른 생성&#x20;

<table><thead><tr><th width="287">이름 </th><th>설명 </th></tr></thead><tbody><tr><td>ObjTree로 데이터 소스 설정</td><td>동적 JSON 객체 트리를 셀의 데이터 소스로 사용하는 JSON 형식의 예는 다음과 같습니다.<br>[<br>    {<br>        "value": 1,<br>        "label": "Department1",<br>        "children": [<br>            {<br>                "value": 2,<br>                " label": "Sub-department1"<br>            },<br>            {<br>                "value": 3,<br>                "label": "Sub-department2",<br>                "children": [<br>                    {<br>                       "value": 4,<br>                       "label":"하위 부서2-1"<br>                    }<br>                ]<br>            }<br>        ]<br>    },<br>    {<br>        "value": 5,<br>        "label": "Department2"<br>    },<br>    {<br>        "value": 6,<br>        "label": "Department3"<br>    }<br>]<br>위의 데이터는 'value attribute'가 value, 'label attribute name'이 값이라고 가정합니다. 는 레이블이고 '자식 속성 이름'은 '자식'입니다<br>. 일반적으로 JSON 데이터 소스는 HTTP 요청 명령을 통해 웹 서비스에서 또는 서버측 명령에서 가져올 수 있습니다.</td></tr><tr><td>ID PID 테이블로 데이터 소스 설정</td><td>테이블 JSON 객체 트리를 셀의 데이터 소스로 사용하는 JSON 형식 예는<br>[<br>    {"value": 1, "label": "Department1", "parentValue": null},<br>    {"value": 2, "label": "Department1-1", "parentValue": 1},<br>    {"value": 3, "label": "Department1-2", "parentValue": 1}, {<br>    "value": 4, "label" ": "Department1-2-1", "parentValue": 3},<br>    {"value": 5, "label": "Department2", "parentValue": null},<br>    {"value": 6, "label": "부서3", "부모값":null}<br>]<br>위의 데이터는 'value 속성'을 value, 'label 속성명'을 label, '상위값 속성명'을 'parentValue'로 가정한 것이다<br>. 데이터베이스</td></tr><tr><td>팝업 표시</td><td>캐스케이드 팝업 열기</td></tr></tbody></table>
