5.20231.904
wijmo.grid.cellmaker Class CellMaker Wijmo API Class

CellMaker Class

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 Column.cellTemplate property.

Heirarchy

  • CellMaker

Methods

Static makeButton

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

    Parameters

    Returns ICellTemplateFunction

    An ICellTemplateFunction to be assigned to a column's Column.cellTemplate property.

Static makeImage

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

    Parameters

    Returns ICellTemplateFunction

    An ICellTemplateFunction to be assigned to a column's Column.cellTemplate property.

Static makeLink

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

    Parameters

    Returns ICellTemplateFunction

    An ICellTemplateFunction to be assigned to a column's Column.cellTemplate property.

Static makeRating

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

    Parameters

    Returns ICellTemplateFunction

    An ICellTemplateFunction to be assigned to a column's Column.cellTemplate property.

Static makeSparkline

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

    Parameters

    Returns ICellTemplateFunction

    An ICellTemplateFunction to be assigned to a column's Column.cellTemplate property.