SMART datagrid v1.4 > Examples

Back  Forward

Button Cell Renderer  Example

버튼 렌더러imageUrl 속성 등에 지정한 이미지들을 이용해서 버튼처럼 동작하는 셀 렌더러이다. 이미지는 imageUrl, activeImageUrlhoveredImageUrl, disabledImageUrldisableHoveredImageUrl 속성들을 이용하여 버튼 상태에 맞게 지정한다. 

버튼은 disabled 상태를 가질 수 있는데, enabledExpression 속성에 버튼 활성화 여부를 리턴하는 수식을 지정할 수 있다. 이 수식이 false를 리턴하면 버튼은 disabled 상태가 되고, disabled 버튼은 마우스 클릭 이벤트를 발생시키지 않는다. 

버튼에 표시되는 텍스트는 기본적으로 컬럼에 연결된 데이터 필드의 값이다. text, hoveredTextdisabledText, disabledHoveredText 속성들에 상태에 맞는 텍스트를 지정할 수 있다. 또, textVisiblefalse로 설정하면 텍스트를 표시하지 않는다. 

Grid - 1
rows

아래 속성들을 변경하여 ImageBtn1 컬럼의 속성을 변경해볼 수 있다. 

Text: Hovered Text: Disabled Text: Disabled Hover Text:
Enabled Expression : value <
Button Text Alignment :

 

textOnImagetrue로 지정하면 버튼을 기준으로 텍스트를 정렬한다. ImageBtn3 컬럼에서 확인한다. 

 

데이터셀의 버튼이 클릭되면 onDataButtonClicked 이벤트가 발생한다. 

Code -1
    grid.onDataButtonClicked = function (grid, index) {
        setTimeout(function () {
            alert(index.rowIndex + " 번째 줄 " + index.column.name() + " 컬럼 버튼 클릭");
        }, 0);
    };

소스보기 JSP 

See Also
ButtonCellRenderer
Examples
Image Cell Renderer
Icon Cell Renderer
Shape Cell Renderer