JavaScript DataGrid에 하이퍼링크 열을 쉽게 추가 할 수 있는 방법을 추가했습니다. 마지막 릴리스에서는 cellTemplate 속성을 FlexGrid의 Column 클래스에 추가했습니다. 이 속성을 통해 개발자는 템플릿 리터럴을 사용하여 셀에 대한 사용자정의 컨텐츠를 정의할 수 있으며, 이는 많은 유연성을 제공합니다.

대부분의 경우 cellTemplate은 formatItem 이벤트보다 간단하고 사용하기 쉽습니다. 그러나 고객들 중 일부는 훨씬 더 관리하기 쉬운 것을 원했습니다. 

그래서 GrapeCity 개발팀은 CellMaker라고 불리는 새로운 모듈을 구축하기 위해 cellTemplate 속성을 활용하기로 결정하였습니다. CellMaker의 모듈은 하이퍼링크를 포함해 간단하고 유용한 여러가지 셀을 작성하는 방법을 제공합니다.

이제 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: [  

         // link with custom text and bound href  
         {  
             header: 'Real Link',  
             binding: 'country',  
             cellTemplate: CellMaker.makeLink({  
                 text: 'Visit <b>${item.country}</b>',  
                 href: '${item.url}',  
                 attributes: {  
                     target: '_blank',  
                     rel: 'noopener noreferrer',  
                     tabIndex: -1  
                 }  
                 // no need for click handler, the link navigates automatically  
             })  
         }  
     ]  
 });

이 코드는 열의 cellTemplate 속성을 CellMaker의 makeLink 메서드가 제공하는 ICellTemplateFunction으로 설정합니다.

makeLink 메서드는 링크에 대한 사용자 정의 텍스트, 대상 링크를 지정하는 href 및 링크의 속성을 제공하는 options 매개변수를 갖습니다. 또는 click 이벤트에 대한 핸들러를 지정할 수도 있습니다.

결과는 다음과 같습니다.