Button (col)

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

Button: Clear — 셀 내용 지우기 [그림1]
Button: Check — 체크박스 [그림2]
Button: URL — 사용자 이미지 [그림3]
Button: Defaults — 드롭다운 버튼 [그림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] 참고).

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

열의 Type이 Button인 경우

Value Description
Button 일반적인 버튼 형태로 표시합니다. UseButton 속성에 따라 셀 값이 <u> 태그 또는 <button> 태그로 렌더링됩니다.
Html 셀 값을 HTML 형태로 표시합니다 (예: <div class="button">버튼</div>).

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

Read More

Since

product version desc
core 8.0.0.0 기능 추가