Customcellrenderer

CustomCellRenderer

Objects used when setting up a custom cell renderer

Signature:

export interface CustomCellRenderer

Remarks

It can be used as GridBase.registerCustomRenderer().

Example

gridView.registerCustomRenderer("renderer01", {
     initContent(parent) {
         var span = this._span = document.createElement("span");
         parent.append(span);
     },
     ...
})

Events

Property	Type	Description
canClick	(event: MouseEvent) => boolean	A callback to determine whether to use the grid's click event
canEdit	(event: MouseEvent) => boolean	Whether the renderer is editable
canEditKey	(event: KeyboardEvent) => boolean	A callback to determine which edit shortcut key is assigned
clearContent	(dom: HTMLElement) => void	Callback to be executed when content is initialized
click	(event: MouseEvent) => any	Callback to be executed when clicked
editClick	(index: CellIndex, event: MouseEvent, result: RendererEditResult) => boolean	A callback that determines the edit completion behavior
editKey	(index: CellIndex, event: KeyboardEvent, result: RendererEditResult) => boolean	Callback for editing using the set editing shortcut key
initContent	(dom: HTMLElement) => void	Callback to be executed when initializing content [Parameter list] `dom` - parent element
preventClick	(event: MouseEvent) => void	Callback to stop clicking
preventEditClick	(event: MouseEvent) => void	Callback to stop editing from completion when editing
render	(grid: any, model: GridCell, w: number, h: number, info: any) => void	Callback to be executed when rendering

Properties

Property	Type	Description
index	CellIndex	Cell location information
inputFocusable	boolean	Whether the renderer can have focus when there is an input element
tags	ConfigObject	The user enters the desired random value.

Events Desc

canClick

A callback to determine whether to use the grid's click event.

Type - (event: MouseEvent) => boolean

Remarks:

If you return false, the grid will no longer process the event and the element's default action will be performed.

If the callback is not registered, false is returned.

To use CustomCellRenderer.click, you must set it to a function that returns true.

[Parameter list]

event - mouse click event

Example:

grid.registerCustomRenderer("renderer01", {
    canClick : function() {
        return true;
    }
})

canEdit

Is the renderer editable?

Type - (event: MouseEvent) => boolean

Remarks:

[Parameter list]

event - mouse event

Example:

grid.registerCustomRenderer("renderer01", {
    canEdit: function() {
        return true;
    }
})

canEditKey

A callback to determine which edit shortcut to specify.

Type - (event: KeyboardEvent) => boolean

Remarks:

Returning false does not reflect the editing function when a specific key is pressed.

[Parameter list]

event - Keyboard event

Example:

grid.registerCustomRenderer("renderer01", {
    canEditKey: function(event) {
        return event.ctrlKey && event.keyCode === 65;
    }
})

clearContent

Callback to be executed when content is initialized

Type - (dom: HTMLElement) => void

Remarks:

This method is called when executing grid.destroy.

To prevent memory leaks, all objects created or referenced in initContent must be released.

If there is an event connected with addEventListener or onclick, it must be released.

[Parameter list]

dom - parent element

Example:

grid.registerCustomRenderer("renderer01", {
    clearContent: function(dom) {
        dom.innerHTML = "";
    }
})

click

Callback to be executed when clicked

Type - (event: MouseEvent) => any

Remarks:

It is processed separately from the element's click event.

If event.target is clickable, it should return ClickData.

The returned data is passed to the GridBase.onCellItemClicked event.

When false is returned, stop the event and then call preventClick.

[Parameter list]

event - mouse click event

Example:

grid.registerCustomRenderer("renderer01", {
    click: function(event) {
        let index = this.index.toProxy();
        if ( event.target === this._button1 || event.target === this._button2 || event.target === this._href) {
            return {
                cellType:"data",
                target: event.target,
                index: index,
                value: this._value
            }
        }
    }
})

editClick

A callback that determines the edit completion behavior

Type - (index: CellIndex, event: MouseEvent, result: RendererEditResult) = > boolean

Remarks:

When returning false, call CustomCellRenderer.preventEditClick.

[Parameter list]

index - edit

event - mouse event

result - Result of editing completion

editKey

Callback for editing using the set editing shortcut key

Type - (index: CellIndex, event: KeyboardEvent, result: RendererEditResult) = > boolean

Remarks:

If false is returned, editing is canceled.

[Parameter list]

index - Cell location information

event - mouse event

result - Result of editing completion

Example:

grid.registerCustomRenderer("renderer01", {
    editKey: function(index, event, result) {
        result.commit = false;
        if (event.ctrlKey && event.keyCode === 65) {
            result.commit = true;
            result.value = 'Ganadara';
            return true;
        }
        return false;
    }
})

initContent

Callback to be executed when content is initialized

[Parameter list]

dom - parent element

Type - (dom: HTMLElement) => void

Example:

grid.registerCustomRenderer("renderer01", {
 initContent: function(dom) {
 let span = this._span = document.createElement("span");
 span.className = "custom_render_span"
 dom.appendChild(span);
 
 dom.appendChild(this._button1 = document.createElement("span"));
 dom.appendChild(this._button2 = document.createElement("span"));
 
 let a = this._href = document.createElement("a");
 a.href = "http://realgrid.com";
 a.target = "_blank";
 a.tabIndex = -1;
 a.textContent = "real";
 dom.appendChild(a);
 }
})

preventClick

Callback to stop a click

Type - (event: MouseEvent) => void

Remarks:

It was created to freely call event.preventDefault().

If the callback is not specified, Event.preventDefault (opens in a new tab) is called.

[Parameter list]

event - mouse click event

preventEditClick

When editing, a callback to stop editing from completion.

Type - (event: MouseEvent) => void

Remarks:

It was created to freely call event.preventDefault().

If the callback is not specified, Event.preventDefault (opens in a new tab) is called.

[Parameter list]

event - mouse event

render

Callback to be executed when rendering

Type - (grid: any, model: GridCell, w: number, h: number, info: any) => void

Remarks:

You can apply text or style within the element.

[Parameter list]

grid - GridBase control

model - GridCell object

w - width

h - width

info - additional information

Example:

grid.registerCustomRenderer("renderer01", {
 render: function(grid, model, w, h, info) {
 let span = this._span;
 
 // text settings.
 span.textContent = model.value + "-YYY";
 this._value = model.value;
 
 // Set directly in className or style
 // If you set it directly in style, it may be slower than using className.
 // If possible, use className.
 this._button1.className = "custom_none";
 this._button2.className = "custom_none";
 
 switch(model.value) {
 case "Germany":
 this._button1.className = "custom_search custom-hover";
 this._button2.className = "custom_de custom-hover";
 break;
 case "France":
 this._button1.className = "custom_fr custom-hover";
 break;
 case "Brazil":
 this._button1.className = "custom_br custom-hover";
 break;
 }
 }
})

Properties Desc

index

Cell location information

Type - CellIndex

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.