HTML Renderer

The HTML cell renderer can express data displayed in cells in HTML format. You can return the data you want to display in the form of inline HTML.

Limitation: You cannot control editing of html renderer cells when returning false in the onEditCommit event.

Note

Using the HTML renderer means that the developer controls it directly without using the grid's functions. Therefore, it is not basically a technical support area.
However, if there is a problem with the code you wrote, you must send us the executable source code to receive technical support.
The HTML renderer was developed for view purposes and is not suitable for input purposes.
Since it was not developed with the idea of being able to draw the entire thing using external components, there may be problems if you draw an area larger than the row height.

Example of implementing a currency column with multi-check

//Column settings
var columns = [
... skip ...
   {
     name: "Monetary",
     fieldName: "Monetary",
     width: "200",
     values: ["EUR", "USD", "HKD", "KRW"],
     labels: ["EUR", "USD", "HKD", "KRW"],
     renderer:{
       type:"html",
       callback: function(grid, cell, w, h) {
             var str = "";
             var data = (cell.value && cell.value.split(",")) || [];
             var labels = cell.dataColumn.labels;
             var values = cell.dataColumn.values;
             for (var i = 0; i < labels.length; i++) {
                 var checked = data.indexOf(values[i]) >= 0 ? "checked": "";
                 str = str + "<input type='checkbox' value = '"+values[i]+"'" + checked + " onclick='javascript:valuecheck("+cell.index.dataRow+", event)' >" +labels[i];
             }
 
           return str;
           }
       }
   },
... skip ...
];
 
gridView.setColumns(columns);
 
//Check event settings
function valuecheck(dataRow, event) {
   var target = event.target;
   var value = target.value;
     if(dataProvider.getValue(dataRow, "Monetary")){
       var dataValue = dataProvider.getValue(dataRow, "Monetary").split(",");
 
       var idx = dataValue.indexOf(value);
       if (target.checked) {
           if (idx < 0) {
               dataValue.push(value);
           }
       } else {
           if (idx >= 0)
           dataValue.splice(idx, 1);
       }
 
       dataProvider.setValue(dataRow, "Monetary", dataValue.join(","));
     }else{
       dataProvider.setValue(dataRow, "Monetary", value);
     }
};

Example of implementing a currency column using inline HTML

var columns = [
... skip ...
   {
     name: "Monetary",
     fieldName: "Monetary",
     width: "200",
     editable: false,
     renderer:{
       type:"html",
       callback: function(grid, cell, w, h) {
           var str = '<p>The currency type is <span style="color:royalblue" >cell.value</span>.</p>';
           return str;
       }
     },
     header: {
       text: "Call"
     }
   },
... skip ...
];
 
gridView.setColumns(columns);

Data editing example using inputbox

Restrictions: When using as an editor, the html area cannot be directly controlled by the grid, so the developer must directly handle setValue(), getValue(), etc. in the data provider. When exporting to Excel, only text excluding tags can be output to Excel.

var columns = [
     {
         name: "KorName",
         fieldName: "KorName",
         header: {
             text: "Name",
             styleName: "orange-column",
         },
         width: "200",
         editable: false,
         renderer: {
             type: "html",
             inputFocusable: true,
             callback: function (grid, cell, w, h) {
                 var cellValue = cell.value;
                 if (cell.value === undefined) {
                     cellValue = "";
                 }
                 var str = "";
                 str =
                     "<input type='text' value='" +
                     cellValue +
                     "' onblur='valuecheck(" +
                     cell.index.dataRow +
                     ", event)' />";
                 return str;
             },
         },
     },
];
 
gridView.setColumns(columns);
 
function valuecheck(dataRow, event) {
     var target = event.target;
     var value = target.value;
     dataProvider.setValue(dataRow, "KorName", value);
}

The focus cannot be moved using the Enter or direction keys.
You must use the mouse by clicking on another cell directly.

Example of putting multiple buttons in one cell

 
var columns = [
   ...
   {
     name: "Monetary",
     fieldName: "Monetary",
     width: "200",
     renderer: {
       type: "html",
       callback: function (grid, cell, w, h) {
         var str = `<button onclick="firstBtnClicked(${cell.index.itemIndex})">Button 1</button> <button onclick="secondBtnClicked(${cell.index.itemIndex})">Button 2</ button>`;
         return str;
       },
     },
     header: {
       text: "Button",
     },
   },
   ...
];
 
gridView.setColumns(columns);
 
function firstBtnClicked(itemIndex) {
   alert(itemIndex + 1 + "Button 1 in the first row has been clicked!");
   // If you want to retrieve row information, you can retrieve it by writing as follows.
   // alert(gridView.getValues(itemIndex))
}
 
function secondBtnClicked(itemIndex) {
   alert(itemIndex + 1 + "Button 2 in the first row was clicked!");
   // alert(gridView.getValues(itemIndex))
}

Example of dynamically creating a button

This is an example of creating a button when the gender is male.

 
var columns = [
   ...
   {
     name: "BtnField",
     fieldName: "BtnField",
     width: "200",
     editable: false,
     renderer: {
       type: "html",
       callback: function (grid, cell, w, h) {
         var gender = grid.getValue(cell.index.itemIndex, "Gender");
         var str = gender == 'male' ? `<button onclick="BtnClicked(${cell.index.itemIndex})">Man Button</button>`: ``;
 
         return str;
       },
     },
     header: {
       text: "Button",
       styleName: "orange-column"
     },
   },
   ...
];
 
gridView.setColumns(columns);
 
function BtnClicked(itemIndex) {
   alert(itemIndex + 1 + "The man button in the first row has been clicked!");
   // If you want to retrieve row information, you can retrieve it by writing as follows.
   // alert(gridView.getValues(itemIndex))
}

Actual / Target Renderer Barcode Renderer