SMART datagrid v1.4 > Examples

Back  Forward

Row Indicator  Example

그리드 왼쪽에 수직으로 행 번호 등을 표시하는 셀들로 구성된 영역이 RowIndicator이다. 

Grid - 1
rows

RowIndicator 셀들은 기본적으로 번호를 표시한다. 행번호는 데이터행과 그룹 헤더 등을 포함한 그리드에 표시되는 행들의 위치 값이다. RowIndicator.displayValue 속성으로 표시되는 값을 다르게 설정할 수 있다. 

또, 내부적으로 각 인덱스는 0 부터 시작하지만, 표시되는 인덱스의 시작값을 지정할 수 있다. 모두 기본값은 1이다. 

RowIndex Base: DataIndex Base:

 

RowIndicator의 너비는 기본적으로 셀들에 표시될 최대 길이 문자의 너비와 maxWidth, minWidth 값, 그리고 스타일 속성에 따라 자동으로 결정된다. 하지만, 아래 속성들로 표시 너비를 다르게 할 수 있다. width가 0일 때 자동으로 계산된다. maxWidthminWidth는 값이 0이하면 무시된다. 

minWidth: maxWidth: width:

RowIndicator 셀들의 스타일은 styles로 지정한다. 

selectabletrue일 때, RowIndicator 셀들을 마우스로 클릭하면 포커스셀의 위치가 변경되고 클릭한 행이 선택된다. 또, 클릭 후 마우스 드래깅의 여러 행을 선택할 수 있다. GridBase.displayOptionsselectStyle와 상관 없이 항상 행 단위로 선택된다. 

 


Grid - 2
rows

1.4.4 버전부터 RowIndicator 셀의 상태를 등록된 이미지를 통해 표현할수 있다. 

셀의 포커스가 변경됬을때, 데이터를 수정할때, insert키를 이용하여 로우를 추가할때 

변경되는 RowIndicator 셀의 상태를 볼수있다. 

Code -1
    grdMain.registerImageList({
		name: 'indicatorIcons',
		rootUrl: "/repo/grid/resource/images/",
	    items: [
			'rd_inserting.png',
			'rd_editing.png',
			'rd_focused.png'
		]
	}); 
	
	
	grdMain.setOptions({
        rowIndicator: {
			indicatorImageList: 'indicatorIcons',
			insertingIconIndex: '0',  //insert키를 이용하여 행추할때
			updatingIconIndex: '1',  //cell데이터 편집시.
			focusedIconIndex:  '2',  //cell에 포커스가 변경됬을때
		}
    });

소스보기 JSP 

See Also
RowIndicator
RowIndicatorValue
RowIndicator.maxWidth
RowIndicator.minWidth
RowIndicator.width
RowIndicator.selectable
VisualObject.styles
SelectionStyle
GridBase.displayOptions
DisplayOptions.selectStyle
Examples
State Cells