SBGRID

전체메뉴보기

SBGrid 가이드

SBGrid 시작하기
- - 라이브러리 페이지 IMPORT
- - 그리드 생성하기
SBGrid 테마
- - 테마 적용하기
SBGrid 전역함수
- - 버전 정보 확인M
- - 그리드 객체 생성M
- - 그리드 객체 제거M
- - 전체 그리드 제거M
- - 그리드 객체 반환M
- - 전체 그리드 ID 반환M
- - 현재 선택한 그리드 ID 반환M
그리드 기능 속성
- - 그리드 기본속성 설정A
- - 조회 데이터 형태 설정A
- - 최상단/최하단으로 이동A
- - 컨텍스트 메뉴 단축키 호출A
- - click 이벤트 범위 설정A
- - click 이벤트 범위 설정A
- - dblclick 이벤트 범위 설정A
- - xml 데이터 레퍼런스 설정A
- - 원본 데이터 저장 설정A
- - xml 노드경로 설정A
- - 말줄임 기능A
- - 드래그 선택 설정A
- - 휠이동 행 개수 설정A
- - 짝수행 배경색 설정A
- - rowheader 배경색 설정A
- - 배경색 주기 설정A
- - empty 문구 설정A
- - empty 문구 스타일 설정A
- - empty 이미지 설정A
- - empty 이미지 스타일 설정A
- - 데이터 공백 제거A
- - 다중 행 선택A
- - 데이터 선택방법 설정A
- - 선택한 셀 표시 여부A
- - enter 이동 방향 설정A
- - enter 행 이동 셀 활성화 여부 설정A
- - textarea에서 스크롤 여부 설정A
- - 그리드에 포커스 여부 설정A
- - 셀 편집방법 설정A
- - oneclickedit시 콤보 활성화 설정A
- - 콤보 값에 따라 버튼 숨기기A
- - 브라우저 스크롤 셀 활성화 여부 A
- - 그리드 활성화/비활성화 설정A
- - 셀의 툴팁 설정A
- - 셀의 툴팁에 표시될 값 설정A
- - 툴팁 출력 지연 설정A
- - 행의 상태 표시A
- - 행의 상태 표시 열 너비 설정A
- - 행의 상태 표시 열 캡션 설정A
- - 행의 상태 표시 클릭 시 콜백함수A
- - 다중 정렬 설정A
- - 정렬 설정 초기화A
- - 셀의 복사A
- - 셀에 붙여넣기A
- - 그리드 전체 복사A
- - 데이터 붙여넣기 시 행 추가 설정A
- - label 값 복사하기 설정A
- - label 값 붙여넣기 설정A
- - 그리드 필터링 설정A
- - 필터링 즉시 반영A
- - 그리드 필터링 타이틀 설정A
- - 필터링 리스트UI 숨김처리 여부A
- - 데이터의 치환A
- - 동적 데이터 치환M
- - 치환된 데이터의 원본 적용 여부A
- - 해당 인덱스 하이라이트 설정A
- - 그리드 데이터 검색 UI 설정A
- - 붙여넣기 사용시 상태정보 설정A
- - hidden 열 포함 여부 설정A
- - 그리드 하단 셀 정보 설정A
- - 그리드 하단 전체 행 표시A
- - 데이터 붙여넣기 형식 설정A
- - 그리드 사용자조작 설정A
- - 그리드 컬럼 설정 UI 표시 여부A
- - 고정 열 정렬 포함 여부A
- - 그리드 실행취소/재실행A
- - 행/열 인덱스 초기화 여부A
- - 그리드 마지막 행 포커싱 여부A
- - 행 상태 아이콘 클릭 초기화A
- - 스크롤 버튼 이동 개수 설정A
- - 스크롤 트랙 이동 지연A
- - 스크롤 트랙 클릭 이동 행 개수A
- - 캡션 클릭시 하이라이트 초기화A
- - 체크박스 이미지 A
- - 라디오 이미지 A
- - 멀티라디오 이미지 A
- - IE에서 스크롤 이벤트 제어 A
- - 그리드 생성시점 함수호출 A
- - 캡션 체크박스 이벤트 여부 A
그리드 크기 속성
- - 그리드 전체 너비 설정A
- - 그리드 전체 높이 설정A
- - 그리드 Resize 대기 시간 설정A
- - 행 높이 설정A
- - 열 너비 조절 설정A
- - 지정한 열 확장 설정A
- - 마지막 열 확장 설정A
- - 컬럼 넓이 픽셀, % 혼용A
그리드 다국어 설정
- - Locale 설정A
- - Locale 변경M
열 속성
- - 열 기본속성 설정C
- - 열 헤더 스타일 지정C
- - 열 최소 너비 설정C
- - 열 데이터 타입 설정C
- - 필터링 설정C
- - 열 포멧C
- - 데이터 소수점 처리C
- - 열 숨기기C
- - 열 병합 설정C
- - 열 건너뛰기C
- - 열 Disable 설정C
- - 열 정렬 가능 여부 설정C
- - 열내 inner HTML 사용C
- - 데이터 유효성 검사C
- - 유효성 유무 확인C
- - 데이터 계산C
- - 사용자 정의 속성 설정C
- - 붙여넣기 제외 설정C
- - 한 열에 다중 캡션 설정C
- - 열 도움말 설정C
열 타입
- - InputC
- - OutputC
- - TextareaC
- - ComboC
- - InputcomboC
- - DatepickerC
- - InputdateC
- - SpinnerC
- - CheckboxC
- - RadioC
- - MultiradioC
- - InputbuttonC
- - OutputbuttonC
- - ImageC
- - ButtonC
스크롤
- - 세로 스크롤 행 위치 표시A
- - 세로 스크롤 유무 확인M
- - 가로 스크롤 유무 확인M
- - 스크롤 상단 행 확인M
- - 스크롤 왼쪽 열 확인M
- - 세로 스크롤 상단 행 위치 지정M
- - 세로 스크롤 하단 행 위치 지정M
- - 가로 스크롤 좌측 열 위치 지정M
- - 가로 스크롤 우측 열 위치 지정M
- - 브라우저 스크롤 동작여부 설정A
- - 스크롤 적용 중 행 연동A
- - 스크롤 적용 중 열 연동A
- - 스크롤 이동 후 그리드 표시A
- - 스크롤 이동중 병합 해제A
- - 스크롤 트랙 이동 후 그리드 표시A
- - 스크롤시 그리드 표시 UI 설정A
헤더
- - 헤더 높이 설정A
- - 헤더의 개수M
- - 정렬 및 열의 이동 설정A
- - 정렬 및 열의 이동 설정M
- - 헤더의 설정된 속성 상태 확인M
- - 전체 체크박스 삽입M
- - 전체 체크박스 체크M
- - 전체 체크박스 체크 여부 확인M
- - 전체 체크박스 체크 해제M
- - 캡션명 설정M
- - 캡션명 확인M
- - 보이는 캡션명만 확인M
- - 그리드 잠김 UI 표시 여부 설정A
- - 행 포커스 캡션영역 포함여부A
틀고정
- - 상단 행 고정A
- - 상단 행 고정M
- - 상단 고정행 개수 반환M
- - 하단 행 고정A
- - 하단 행 고정M
- - 하단 고정행 개수 반환M
- - 좌측 열 고정A
- - 고정 열 틀 색상 설정A
- - 좌측 열 고정 개수 설정M
- - 좌측 고정 열 개수 반환M
병합
- - 헤더의 병합방법 설정A
- - 헤더의 병합방법 설정M
- - 헤더의 병합방법 확인M
- - 셀의 병합방법 설정A
- - 셀의 병합방법 설정M
- - 열 병합 제외 설정A
- - 열의 병합 여부 확인A
- - 공백 셀의 병합처리A
- - 셀 병합시, 위치 설정A
- - 셀 단위 병합처리M
- - 데이터의 병합 방법 확인M
- - 셀의 병합 여부 확인M
- - 그리드 병합 해제M
- - 커스텀 병합 해제M
그리드 초기화
- - 그리드 전체 초기화M
- - 그리드 데이터 초기화M
- - 그리드 사이즈 초기화M
스타일
- - 열 데이터 너비만큼 늘리기A
- - 고정열 너비만큼 늘리기A
- - 열의 너비 설정M
- - 열의 너비 자동맞춤M
- - 열의 너비 확인M
- - 셀의 스타일 설정M
- - 셀의 스타일 확인M
- - 셀의 스타일 제거M
- - 셀의 복수 스타일 설정M
- - 다중 셀의 복수 스타일 설정M
- - 다중 셀의 스타일 제거M
- - 행의 스타일 설정M
- - 행의 스타일 확인M
- - 행의 스타일 제거M
- - 행의 복수 스타일 설정M
- - 행의 전체 스타일 확인M
- - 다중 행의 스타일 설정M
- - 다중 행의 스타일 제거M
- - 열의 스타일 설정M
- - 열의 스타일 확인M
- - 열의 스타일 제거M
- - 열의 복수 스타일 설정M
- - 열의 전체 스타일 확인M
- - 다중 열의 복수 스타일 설정M
- - 다중 열의 스타일 제거M
- - 짝수행 배경색 설정M
- - 짝수행 배경색 확인M
- - 행의 높이 확인M
- - empty 문구 설정M
- - empty 문구 반환M
- - empty 문구 스타일 설정M
- - empty 문구 스타일 확인M
행 데이터
- - 행 인덱스 설정M
- - 행 인덱스 확인M
- - 행 선택M
- - 드래그를 이용한 행 이동A
- - 다중 행 선택M
- - 행 선택 해제M
- - 선택행 인덱스 확인M
- - 그리드 선택 모드 설정M
- - 그리드 선택 모드 확인M
- - 전체 행의 선택 해제M
- - 이전 선택한 셀의 행 인덱스M
- - 전체 행 수M
- - 마지막 선택한 행 인덱스M
- - 선택행의 데이터 입력M
- - 선택행의 데이터 확인M
- - 체크된 행 인덱스M
- - 체크된 행의 데이터M
- - 지정한 행의 이벤트 실행M
- - 행 추가(마지막 행)M
- - 행 추가(선택한 행)M
- - 행 추가(데이터 포함)M
- - 행 삭제(마지막 행)M
- - 행 삭제(선택한 행)M
- - RowHeader 설정 여부M
- - RowHeader 설정 확인M
- - 마우스가 위치한 행 인덱스M
- - 행 데이터 이동M
- - 검색 데이터의 행 인덱스M
- - 그리드 전체 데이터 반환M
- - 화면상 전체 데이터 반환M
- - 합계 열 제외한 전체 데이터 반환M
- - 전체 행 개수 표시 설정M
- - 전체 행 개수 표시 설정 여부M
- - 조건에 해당하는 행 인덱스M
- - undo 정보 초기화M
- - redo 정보 초기화M
- - undo 정보 반환 확인M
- - 붙여넣기 제외 설정M
- - 붙여넣기 제외 설정 확인M
열 데이터
- - 열 인덱스 설정M
- - 열 인덱스 확인M
- - 이전 선택한 셀의 열 인덱스M
- - 전체 열 수M
- - 선택한 열의 RefM
- - 지정한 Ref의 인덱스M
- - 선택한 열의 타입M
- - 마우스가 위치한 열 인덱스M
- - 선택한 열의 ID 확인M
- - 선택한 열ID의 인덱스M
- - 열 데이터 이동M
- - 선택한 열의 포멧 설정 확인M
- - 선택 열 인덱스 확인M
- - 지정한 열의 disabled 설정M
- - 지정한 열의 disabled 확인M
- - Ref/Caption에 의한 열 인덱스M
- - 열 콤보 데이터 설정M
- - 열 콤보 데이터 확인M
- - 지정한 열의 사용자 속성 설정M
- - 지정한 열의 사용자 속성 확인M
- - 열 추가(마지막 열)M
- - 열 추가(선택한 열)M
- - 열 삭제(마지막 열)M
- - 열 삭제(선택한 열)M
- - 지정한 열 확장 설정M
- - 지정한 열 확장 설정값 확인M
- - 지정한 열 확장 속성 제거M
- - 마지막 열 확장 타입 설정M
- - 마지막 열 확장 타입 확인M
- - 붙여넣기 제외 설정M
- - 붙여넣기 제외 설정 확인M
- - 지정한 열의 다중 캡션 설정M
- - 지정한 열의 다중 캡션 설정 확인M
- - 지정한 열의 typeinfo 확인M
- - 지정한 열의 도움말 설정M
- - 지정한 열의 도움말 확인M
- - 지정한 열의 자동완성 데이터 변경M
- - 지정한 열 최소날짜 설정M
- - 지정한 열 최소날짜 반환M
- - 지정한 열 최대날짜 설정M
- - 지정한 열 최대날짜 반환M
- - 현재 시점 기준 컬럼들의 설정 정보 확인M
- - 지정한 열 최대문자수 설정M
- - 지정한 열 최대문자수 반환M
셀 데이터
- - 셀에 데이터 입력M
- - 셀의 데이터 확인M
- - 콤보의 라벨 데이터 확인M
- - 셀의 비활성화 설정M
- - 셀의 비활성화 확인M
- - 셀의 툴팁 설정M
- - 셀의 툴팁 확인M
- - 셀 선택M
- - 셀 선택 해제M
- - 다중 셀의 선택M
- - 다중 셀의 선택 해제M
- - 지정한 셀의 이벤트 실행M
- - 지정한 라디오 버튼 선택M
- - 편집모드 활성화M
- - 편집모드 종료M
- - 편집모드 여부 확인M
- - 데이터 변경 전 셀 데이터 반환M
- - 그리드 하단 셀 정보 설정 M
- - 그리드 하단 셀 정보 반환 M
- - 그리드 하단 셀의 값 반환 M
- - 데이터 붙여넣기 형식 설정M
- - 데이터 붙여넣기 형식 설정 반환M
- - 복사된 데이터 갱신M
- - 갱신된 데이터 반환M
- - 셀 포맷 설정M
- - 셀 포맷 반환M
- - 셀 단위 붙여넣기 제외 설정M
- - 셀 단위 붙여넣기 제외 여부M
파일 다운로드
- - 지정한 형식파일로 다운로드M
파일 업로드
- - 엑셀파일 업로드M
숨기기
- - 셀 숨기기 설정M
- - 열 숨기기 설정M
- - 열 숨기기 설정 확인M
- - 셀 UI 숨기기 설정 확인M
- - 열 UI 숨기기 설정 확인M
- - 개선된 열 UI 숨기기 설정 확인M
상태정보
- - 행의 상태정보 추가M
- - 행의 상태정보 삭제M
- - 행의 상태정보를 설정M
- - 행의 상태정보를 확인M
- - 지정한 상태정보의 데이터M
- - 그리드 전체 행 데이터M
- - 열의 상태값 적용 설정M
- - 열의 상태값 적용 확인M
- - 상태정보가 추가된 행 반환M
- - 행 상태정보 초기화M
- - 그리드 상태정보 초기화M
- - 행 데이터 및 상태값 초기화M
정렬
- - 열 정렬 설정M
- - 열 정렬 초기화M
- - 열 정렬 아이콘 생성M
- - 열 정렬 설정 제거M
- - 열 다중정렬 설정M
- - 열 다중정렬 아이콘 생성M
- - 열 다중정렬 설정 제거M
- - 열 정렬 가능 여부 설정M
- - 열 정렬 가능 여부 확인M
- - 열 정렬 정보 확인M
필터링
- - 필터링 조건 설정M
- - 필터링 여부 설정M
- - 필터링 여부 반환M
- - 필터링 초기화M
- - 필터링 정보 재생성M
- - 열 필터링 설정M
- - 필터링 조건 반환M
- - 특정 열 필터링 반환M
- - 필터링 정보 삭제M
- - 필터링 리스트 닫기M
페이징
- - Front PagingA
- - jQuery Ajax DB 페이징A
- - 페이징 정보 반환M
- - 지정한 페이지로 이동M
- - 페이징 행 개수 설정M
- - 페이징 이동 여부M
소계 및 합계
- - 소계 및 합계 설정A
- - 소계 및 합계 동적으로 적용M
- - 소계 및 합계 영역 여부M
- - 소계 및 합계 전체 행 반환M
- - 소계 및 합계 초기화M
- - 소계 및 합계 적용 여부 확인M
- - 그룹소계 설정A
- - 동적 그룹소계 설정M
- - 그룹소계 초기화M
- - 그룹소계 행 인덱스 반환M
트리
- - 그리드 트리A
- - 전체 노드 인덱스 반환M
- - 지정한 노드 정보 반환M
- - 지정한 노드 펼침 여부 반환M
- - 트리 체크박스 체크여부 반환M
- - 트리 전체 체크 설정M
- - 트리 체크박스 체크여부 설정M
- - 트리 체크박스 비활성화 설정M
- - 트리 체크박스 비활성화 반환M
- - 트리 체크박스 전체 비활성화 설정M
- - 트리 체크박스 전체 비활성화 반환M
- - 지정한 노드 펼치기M
- - 지정한 노드 접기M
- - 노드 레벨 펼치기M
- - 전체 노드 펼치기M
- - 전체 노드 접기M
- - 트리 자식 인덱스 반환M
- - 트리 실제 인덱스 반환M
그룹핑
- - 그리드 그룹핑M
- - 모든 노드 접기/펼치기 설정M
- - 그룹 열의 ID 반환M
- - 펼쳐진 그룹 열의 ID 반환M
- - 입력한 행의 자식 노드 수 반환M
그리드 추가 기능
- - 그리드 jsonref 값 반환M
- - 컨텍스트 메뉴 UI 숨김M
- - 컨텍스트 메뉴 UI 표시M
- - 그리드 parentid 값 반환M
- - 그리드 전체 원본 데이터 반환M
- - 그리드 전체 원본 데이터 변경M
- - 선택된 행을 원본데이터로 변경M
- - 그리드 잠금 설정M
- - 그리드 실행취소M
- - 그리드 실행취소 후 재실행M
- - 그리드 숨김M
- - 그리드 보여주기M
- - 드래그 앤 드롭M
- - 드래그 한 셀 인덱스 반환M
- - hidden 열 포함 여부 설정M
- - hidden 열 포함 여부 확인M
- - 툴팁 지연 속도 설정M
- - 툴팁 지연 속도 반환M
- - 스크롤 트랙 이동 지연 설정M
- - 스크롤 트랙 이동 지연 반환M
- - 스크롤 트랙 클릭 이동 개수 설정M
- - 스크롤 트랙 클릭 이동 개수 반환M
- - 선택한 셀 데이터 복사 M
- - 선택한 셀 데이터 붙여넣기 M
- - 선택한 영역 데이터 붙여넣기 A
- - 전체 영역 스타일/상태 삭제 M
- - 데이터 영역 스타일/상태 삭제 M
개인화 설정
- - 그리드 속성 개인화 설정(속성)
- - 그리드 속성 개인화 설정(메소드)
- - 컨트롤패널 열너비 저장여부
- - 열 이동시, 개인화 데이터 저장
이벤트
- - 이벤트 바인드
- - 이벤트 바인드 해제
- - 바인드된 이벤트 실행
- - 마우스 휠 동작 이벤트
- - 마우스 버튼 Down 이벤트
- - 마우스 버튼 Up 이벤트
- - 마우스 동작 이벤트
- - 마우스 그리드 Enter 이벤트
- - 마우스 그리드 Leave 이벤트
- - 마우스 클릭 이벤트
- - 마우스 더블클릭 이벤트
- - 키보드 키 Down 이벤트
- - 키보드 키 Press 이벤트
- - 키보드 키 Up 이벤트
커스텀 이벤트
- - 복사 이벤트
- - 붙여넣기 이벤트
- - 데이터 변경 이벤트
- - 데이터 입력 이벤트
- - checkbox 이벤트
- - 드래그 시작점 이벤트
- - 드래그 종료점 이벤트
- - 버튼 클릭 이벤트
- - 스크롤 이벤트
- - refresh() 실행 전 이벤트
- - refresh() 실행 후 이벤트
- - rebuild() 실행 후 이벤트
- - rebuild() 실행 전 이벤트
- - resize() 실행 전 이벤트
- - resize() 실행 후 이벤트
- - 행 포커스 이동 시 이벤트
- - 열 포커스 이동 시 이벤트
- - 셀 영역 마우스 포커스 이벤트
- - 정렬 이벤트
- - 필터링 실행 전 이벤트
- - 필터링 실행 후 이벤트
- - 페이징 이벤트
- - Drag&Drop 이벤트
- - 열 너비 조절 후 이벤트
- - 드래그를 통한 행 이동 시 이벤트
- - 드래그를 통한 열 이동 시 이벤트
- - 트리 이벤트
- - 트리 선택 이벤트

Drag&Drop 이벤트
(startdnd & beforednd & afterdnd)

그리드 간 drag & drop 중 drag가 일어날 때, drop 이전, drop 이후 이벤트가 발생합니다.

setDnD

상세설명

datatype

drag가 일어날 때 이벤트 : datagrid.bind('startdnd', 'drag 일어날 때 사용자 정의 함수');
drop 이전 이벤트 : datagrid.bind('beforednd', 'drop 이전 사용자 정의 함수');
drop 이후 이벤트 : datagrid.bind('afterdnd', 'drop 이후 사용자 정의 함수');

예시

왼쪽 그리드에 있는 데이터를 오른쪽 그리드로 Drag&Drop 하여 이벤트를 확인해보세요.

			var datagrid;	
			var SBGridProperties = {};
			var SBGridProperties2 = {};
			var temp_data =[];

			function createGrid(){
				var SBGridProperties = {};			
				SBGridProperties.parentid = 'SBGridArea';
				SBGridProperties.id = 'datagrid';
				SBGridProperties.backcoloralternate = '#f4f4f4';
				SBGridProperties.jsonref = 'groupData';
				SBGridProperties.rowheight = 25;
				SBGridProperties.emptyrecords = '조회된 자료가 존재하지 않습니다.';//레코드가 없을경우 출력되는 메시지
				SBGridProperties.explorerbar = 'move';
				SBGridProperties.waitingui = true;
				SBGridProperties.extendlastcol = 'scroll';
				
				SBGridProperties.columns = [
					{caption : ['수입/지출구분'],		ref : 'impExpSeNm',		width : 120,	type : 'output',	style : 'text-align:center'},
					{caption : ['표준/연구회구분'],   ref : 'insnSeNm',	   width : 120,	   type : 'output',	   style : 'text-align:center'},
					{caption : ['관항목세목구분'],	   ref : 'lowcdnm',		   width : 120,    type : 'output',    style : 'text-align:center'},
					{caption : ['코드'],			   ref : 'code',		   width : 100,    type : 'output',    hidden:true},
					{caption : ['코드명'],			  ref : 'codeName',		  width : 500,    type : 'output'},
					{caption : ['lowcd'],			ref : 'lowcd',			width : 100,	type : 'output',	hidden:true},
					{caption : ['topcd'],			ref : 'topcd',			width : 100,	type : 'output',	hidden:true},
					{caption : ['lowgb'],			ref : 'lowgb',			width : 100,	type : 'output',	hidden:true},
					{caption : ['insnSe'],			ref : 'insnSe',			width : 100,	type : 'output',	hidden:true},
					{caption : ['impExpSe'],		ref : 'impExpSe',		width : 100,	type : 'output',	hidden:true},
					{caption : ['lv'],				ref : 'lv',				width : 100,	type : 'output',	hidden:true},
					{caption : ['lvCodeName'],		ref : 'lvCodeName',		width : 100,	type : 'output',	hidden:true},
					{caption : ['codepathgb'],		ref : 'codepathgb',		width : 100,	type : 'output',	hidden:true},
					{caption : ['codepathgbnm'],	ref : 'codepathgbnm',	width : 100,	type : 'output',	hidden:true},
					{caption : ['cdName'],			ref : 'cdName',			width : 100,	type : 'output',	hidden:true}
				];
				
				datagrid = _SBGrid.create(SBGridProperties);


				SBGridProperties2.parentid = 'SBGridArea2';
				SBGridProperties2.id = 'datagrid2';
				SBGridProperties2.backcoloralternate = '#f4f4f4';
				SBGridProperties2.jsonref = 'temp_data';
				SBGridProperties2.rowheight = 25;
				SBGridProperties2.emptyrecords = '조회된 자료가 존재하지 않습니다.';//레코드가 없을경우 출력되는 메시지
				SBGridProperties2.explorerbar = 'move';
				SBGridProperties2.waitingui = true;
				SBGridProperties2.extendlastcol = 'scroll';
				
				SBGridProperties2.columns = [
					{caption : ['수입/지출구분'],		ref : 'impExpSeNm',		width : 120,	type : 'output',	style : 'text-align:center'},
					{caption : ['표준/연구회구분'],   ref : 'insnSeNm',	   width : 120,	   type : 'output',	   style : 'text-align:center'},
					{caption : ['관항목세목구분'],	   ref : 'lowcdnm',		   width : 120,    type : 'output',    style : 'text-align:center'},
					{caption : ['코드'],			   ref : 'code',		   width : 100,    type : 'output',    hidden:true},
					{caption : ['코드명'],			  ref : 'codeName',		  width : 500,    type : 'output'},
					{caption : ['lowcd'],			ref : 'lowcd',			width : 100,	type : 'output',	hidden:true},
					{caption : ['topcd'],			ref : 'topcd',			width : 100,	type : 'output',	hidden:true},
					{caption : ['lowgb'],			ref : 'lowgb',			width : 100,	type : 'output',	hidden:true},
					{caption : ['insnSe'],			ref : 'insnSe',			width : 100,	type : 'output',	hidden:true},
					{caption : ['impExpSe'],		ref : 'impExpSe',		width : 100,	type : 'output',	hidden:true},
					{caption : ['lv'],				ref : 'lv',				width : 100,	type : 'output',	hidden:true},
					{caption : ['lvCodeName'],		ref : 'lvCodeName',		width : 100,	type : 'output',	hidden:true},
					{caption : ['codepathgb'],		ref : 'codepathgb',		width : 100,	type : 'output',	hidden:true},
					{caption : ['codepathgbnm'],	ref : 'codepathgbnm',	width : 100,	type : 'output',	hidden:true},
					{caption : ['cdName'],			ref : 'cdName',			width : 100,	type : 'output',	hidden:true}
				];
				
				datagrid2 = _SBGrid.create(SBGridProperties2);

				datagrid.setDnD({target : 'datagrid2', type : 'move', position : 'insert', stylesync : false});
				datagrid2.setDnD({target : 'datagrid', type : 'move', position : 'insert', stylesync : false});

				datagrid.bind('startdnd','gridStartDnd'); 
				datagrid2.bind('startdnd','gridStartDnd'); 
				datagrid.bind('beforednd','gridBeforeDnd'); 
				datagrid2.bind('beforednd','gridBeforeDnd'); 
				datagrid.bind('afterdnd','gridAfterDnd'); 
				datagrid2.bind('afterdnd','gridAfterDnd'); 
			};
			
			function gridStartDnd(){
				$('#tValue').text("drag 일어날 때 이벤트 발생");
			}

			function gridBeforeDnd(){
				alert("drop 이전 이벤트 발생");
			}

			function gridAfterDnd(){
				alert("drop 이후 이벤트 발생");
				$('#tValue').text('');
			}

SBGrid 가이드

Drag&Drop 이벤트(startdnd & beforednd & afterdnd)

상세설명

datatype

예시

Drag&Drop 이벤트
(startdnd & beforednd & afterdnd)