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:
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:
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:
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:
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:
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:
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:
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.