# Wijmo_Grid_Cellmaker.Cellmaker ## Content

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

Methods

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.