# Button (col)

> 셀의 우측에 원하는 아이콘 이미지, 체크박스 혹은 버튼을 표시하는 기능입니다.
> 열의 Type이 `Date`거나 `Enum`인 경우에는 설정과 상관없이 달력이나 드롭다운 모양의 버튼이 표시됩니다.
> 셀의 좌측에 버튼을 설정하려면 Icon 속성을 참고하세요.

[그림1]
[그림2]
[그림3]
[그림4]

### Type

`string`

### Options

열의 Type이 Button이 아닌 경우

Value | Description
--- | ---
`Button` | ButtonText 속성으로 설정한 문자를 `<u>` 태그로 표시합니다.
`Clear` | 셀 우측에 셀 내용을 지우기 위한 버튼을 표시합니다 ([그림1] 참고).
`Check` | 셀 우측에 체크박스를 표시합니다 ([그림2] 참고).
`Html` | ButtonText 속성으로 지정한 HTML 태그를 셀 우측에 표시합니다.
`공백` | 기본 버튼 이미지를 감춥니다. 예: `Date` 타입 열의 기본 달력 버튼을 이 속성으로 감출 수 있습니다.
`기타` | 이미지 파일 URL을 지정하면 버튼 셀의 배경 이미지로 표시됩니다 ([그림3] 참고). 지원 포맷: `gif`, `png`, `jpg`. 클릭 시 onButtonClick 이벤트가 호출됩니다.
`Defaults` | 셀 우측에 Defaults 버튼을 표시합니다 ([그림4] 참고).

> 주의: `Button` 속성에는 위 표의 정해진 키워드(`Button` / `Clear` / `Check` / `Html` / `Defaults` / 공백) 또는 이미지 파일 URL만 지정해야 합니다.
> 그 외의 문자열(예: `<u>...</u>` 같은 HTML 마크업)을 지정하면 해당 문자열을 이미지 URL로 간주하여, 그 경로로 불필요한 요청(대개 404)이 렌더마다 발생합니다.
> 조건에 따라 HTML을 표시하려면 마크업을 `Button` 속성이 아니라 ButtonText에 넣으세요.

> `Html`이나 이미지 버튼 사용 시 버튼 너비는 WidthPad 속성으로 설정할 수 있습니다.

열의 Type이 Button인 경우

Value | Description
--- | ---
`Button` | 일반적인 버튼 형태로 표시합니다. UseButton 속성에 따라 ButtonText에 설정한 값이 `<u>` 태그 또는 `<button>` 태그로 렌더링됩니다.
`Html` | ButtonText에 설정한 값을 HTML로 해석해 표시합니다 (예: `<div class="button">버튼</div>`). HTML 콘텐츠는 `ButtonText`에 넣으며, `Button` 속성 자체에는 HTML 마크업을 넣지 마세요.

### Example

    options.Cols = [
        // 1. 셀 우측에 체크박스를 표시
        {Type: "Text", Name: "product_name", Button: "Check", Width: 120},

        // 2. 셀 우측에 사용자 이미지를 버튼으로 표시
        {Type: "Text", Name: "brnSaleAmt", Button: "/pcd/img/popIcon.png", Width: 120},

        // 3. Type:"Button" — 셀 자체가 버튼인 컬럼
        {Type: "Button", Name: "btn_type", Button: "Button", ButtonText: "Btn", Width: 120, WidthPad: 50}
    ];

### Try it

- Demo of Button

### Read More

- WidthPad col
- ButtonText col
- Defaults col
- UseButton cfg
- TreeCheckSync cfg
- Checked cell
- onButtonClick event

### Since

product | version | desc
--- | --- | ---
core | 8.0.0.0 | 기능 추가