# Icon (col)

> 셀의 좌측에 원하는 아이콘 이미지, 체크박스 혹은 버튼을 표시하는 기능입니다.
> 셀의 우측에 버튼을 표시하는 Button 속성과 유사한 기능입니다.
> 열의 타입이 `Button`인 경우에는 사용하실 수 없습니다.

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

### Type

`string`

### Options

Value | Description
--- | ---
`Clear` | 셀 내용을 지우기 위한 버튼을 표시합니다.
`Date` | 달력 아이콘을 표시합니다. 열의 타입이 `Date`인 경우 클릭 시 달력이 표시됩니다 ([그림1] 참고).
`Check` | 체크박스를 표시합니다.
`공백` | 원래 표시되어야 할 `Icon` 이미지를 감춥니다.
`기타` | 이미지 파일 URL을 지정하면 아이콘 배경 이미지로 표시됩니다 ([그림2] 참고). 지원 포맷: `gif`, `png`, `jpg`.
`Defaults` | Defaults 버튼을 표시합니다 ([그림3] 참고).

> 아이콘 영역의 너비는 IconWidth 속성으로 설정합니다.
> 아이콘 클릭 시 onIconClick 이벤트가 호출됩니다.
> 단, `Clear`나 `Check`로 설정하면 OnClickSide 이벤트만 호출됩니다.

### Example

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

        // 2. 셀 좌측에 사용자 이미지를 아이콘으로 표시
        {Type: "Text", Name: "brnSaleAmt", Icon: "/pcd/img/popIcon.png", IconWidth: 15, Width: 120}
    ];

    // 3. Icon:"Check" 사용 시 조회 데이터에서 체크 상태 지정 (열이름: product_name)
    {
        "data": [
            { ..., "product_nameChecked": 1, ... }
        ]
    }

### Try it

- Demo of Icon

### Read More

- IconWidth col
- Button col
- Defaults col
- Checked cell
- Icon cell
- IconWidth cell
- setIconCheck method
- onIconClick event
- TreeCheckSync cfg

### Since

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