CellMaker Class

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

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

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

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

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