colorPicker 연결

RealGrid 에 jQuery MiniColors 라이브러리를 적용할 수 있습니다.
registerCustomRenderer()는 렌더러를 직접 만들어서 사용할 수 있는 기능입니다.

"colorPicker" column 에 셀을 클릭하여 원하는 색상으로 변경하는 데모 입니다.

RealGrid 와 jQuery MiniColors 연계

jQuery MiniColors는 https://github.com/claviska/jquery-minicolors (opens in a new tab) 에서 확인할 수 있습니다.

jQuery MiniColors 사용을 위해서는 minicolors.css와 minicolors.js include가 필요합니다.

<script src="/js/jquery-3.5.0.min.js"></script>
<link href="/public/styles/jquery.minicolors.css" rel="stylesheet" />
<script src="/js/jquery.minicolors.js"></script>

차트 생성 함수

// column // 
 
var columns = [{
  ... 생략 ...
},{
  name: "col3",
  fieldName: "field3",
  header: {
    text: "colorPicker"
  },
  width: 150,
  renderer: "custom_renderer",
  styleName: "picker-renderer",
  editable: false
},{
  ... 생략 ...
}];
 
// colorPicker //
 
  gridView.registerCustomRenderer("custom_renderer", {
        initContent: function(parent) {
            var input = this._input = document.createElement("input");
            input.type = "text";
            // Color 견본 설정 //
            input.setAttribute("data-swatches", "#ef9a9a|#90caf9|#a5d6a7|#fff59d|#ffcc80|#bcaaa4|#eeeeee|#f44336|#2196f3|#4caf50|#ffeb3b|#ff9800|#795548|#9e9e9e");
            parent.appendChild(input); 
        },
        render: function(grid, model, width, height, info) {
          // 생성 위치 지정 // 
          var topItem = gridView.getTopItem();
          if(model.index.itemIndex < topItem + 5){
            var pickerPosition = 'bottom'
          }else {
            var pickerPosition = 'top left'
          } 
            // 기본 설정 //
            var input = this._input;
            $(input).minicolors && $(input).minicolors({
                control: $(input).attr('data-control') || 'hue',
                defaultValue: $(input).attr('data-defaultValue') || '',
                format: $(input).attr('data-format') || 'hex',
                keywords: $(input).attr('data-keywords') || '',
                inline: $(input).attr('data-inline') === 'true',
                letterCase: $(input).attr('data-letterCase') || 'lowercase',
                opacity: $(input).attr('data-opacity'),
                position: $(input).attr('data-position') || pickerPosition,//'bottom',                
                swatches: $(input).attr('data-swatches') ? $(input).attr('data-swatches').split('|') : [],
 
                change: function(hex, opacity) {
                    if (!hex) {
                        return;
                    }
        
                    var index = gridView.getIndexOfElement(this);  // this는 input을 의미한다.
                    if (index) {
                        var itemIndex = index.itemIndex;
                        gridView.setValue(itemIndex, index.fieldIndex, hex);
                    }
                },
 
                show: function() {
                    console.log($(this._input).minicolors("settings"));
                    console.log('Show event triggered!');
                }
            });
 
            if (model.value != null) {
                this._input.value = model.value;
                $(this._input).minicolors("value", model.value);
            } else {
                $(this._input).minicolors("value", null);
            }
        },
        // 내용 초기화 콜백 //
        clearContent: function(parent) {
            $(this._input).minicolors("destroy");
            parent.innerHTML = "";
        }
    });

CSS Custom

/* *.css */
.picker-renderer > .rg-renderer{
    overflow: visible !important;
    text-align: left !important;
}

text타입 날짜 편집기 파일 Drag and Drop