FlexGrid Hyperink Columns with CellMaker DELETE ME

FlexGrid Hyperink Columns with CellMaker

To create hyperlink columns, use the CellMaker class as follows:

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  
             })  
         }  
     ]  
 });

The code sets the column's cellTemplate property to an ICellTemplateFunction provided by the CellMaker's makeLink method.

The makeLink method takes an options parameter that allows you to provide custom text for the link, an href that specifies the link target, and attributes for the link. Alternatively, you could also specify a handler for the click event.

The result looks like this:

FlexGrid Hyperlink Column JavaScript Demo

FlexGrid Hyperlink Column Angular Demo

FlexGrid Hyperlink Column React Demo

FlexGrid Hyperlink Column Vue Demo

Read the Full Wijmo 2020 v1 Release.

If you have something interesting that you want to bring to our attention, we would love to hear it!