Provides methods for creating cells with custom content such as Buttons, Hyperlinks, Images, Ratings, and Sparklines.
To use these methods, assign their result to a column's cellTemplate property.
makeButton(options?: IButtonOptions): ICellTemplateFunction
Creates a cell template with a button.
By default, the button displays the cell's bound text in it. If you want to show a fixed string, set the options.text property to the string you want to show.
For example, the code below defines a column with button elements. All buttons show the same text ('Click Me') and show an alert when clicked:
```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'country', header: 'My Buttons', cellTemplate: CellMaker.makeButton({ text: 'Click Me', // override bound text click: (e: MouseEvent, ctx: ICellTemplateContext) => { alert('Clicked Button ** ' + ctx.item.country + ' **') } }) } ] }); ```
To avoid disrupting the regular tab navigation, the button's **tabindex** attribute is set to -1 by default.
If you want to include the buttons in the tab navigation, use the **attributes** option to set their **tabindex** attribute to zero. For example:
```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'country', header: 'My Buttons', cellTemplate: CellMaker.makeButton({ text: 'Click Me', // override bound text click: (e: MouseEvent, ctx: ICellTemplateContext) => { alert('Clicked Button ** ' + ctx.item.country + ' **') }, attributes: { tabindex: 0 // make button a tab stop } }) } ] }); ```
For details on links and button elements, please visit https://css-tricks.com/a-complete-guide-to-links-and-buttons/.
IButtonOptions object containing parameters for the button.
makeImage(options?: ICellMakerOptions): wijmo.grid.ICellTemplateFunction
Creates a cell template with an image.
The cell should be bound to a string containing an image URL.
For example, the code below defines a column with images located at urls specified by the 'img' member of the data items:
```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'img', header: 'Images', cssClass: 'cell-img', cellTemplate: CellMaker.makeImage({ label: 'image for ${item.country}', // accessibility click: (e, ctx) => alert('Clicked image for ' + ctx.item.country) }) } ] }); ```
ICellMakerOptions object containing parameters for the image. It should include the label property for accessibility.
makeLink(options?: ILinkOptions): wijmo.grid.ICellTemplateFunction
Creates a cell template with a hyperlink.
By default, the link displays the cell's bound text in it. If you want to show a fixed string, set the options.text property to the string you want to show.
For example, the code below defines a column with hyperlink elements. The links show some custom text and link to a url from the cell's data item:
```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'country', header: 'My Links', cellTemplate: CellMaker.makeLink({ text: 'Visit ${item.country}', // override bound text href: '${item.url}', // bound link destination attributes: { tabindex: 0 // make hyperlink a tab stop } }) } ] }); ```
To avoid disrupting the regular tab navigation, the hyperlink's **tabindex** attribute is set to -1 by default.
If you want to include the hyperlinks in the tab navigation, use the **attributes** option to set their **tabindex** attribute to zero. For example:
```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'country', header: 'My Links', cellTemplate: CellMaker.makeLink({ text: 'Visit ${item.country}', // override bound text href: '${item.url}', // bound link destination // no need for click handler, the link navigates automatically }) } ] }); ```
For details on links and button elements, please visit https://css-tricks.com/a-complete-guide-to-links-and-buttons/.
ILinkOptions object containing parameters for the hyperlink.
makeRating(options?: IRatingOptions): wijmo.grid.ICellTemplateFunction
Creates a cell template to show and edit a rating value.
The cell should be bound to a string containing a number that represents a rating.
By default, cells show ratings as stars. You may customize the appearance of rating cells using CSS.
For example, the code below defines a column with stars that show the 'rating' member of the data items. Since the column is not read-only, users may edit the ratings using the keyboard or the mouse:
```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'rating', header: 'Rating (editable)', width: 220, align: 'center', cellTemplate: CellMaker.makeRating({ range: [0, 5], // rating values between 0 and 5 label: 'Edit Product Rating' }) } ] }); ```
IRatingOptions object containing parameters for the rating cell.
makeSparkline(options?: ISparkLineOptions): wijmo.grid.ICellTemplateFunction
Creates a cell template with a sparkline.
The cell should be bound to an array of numbers to be shown as a mini line chart.
For example, the code below defines a column with sparklines showing the content of the 'history' array in the cell's data item. You may customize the appearance of the sparklines using CSS:
```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'history', header: 'History Sparklines', width: 175, cellTemplate: CellMaker.makeSparkline({ markers: SparklineMarkers.High | SparklineMarkers.Low, // add markers maxPoints: 25, // limit number of points label: '${item.country} sales history line chart', // accessibility }) } ] }); ```
ISparkLineOptions object containing parameters for the Sparkline. It should include the label property for accessibility.