아이콘 렌더러

ICON 셀 렌더러는 텍스트와 함께 iconLocation 위치에 이미지를 표시합니다.

아이콘 렌더러의 표시 방법

1. callback을 사용하여 아이콘 주소를 리턴하여 표시할 수 있습니다.
2. iconMap기능을 이용하여 아이콘을 표시할 수 있습니다. (아이콘맵에서 'EUR', 'USD'만 지정하여 2개의 이미지만 표시됨).

var columns = [
  ... 생략 ...
    {
        name: "icon1",
        fieldName: "Gender",
        width: "100",
        renderer: {
            type: "icon",
            iconCallback: function (grid, cell) {
                var sex = cell.value == '남' ? 'man' : 'woman';
                return "../../../../../public/images/common/" + sex + ".png";
            },
            iconHeight: 15,
            iconWidth: 15
        },
        header: {
          text: "Icon Callback"
        }
    },
    {
        name: "icon2",
        fieldName: "Gender",
        width: "100",
        renderer: {
            type: "icon",
            iconMap: {
                "남": "../../../../../public/images/common/man.png",
                "여": "../../../../../public/images/common/woman.png"
            },
            iconHeight: 15,
            iconWidth: 10
        },
        header: {
          text: "Icon Map"
        }
    },
  ... 생략 ...
];

gridView.setColumns(columns);

아이콘의 위치 지정

iconLocation을 지정해서 아이콘이 표시될 위치를 지정할 수 있습니다. 지정할 수 있는 iconLocation은 "left", "right", "top", "bottom", "leftedge", "rightedge", "topedge","bottomedge", "center" 입니다.

var columns = [
  ... 생략 ...
  {
      name: "icon1",
      fieldName: "Gender",
      width: "100",
      renderer: {
          type: "icon",
          iconCallback: function (grid, cell) {
              var sex = cell.value == '남' ? 'man' : 'woman';
              return "../../../../../public/images/common/" + sex + ".png";
          },
          iconLocation: "left",  //<----
          iconHeight: 15,
          iconWidth: 10
      },
      header: {
        text: "LEFT"
      }
  },
  ... 생략 ...
];

gridView.setColumns(columns);