HTML 렌더러

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

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

//컬럼설정
var columns = [
... 생략 ...
  {
    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;
      }
  },
... 생략 ...
];

gridView.setColumns(columns);

//체크 이벤트 설정
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);
    }
}

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

var columns = [
... 생략 ...
  {
  {
    name: "Monetary",
    fieldName: "Monetary",
    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);

inputbox를 적용한 데이터 편집 데모 입니다.

var columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    header:{
      text: "이름",
      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)
}

• 엔터, 방향키로 포커스를 이동시킬 수 없습니다.
• 마우스로 직접 다른 셀을 클릭해서 사용 해주셔야 합니다.