TemplateCellRenderer

A renderer that displays templates in HTML format.

Signature:

export interface TemplateCellRenderer extends CellRenderer

Extends: CellRenderer

Remarks

Inherits CellRenderer.

When setting a template, it is interpreted differently depending on the format within the braces.

{value}: data value

{value: fieldName}: Data value corresponding to the field name.

Rest: Variable name to be considered as field name

[Superclass]

CellRenderer

Example

let column.renderer = {
     type:"html",
     template: "<img src='images/realgrid-logo.png' height='20'/><span>${value}-${value:unitprice}-</span><span style='color: red ;font-weight: bold;'>${xxx}</span>",
     valueCallback: function (grid, model, field) {
         if (field == "xxx") {
             return "1234";
         }
     }
}

Events

Properties

Events Desc

callback

Callback to create html to display when rendering

Type - GetTemplateCallback

Remarks:

It is used to create HTML that is displayed when the content to be displayed on the screen changes depending on the value.

Example:

column.renderer = {
    type:"html",
    callback: function (grid, model, width, height) {
        const value = model.value;
        if (value === 'xxx') {
            return "<img src='images/realgrid-logo.png' height='" + height / 2 + "'></img>" + "<div>" + model.value + "</div>";
        } else {
            return "<div>" + model.value + "</div>"
        }
    }
}

valueCallback

Callback to replace the value wrapped in ${xxx} format in the template with the actual value.

Type - RealizeValueCallback

Remarks:

When changing the template according to the value of the cell, if you specify it in the template in the form of ${xxx}, valueCallback is called during rendering and the returned string is ${xxx} replace .

Example:

column.renderer = {
    type:"html",
    template: "<img src='images/realgrid-logo.png' height='20'/><span>${value}-${value:unitprice}-</span><span style='color: red ;font-weight: bold;'>${xxx}</span>",
    valueCallback: function (grid, model, field) {
        if (field == "xxx") {
            return "1234";
        }
    }
}

Properties Desc

inputFocusable

Whether the renderer can have focus when there is an input element

Type - boolean

Remarks:

If specified as true, the input element can have focus. If false, the grid takes focus even if the input element is clicked. If the focus is on the user's input rather than the grid's editor, the user must manage movement/tab/editing using the keyboard.

template

String in html template format to be input

Type - string

Remarks:

Used if callback is not specified.

templateEvents

element의 event를 지정한다.

Type - TemplateEvent | TemplateEvent[]

Remarks:

Example:

const htmlRenderer = {
    type: "html",
    template: `<input type='button' value='click' data-itemindex=\${itemindex}></input>`,
    templateEvents: {
        selector: 'input[type="button"]',
        event: {
            onclick: function(e) {console.log(e)}
        }
    }
}

type

Type: html template

Type - 'html'