Master-Details 표현

• 쇼케이스
  • 1. 산업 장비 자원 운영표
  • 2. 자율주행 로봇 BOM 원가
  • 3. 재생에너지 월별 리포트
  • 4. 실시간 서비스 모니터링
  • 5. AI 모델 벤치마크 비교
  • 6. 설계 변경 전후 대조표
  • 7. 구매 요청 및 결재 현황
  • 8. 일별 목표치 달성률 그리드
  • 9. 반응형 밴드형 워크스페이스
  • 10. 자재 발주 및 입고 검수
• 1. 그리드 기본
  • JSON 그리드 기본 출력
  • XML 그리드 기본 출력
  • CSV 그리드 기본 출력
  • JS Array 그리드 기본 출력
  • 셀 세로 병합(row merge)
  • 참조 후 셀 세로 병합(row merge)
  • 셀 가로 병합(column merge)
  • 고정 칼럼(FixedColumns)
  • 고정 행(FixedRows)
  • 고정 칼럼, 행 같이 적용
  • 셀, 행 선택 모드
  • 셀, 행 마우스 오버 모드
  • 워드랩(wordWrap) - 자동 행 높이
  • 워드랩(wordWrap) - 고정 행 높이
  • 칼럼 보이기/숨김 설정
  • 칼럼 사이즈 고정(px), 비율(%) 설정
  • 칼럼 사이즈 변경
  • 그리드 사이즈 변경
  • 가로 스크롤 없는 그리드
  • 세로 스크롤 없는 그리드
  • 그리드 정렬(Sorting)
  • 그리드 행, 열 스타일링(Styling)
  • Master-Details 표현
  • 그리드-Form 에 확장 정보 표현
  • 의존적 칼럼 관계(칼럼 합계 및 연산)
  • 스크롤 최하단에서 데이터 요청(lazyLoading)
  • 그리드 상태 저장/유지
  • 셀 선택 블럭 합계, 개수 등 표시

• 2. 헤더(Header) 및 칼럼(Column)
  • 일반 그리드 헤더
  • 칼럼 설명 툴팁 표시
  • 그룹형 그리드 헤더
  • 헤더 개별 높이
  • 헤더 가로 병합(merge)
  • 헤더 표시 안함
  • 헤더 스타일 적용
  • 헤더 텍스트 개행(2줄) 표시
  • 헤더 텍스트 등의 속성 변경
  • 헤더렌더러(headerRenderer)
    • 헤더 체크박스
    • 헤더 버튼
    • 헤더 드롭다운리스트
    • 이미지 및 그 외 헤더에 출력하기
    • 그룹형 헤더에 렌더러 출력하기

• 3. 그리드 푸터(Footer)
  • 일반 그리드 푸터
  • 푸터에 텍스트 지정
  • 푸터 사용자 수식으로 적용
  • 푸터 스타일 적용
  • 푸터 동적 스타일 적용
  • 푸터를 상단 위치에 출력하기(Header Summary)
  • 푸터 셀 가로 병합(merge)
  • 다수의 푸터 행(rows) 출력
  • 푸터 셀 세로 및 블럭 병합(merge)

• 4. 그리드 툴팁(Tooltip)
  • 기본 그리드 툴팁
  • 툴팁 내용 사용자 정의
  • 툴팁 고정 위치에 출력
  • HTML 내장 툴팁 사용

• 5. 계층형 데이터 구조(TreeGrid)
  • 계층 트리 데이터 기본
  • 일반 데이터를 트리로 표현하기
  • 계층 트리 데이터 모두 열기
  • 계층형 데이터(+그룹 헤더)
  • 초기 화면 특정 행 열기
  • 트리 그리드 워드랩 - 자동 행 높이
  • 트리 하위 데이터 요청(lazyLoading)
  • 트리 아이콘 스타일 재정의
  • 트리 아이콘 동적 지정
  • 정렬 시 최하단 Depth만 적용하기
  • 계층 트리 데이터 칼럼 셀 병합
  • 트리 행의 부모, 자손들 얻기

• 6. 그룹핑 소계(합계, 평균, 개수 등)
  • 소계 - 셀병합 기본형 (Type 1)
  • 소계 - 소계행도 병합형 (Type 2)
  • 소계 - 소계행 열 일치형 (Type 3)
  • 소계 - 트리 기본형
  • 소계 - 트리 기본형 단일 브랜치
  • 소계 - 트리 통합형
  • 소계 - 트리 통합형 단일 브랜치
  • 밴드형 바디 레이아웃 그룹핑 소계
  • 소계행 상단에 출력하기
  • 다수의 소계행 (평균, 개수 등) 출력
  • 선택적 소계 구성하기
  • 1건인 경우 소계 제외 시키기
  • 조건에 맞는 값만 소계 구성하기
  • 조건식을 지정하여 소계 구성하기
  • 사용자 정의 소계 계산 적용 시키기
  • 소계행에 임의의 텍스트 넣기
  • 그룹핑 시 기존 순서 유지키시기
  • 기본형(Type 1) 소계행 가로 병합하기
  • 사용자 정의 그룹핑 하기 - API
  • 정렬 유지한 채 그룹핑 실시

• 7. 필터(Filter)
  • 기본 그리드 필터
  • 트리 그리드 필터
  • 그룹핑 필터
  • 그리드 확장 필터 (AND, OR 필터)
  • 컨텍스트 메뉴로 필터 구성
  • 사용자 정의 필터
  • 사용자 정의 필터2
  • 포맷팅된 값으로 필터 메뉴 구성하기
  • 날짜 필터 (연도, 월, 일)
  • 인라인 필터 행 표시하기
  • 인라인 필터 확장 (AND, OR 필터)
  • 인라인 필터 값 상태 저장/유지
  • 외부에서 필터 메뉴 열기/닫기

• 8. 검색(Search)
  • 기본 그리드 검색
  • 블럭(block) 선택 된 상태에서 검색
  • 포맷팅된 값으로 그리드 검색
  • 트리 그리드 검색
  • 그리드 검색 Ctrl+F UI

• 9. 페이징(Paging)
  • 기본 그리드 페이징
  • 페이징 설정 화면
  • 심플 모드 페이징
  • 심플 버튼 모드 페이징
  • 워드랩(wordWrap)-자동 행 높이
  • 페이징 셀 세로 병합(row merge)
  • 세로 스크롤 없는 페이징
  • 페이지 행 개수 변경
  • 트리 그리드 페이징
  • 푸터와 스타일링 된 페이징
  • 페이징에서 검색, 필터 적용
  • 사용자 정의(Custom) 페이징

• 10. 컨텍스트 메뉴
  • 기본 컨텍스트 메뉴
  • 컨텍스트 메뉴 사용자 정의
  • 컨텍스트 메뉴 동적 사용자 정의
  • 컨텍스트 헤더 메뉴 사용자 정의
  • 컨텍스트 헤더 메뉴 동적 사용자 정의

• 11. 칼럼 렌더러(renderer)
  • 텍스트 렌더러(기본)
  • 이미지 렌더러
  • 아이콘 렌더러
  • 체크박스 렌더러
  • 체크박스 렌더러 - 전체 체크
  • 스위치 렌더러
  • 버튼 렌더러
  • 넘버 스텝 렌더러
  • 드롭다운리스트 렌더러
  • 바 게이지 렌더러
  • 백분율 렌더러
  • 렌더러 높이와 자동 줄바꿈
  • 링크(Link) 렌더러
  • HTML 템플릿 렌더러
  • HTML 템플릿 렌더러 - Input 작성
  • HTML 템플릿 렌더러 - 편집 적용

• 12. 칼럼 에디트렌더러(editRenderer)
  • 인풋 렌더러(기본)
  • 백분율 편집 렌더러
  • 인풋 렌더러 - 패스워드 모드
  • 마스크 편집 렌더러
  • 달력 렌더러
  • 달력-시간 렌더러
  • 달력 렌더러 - 큰 달력 출력
  • 달력 렌더러 - jQuery UI 달력
  • 달력 렌더러 - 부트스트랩 달력
  • 넘버 스텝 편집 렌더러
  • 드롭다운리스트 편집 렌더러
  • 드롭다운리스트 다중선택
  • 콤보박스 렌더러
  • 콤보박스 자동완성
  • 콤보박스 히스토리 모드
  • 원격(remote) 리스트 렌더러
  • 원격 리스트로 다른 필드 채우기
  • 조건부 에디트 렌더러 동적 출력

• 13. 스파크 차트 렌더러
  • 스파크 라인(Line) 렌더러
  • 스파크 칼럼(Column) 렌더러
  • 스파크 승패(WinLoss) 렌더러

• 14. 엑스트라 렌더러
  • 엑스트라 렌더러의 종류와 순서
  • 행 번호(RowNum) 칼럼
  • 행 상태 칼럼
  • 엑스트라 체크박스
  • 엑스트라 체크박스 - 키보드 포커싱
  • 엑스트라 전체 체크 - 필터, 페이징
  • 행 클릭으로 체크박스 체크/해제
  • 엑스트라 체크박스 - 트리 그리드
  • 엑스트라 체크박스 - 전체 체크 제어
  • 엑스트라 체크박스 - 병합
  • 엑스트라 라디오버튼
  • 엑스트라 행 드래그&드랍

• 15. 사용자 정의(Custom) 렌더러
  • 사용자 정의 렌더러란?(개념 설명)
  • 사용자 정의 렌더러 샘플 1
  • 사용자 정의 렌더러 샘플 2
  • 사용자 정의 렌더러 샘플 3
  • 사용자 정의 렌더러 - Input 작성
  • 사용자 정의 렌더러 - 상,하에 값 표현
  • 사용자 정의 렌더러 - 구글 Charts
  • 사용자 정의 렌더러 - 아파치 ECharts

• 16. 사용자 정의(Custom) 에디트렌더러
  • 사용자 정의 에디트렌더러란?(개념 설명)
  • 사용자 정의 에디트렌더러 - textarea
  • 사용자 정의 에디트렌더러 - 컬러픽커
  • 사용자 정의 에디트렌더러 - 슬라이더
  • Vue.js 에서 사용자 정의 에디트렌더러
  • React.js 에서 사용자 정의 에디트렌더러

• 17. 포맷팅(Formatting)
  • 숫자 포맷팅
  • 숫자 포맷팅 - 해외 천단위 변경
  • 날짜 포맷팅
  • 사용자 정의(Custom) 포맷팅

• 18. 그리드 편집(Editing)
  • 기본 그리드 편집
  • 기본 그리드 편집2
  • 동적으로 편집 가능 여부 결정
  • 셀 Copy, Paste(Ctrl+C, Ctrl+V)
  • 셀 Copy, Paste 제어하기
  • 빈 그리드에 Paste (Ctrl + V)
  • 그룹핑 상태에서 편집
  • 트리 그리드(계층형) 편집
  • 트리 그리드 Depth 편집
  • 일반 그리드<->트리로 만들기
  • 유효성 검사(Validating)
  • 유형별 칼럼 편집 렌더러
  • 칼럼 편집 불가(readonly) 설정 하기
  • 읽기전용 동적 셀 및 행 설정하기
  • 읽기전용 칼럼 키 이동 건너 뛰기
  • 셀, 행 값 변경하기
  • 고정 칼럼, 행 편집 가능 여부
  • 행(rows) 추가, 삽입, 삭제
  • 행 추가 후 정렬과 필터 유지
  • 행(rows) 삭제, 삭제 취소
  • 추가, 삽입, 삭제된 행 얻기
  • 열(columns) 추가, 삽입, 삭제
  • 열(columns)-그룹형 삽입, 삭제
  • 저장 전 필수 필드 빈값이 있는지 체크하기
  • DB 트랜잭션 응답 처리
  • 소프트제거모드 새 행(newRow) 정책
  • 터치 모바일 기기 최적화 편집
  • 터치 모바일 기기 가상 키보드 적용

• 19. 수정 취소 및 복구(Ctrl+Z, Y)
  • 수정 행 복구하기(수정 취소)
  • 엑스트라 행 상태 칼럼에서 복구하기
  • 행 상태(state)만 초기화 하기
  • 실행 취소(Undo), 다시 실행(Redo)
  • 실행 취소(Undo), 다시 실행(Redo) - 소프트 제거 모드
  • 트리 그리드 Undo, Redo
  • 트리 그리드 Undo, Redo - 소프트 제거 모드

• 20. 행, 열, 셀 이동 및 드래그&드랍
  • 행, API - 단일 그리드 내 위, 아래로 행 이동
  • 행, API - 2개의 그리드 간 행 이동
  • 행, 드래그&드랍 - 단일 그리드 내 행 이동
  • 행, 드래그&드랍 - 드래깅 텍스트 사용자 정의
  • 행, 드래그&드랍 - 2개의 그리드 간 행 이동
  • 행, 드래그&드랍 - 다수의 그리드 간 행 이동
  • 행, 드래그&드랍 - 다수의 그리드 간 행 복사
  • 셀, 드래그&드랍 - 셀 범위 이동과 복사
  • 트리그리드 - 단일 그리드 내 행 이동
  • 트리그리드 - 2개의 그리드 간 행 이동
  • 트리그리드 - 2개의 그리드 간 행 복사
  • 열, API - 열 위치 바꾸기
  • 열, 드래그&드랍 - 열 위치 바꾸기

• 21. 엑셀, PDF 등 내보내기(Export)
  • Export 가능한 형식(엑셀, PDF 등)
  • 트리그리드 Export (엑셀, PDF)
  • 동적 스타일 Export (엑셀, PDF)
  • 히든 칼럼 내보내기 방식(엑셀)
  • 제목 등의 정보 Export(엑셀, PDF)
  • 텍스트 상자 삽입 Export(엑셀)
  • 결재란 함께 Export(엑셀)
  • PDF 사용 가능한 폰트
  • 대용량 내보내기(엑셀, CSV)
  • 진행바(progressBar) 표시(엑셀, CSV)
  • 다수의 그리드 1개의 엑셀로 내보내기
  • 엑셀에서 숫자 원래의 값으로 내보내기
  • 엑셀에서 날짜 형식으로 내보내기
  • 엑셀에서 칼럼 너비 변경시켜 내보내기
  • 엑셀, CSV 서식 Blob 데이터 얻어오기
  • 엑셀, PDF 원하는 바디 레이아웃 내보내기
  • 화면과 내보내기 스타일 분리

• 22. 밴드형 바디 레이아웃
  • 밴드형 바디 레이아웃 기본
  • 셀 높이와 레이아웃 구성
  • 셀 선택과 범위 선택
  • 셀 편집과 데이터 변경
  • 그룹핑 및 소계 연동
  • 고정 칼럼, 숨김, 페이징
  • 정렬, 필터, 툴팁과 컨텍스트 메뉴 구성
  • 가로/세로 스크롤 없는 그리드
  • 행 드래그&드랍 및 엑스트라 렌더러
  • Excel, PDF, CSV 내보내기

• 23. 이벤트 및 기타
  • 완료(ready) 이벤트
  • 셀 선택 변경 이벤트
  • 셀 선택 제한(통제) 이벤트
  • 셀 클릭 이벤트
  • 셀 더블 클릭 이벤트
  • 키보드 이벤트(단축키 재정의)
  • 헤더 클릭 이벤트
  • 푸터 클릭 이벤트
  • 그리드 동적 제거 및 생성
  • 칼럼 레이아웃 동적 변경
  • 대용량 출력 예
  • 다수의 칼럼 출력 예
  • 셀 전체 선택(Ctrl + A)
  • 두 그리드의 스크롤 동기화 시키기
  • 스크롤 위치 및 사이즈 지정
  • 라이브 스크롤(liveScrolling) 해제
  • Cell-셀렉션 스타일 변경
  • CSV 파일로 그리드 데이터 삽입
  • 엑셀 임포팅으로 그리드 출력
  • 다국어(리소스번들) 설정하기
  • 그리드에서 파일 선택 및 업로드 하기
  • 그리드에 프리로더, 메시지 등 출력 API

• 24. 연동 및 통합(Integration)
  • Vue.js 데모 보기
  • Vue + Typescript 데모 보기
  • React.js 데모 보기
  • React + Typescript 데모 보기
  • jQueryUI Accordion 에서 작성하기
  • jQueryUI Tab 에서 동적 작성하기
  • jQueryUI Dialog 에서 작성하기
  • Bootstrap Modal 에서 작성하기
  • HTMLDialogElement 에서 작성하기