커스텀 렌더러 - 이미지 버튼

커스텀 렌더러는 리얼그리드에서 제공하는 기본 렌더러로 기능이 불충분할때 렌더러를 직접 만들어서 사용할 수 있는 기능입니다.
아래 데모는 조건에 따라 이미지 버튼을 하나 또는 여러개로 표현하는 데모 입니다.

투자국가가 모잠비크인 경우는 팝업, 조회 버튼을 표시.
캐나다인 경우는 팝업 버튼을 표시.
부베 섬인 경우는 조회 버튼을 표시.

참고사항

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

.custom_none {
	display:none;
}
 
.custom_render_span {
	flex: 1;
	text-align: left;
	overflow: hidden;
}
 
.custom_renderer > div {
  display: flex;
  align-items: center;
}
 
.custom_renderer .rg-renderer:hover .custom-hover {
	visibility: visible;
}
 
.custom_renderer .rg-renderer .custom-hover {
	visibility: hidden;
}
 
.custom_renderer .rg-renderer .custom-focused {
	visibility: visible;
}
 
.custom_search {
	height: 26px;
	margin-left: 2px;
	background: url("/images/btnImages/search_normal.png") center center no-repeat;
    flex: 0 0 45px;
}
.custom_search:hover {
	background: url("/images/btnImages/search_hover.png") center center no-repeat;
}
.custom_search:active {
	background: url("/images/btnImages/search_click.png") center center no-repeat;
}
 
.custom_popup {
	height: 26px;
	margin-left: 2px;
	background: url("/images/btnImages/popup_normal.png") center center no-repeat;
    flex: 0 0 45px;
}
.custom_popup:hover {
	background: url("/images/btnImages/popup_hover.png") center center no-repeat;
}
.custom_popup:active {
	background: url("/images/btnImages/popup_click.png") center center no-repeat;
}

var columns = [
  ...
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "150",
    renderer: "renderer_imgbtn", //registerCustomRenderer로 렌더러
    styleName: "left-column custom_renderer",
    header: {
      text: "투자국가",
      styleName: "orange-column"
    }
  },
  ...
];
 
gridView.setColumns(columns);

gridView.registerCustomRenderer("renderer_imgbtn", {
  initContent : function (parent) {
      var span = this._span = document.createElement("span");
      span.className = "custom_render_span"
      parent.appendChild(span);
      parent.appendChild(this._button1 = document.createElement("span"));
      parent.appendChild(this._button2 = document.createElement("span"));
  },
 
  canClick : function() {
      return true;
  },
 
  clearContent : function(parent) {
      console.log("DISPOSED......");
      parent.innerHTML = "";
  },
 
  render : function(grid, model, width, height, info) {
      info = info || {};
      var span = this._span;
      // text설정.
      span.textContent = model.value;
 
      this._value = model.value;
      this._button1.className = "";
      this._button2.className = "";
      switch(model.value) {
          case "모잠비크":
              this._button1.className = "custom_search custom-hover" + (info.focused ? " custom-focused" : "");
              this._button2.className = "custom_popup custom-hover" + (info.focused ? " custom-focused" : "");
              break;
          case "캐나다":
              this._button1.className = "custom_search custom-hover" + (info.focused ? " custom-focused" : "");
              break;
          case "부베 섬":
              this._button2.className = "custom_popup custom-hover" + (info.focused ? " custom-focused" : "");
              break;
      }
 
  },
 
  click : function(event) {
      var grid = this.grid.handler; // 
      var index = this.index.toProxy();  // 
      event.preventDefault;
 
      if (event.target === this._button1) {
        alert("조회버튼: " + this._value);
      } else if (event.target === this._button2) {
        alert("팝업버튼: " + this._value);
      } 
  }
});

바코드 렌더러 리얼차트 연동