HTML 렌더러

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

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

참고사항

HTML 렌더러를 사용한다는 것은 그리드의 기능을 사용하지 않고 직접 개발자분이 컨트롤을 한다는 의미입니다. 그렇기 때문에 기본적으로 기술지원영역은 아닙니다.
하지만 작성하신 코드가 문제가 되는 경우 반드시 실행가능한 소스 코드를 보내주셔야 기술지원이 가능합니다.
HTML 렌더러는 view 용도로 개발되었으며, 입력용도로는 적합하지 않습니다.
외부 컴포넌트를 사용하여 전체를 그릴수있도록 고려해서 개발되지 않았기 때문에 행 높이보다 큰 영역을 그린다면 문제가 있을 수 있습니다.

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

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

성과 / 목표 렌더러 바코드 렌더러