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를 적용한 데이터 편집 예제

제한사항: 편집기로 사용시에 html 영역은 그리드가 직접 제어할 수 없기 때문에 dataProvider에 setValue(),getValue() 등은 개발자가 직접 처리해 주셔야 합니다.
excel export 시 태그를 제외한 text만 엑셀로 출력이 가능합니다.

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))
}

링크 렌더러 바코드 렌더러