HTML 렌더러

HTML 셀 렌더러는 셀에 표시되는 데이터를 HTML형태로 표현할 수 있습니다. 표시하고 싶은 데이터를 inline HTML의 형태로 return 하면 됩니다.

통화컬럼을 멀티 체크로 구현한 데모 입니다.

//컬럼설정
var columns = [
... 생략 ...
  {
    name: "Monetary",
    fieldName: "Monetary",
    type: "data",
    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;
      }
  },
... 생략 ...
];

gridView.setColumns(columns);

//체크 이벤트 설정
function valuecheck(dataRow, event) {
  var target = event.target;
  var value = target.value;
  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(","));
}

통화컬럼을 인라인 HTML을 사용하여 구현한 데모 입니다.

var columns = [
... 생략 ...
  {
  {
    name: "Monetary",
    fieldName: "Monetary",
    type: "data",
    width: "200",
    editable: false,
    renderer:{
      type:"html",
      callback: function(grid, cell, w, h) {
          var str = '<p>화폐 종류는 <span style={{color: 'royalblue'}} >cell.value</span> 입니다.</p>';
          return str;
      }
    },
    header: {
      text: "통화"
    }
  },
... 생략 ...
];

gridView.setColumns(columns);