ASP.NET Core MVC Controls | ComponentOne
In This Topic
    CellMaker Class
    In This Topic
    File
    wijmo.grid.cellmaker.js
    Module
    wijmo.grid.cellmaker

    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.

    Methods

    Methods

     

    Static makeButton
    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:

    ```typescript 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:

    ```typescript 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
    Optional

    IButtonOptions object containing parameters for the button.

    Returns
    wijmo.grid.ICellTemplateFunction

     

    Static makeImage
    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:

    ```typescript 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
    wijmo.grid.ICellTemplateFunction

    Static makeRating

    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:

    ```typescript 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
    wijmo.grid.ICellTemplateFunction

    Static makeSparkline

    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:

    ```typescript 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
    wijmo.grid.ICellTemplateFunction