CellMaker가 포함된 FlexGrid 버튼 열
추천0
페이지 정보
작성자 MESCIUS 작성일 2020-03-31 00:00 조회 3,560회 댓글 0건본문
관련링크
JavaScript 열에 버튼 열을 추가하는 쉬운 방법을 추가했습니다. 마지막 릴리스에서는 cellTemplate 속성을 FlexGrid의 Column 클래스에 추가했습니다. 이 속성을 통해 개발자는 템플릿 리터럴을 사용하여 셀에 대한 사용자 정의 컨텐츠를 정의할 수 있으며, 이는 많은 유연성을 제공합니다.
대부분의 경우 cellTemplate은 formatItem 이벤트보다 간단하고 사용하기 쉽습니다. 그러나 고객들 중 일부는 훨씬 더 관리하기 쉬운 것을 원했습니다.
CellMaker를 사용하여 FlexGrid에 버튼 열을 추가하는 방법을 살펴 보겠습니다. 버튼 열을 만들기 위해 다음과 같이 CellMaker 클래스를 사용합니다.
import { FlexGrid, ICellTemplateContext } from '@grapecity/wijmo.grid';
import { CellMaker } from '@grapecity/wijmo.grid.cellmaker';
let theGrid = new FlexGrid('#theGrid', {
showMarquee: true,
autoGenerateColumns: false,
columns: [
// button with fixed text
{
binding: 'country',
header: 'Custom Button',
width: 150,
cellTemplate: CellMaker.makeButton({
text: '<b>${item.country}</b> Button',
click: (e, ctx) => {
alert('Clicked Button ' + ctx.item.country)
}
})
},
]
});
이 코드는 열의 cellTemplate 속성을 CellMaker의 makeButton 메서드에서 제공하는 ICellTemplateFunction으로 설정합니다.
makeButton 메서드는 버튼의 텍스트를 사용자 정의할 수 있는 options 매개변수를 갖습니다. 또한 click 이벤트에 대한 핸들러를 지정할 수도 있습니다.
결과는 다음과 같습니다.
FlexGrid 버튼 열 데모 :
댓글목록
등록된 댓글이 없습니다.