헤더에 드랍다운리스트 렌더러를 설정한 모습입니다.

기본적으로 드랍다운리스트 렌더러는 독립적인 역할을 합니다. 즉, 리스트 항목 선택 시 이벤트만 발생합니다.

이 이벤트를 바인딩하여 클릭 시 원하는 메소드를 실행하십시오.

■ Name : 헤당 칼럼의 데이터 중복 제거한(Distinct) 값들로 동적 구성한 리스트 출력. 예로 데이터 값이 변경되면 변경된 데이터로 갱신하여 드랍다운 리스트 구성됨.

■ Country : 좌측 엑스트라 체크박스 체크하고 드랍다운리스트에서 선택하면 그 행들 수정 적용 시킴. 값을 선택해도 헤더 텍스트를 변경 시키지 않음(applyHeaderText = false 설정)

■ Product : key-value 모드의 리스트. applyHeaderText = false 설정. 헤더 클릭해서 정렬 할 수 있도록 오른쪽에 여백 10 적용 시킴. (offsetRight = 10 설정)

■ Color : key-value 모드의 리스트. offsetRight = 10 설정. 드랍다운리스트를 사용자 정의(listTemplateFunction 설정)하여 추가 정보와 같이 출력 시킴.

dataField: "name",
headerText: "Name",
sortable: false,
width: 140,
headerRenderer: { // 헤더 렌더러
	type: "DropDownHeaderRenderer",
	listFunction: function (columnIndex, dataField, cItem) {
		return AUIGrid.getColumnDistinctValues(myGridID, dataField, false);
	},
	onClick: function (event) {
		alert(event.value);
	}
}