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