syidaxgrid
홈 가격 내 정보

GRID FEATURE · PRO

검색 가능한 선택 편집기

후보가 많은 열에서 검색으로 목록을 좁혀 선택하는 Pro 편집기입니다. 기본 Select는 짧은 고정 목록에 적합하고 Rich Select는 많은 후보에서 빠르게 찾을 때 유용합니다.

Markdown 원문 Features

동작 원리와 선택 기준

options의 label은 읽는 이름, value는 실제 저장값입니다. 비활성 후보와 빈 값의 처리도 함께 정하세요.

이 기능을 제품에서 사용하려면 Pro 패키지와 유효한 라이선스가 필요합니다. 설정 이름이 같더라도 Community에서 Pro 기능이 활성화되는 것은 아닙니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

예제 1. 제품 검색형 편집기

코드와 이름이 다른 제품 목록을 제공합니다.

javascript
grid.columnDefs = [{ field: 'product', editable: true, editor: 'autocomplete', options: [
  { value: 'P-001', label: 'Atlas Sensor' },
  { value: 'P-002', label: 'Beacon Lite' },
  { value: 'P-003', label: 'Cipher Pro', disabled: true }
] }];

결과 확인: 이름을 검색해 선택하지만 저장되는 값은 P-001 같은 제품 코드입니다. 데이터와 라벨의 표시 정책을 맞추세요.

예제 2. 선택 취소와 기존 값

편집을 시작한 뒤 다른 후보를 탐색하고 Escape로 취소합니다. 확정되지 않은 후보가 원본 데이터에 남지 않는지 확인합니다.

결과 확인: 사용자가 마지막으로 확정한 값이 유지되어야 합니다. 포커스 이동과 Enter 확정도 함께 확인하세요.

예제 3. 후보 목록 갱신

상품이 품절되어 후보를 비활성화할 때 새 options를 가진 columnDefs를 전달합니다. 기존 주문의 과거 상품 코드를 지울지 표시만 유지할지도 정합니다.

결과 확인: 신규 입력 가능 상태와 과거 데이터 표시를 따로 다룰 수 있습니다. 후보에서 사라진 값의 라벨도 읽을 수 있게 준비합니다.

조합할 때와 문제를 해결할 때

현재 Features의 상태 열은 기본 Select일 수 있습니다. editor: autocomplete 또는 해당 사용자 편집기를 명시해야 검색형 편집기를 사용합니다.

사용자가 후보를 입력할 때마다 서버를 조회한다면 취소·늦은 응답·목록 없음 처리를 앱의 편집기 계약에 맞춰 구현하세요.

함께 읽기