HTML 렌더러

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

제한사항: onEditCommit 이벤트에서 return false 반환 시 html렌더러 셀의 편집을 제어할 수는 없습니다.

통화컬럼을 멀티 체크로 구현한 예제

//컬럼설정
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);
}

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

한개의 셀에 여러개의 버튼을 넣는 예제

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})">버튼1</button> <button onclick="secondBtnClicked(${cell.index.itemIndex})">버튼2</button>`;
        return str;
      },
    },
    header: {
      text: "버튼",
    },
  },
  ...
];

gridView.setColumns(columns);

function firstBtnClicked(itemIndex) {
  alert(itemIndex + 1 + "번째 행의 버튼1이 클릭되었습니다!");
  // 행 정보를 가지고오고 싶을때는 아래와 같이 작성하여 가지고 올 수 있습니다.
  // alert(gridView.getValues(itemIndex))
}

function secondBtnClicked(itemIndex) {
  alert(itemIndex + 1 + "번째 행의 버튼2가 클릭되었습니다!");
  // alert(gridView.getValues(itemIndex))
}

동적으로 버튼을 생성하는 예제

성별이 남자인 경우 버튼을 생성하는 예제 입니다.

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 == '남' ? `<button onclick="BtnClicked(${cell.index.itemIndex})">남자버튼</button>`: ``;
                
        return str;
      },
    },
    header: {
      text: "버튼",
      styleName: "orange-column"
    },
  },
  ...
];

gridView.setColumns(columns);

function BtnClicked(itemIndex) {
  alert(itemIndex + 1 + "번째 행의 남자버튼이 클릭되었습니다!");
  // 행 정보를 가지고오고 싶을때는 아래와 같이 작성하여 가지고 올 수 있습니다.
  // alert(gridView.getValues(itemIndex))
}