TreeTemplateOptions
Setting information for displaying html in the data area of the first column of treeView
Signature:
export interface TreeTemplateOptions
Remarks
HTMLElements that have user interaction, such as input and textarea, have limited default behavior.
Events
| Property | Type | Description |
|---|---|---|
| callback | GetTemplateCallback | Callback for creating html to display during rendering |
| valueCallback | RealizeValueCallback | Callback to replace the value wrapped in ${xxx} format in the template with the actual value |
Properties
| Property | Type | Description |
|---|---|---|
| template | string | String in the form of the input html template |
| templateEvents | TreeTemplateEvent | TreeTemplateEvent[] | Specifies the event of the element. |
Events Desc
callback
Callback to create html to display when rendering
Type - GetTemplateCallback
Remarks:
Used to create html to display when the content to be displayed on the screen changes depending on the value.
Example:
treeView.treeOptions.templateOptions = {
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
A callback to replace the value wrapped in ${xxx} format in the template with the actual value
Type - RealizeValueCallback
Remarks:
If you change the template according to the value of the cell, specify it in the template in the format of ${xxx}, and the valueCallback will be called during rendering and the returned string will be used to replace ${xxx}.
Example:
treeView.treeOptions.templateOptions = {
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
template
String in the form of an input html template
Type - string
Remarks:
Use if callback is not specified.
templateEvents
Specifies the event of the element.
Type - TreeTemplateEvent | TreeTemplateEvent[]
Remarks:
Example:
treeView.treeOptions.templateOptions = {
template: `<input type='button' value='click' data-itemindex=\${itemindex}></input>`,
templateEvents: {
selector: 'input[type="button"]',
event: {
onclick: function(e) {console.log(e)}
}
}
}