
# colorPicker connection

You can apply the jQuery MiniColors library to RealGrid.  
[registerCustomRenderer()](/refs/Class/GridBase#registercustomrenderer) is a function that allows you to create and use a renderer yourself.
  
This is a demo where you click on a cell in the "colorPicker" column to change it to the desired color.


```js
const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Color', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Email', dataType: 'text' }
];

const columns = [
  { name: 'col1', fieldName: 'KorName', header: { text: 'Name' }, width: 150 },
  { name: 'col2', fieldName: 'Gender', header: { text: 'Gender' }, width: 150 },
  { 
    name: 'col3', 
    fieldName: 'Color', 
    header: { text: 'colorPicker', styleName: 'orange-column' }, 
    width: 150, 
    renderer: 'custom_renderer', 
    styleName: 'picker-renderer', 
    editable: false 
  },
  { name: 'col4', fieldName: 'Age', header: { text: 'Age' }, width: 150, numberFormat: '##' },
  { name: 'col5', fieldName: 'Email', header: { text: 'Email' }, width: 150 }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 25
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data2.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        grid.getDataSource().setRowCount(20);
        grid.refresh();
      });
  }
}, {
  fields
});

gridView.registerCustomRenderer('custom_renderer', {
  initContent: function(parent) {
    var input = this._input = document.createElement('input');
    input.type = 'text';
    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();
    var pickerPosition = model.index.itemIndex < topItem + 5 ? 'bottom' : 'top left';
    
    var input = this._input;
    if (window.$ && window.$.fn && window.$.fn.minicolors) {
      window.$(input).minicolors && window.$(input).minicolors({
        control: window.$(input).attr('data-control') || 'hue',
        defaultValue: window.$(input).attr('data-defaultValue') || '',
        format: window.$(input).attr('data-format') || 'hex',
        keywords: window.$(input).attr('data-keywords') || '',
        inline: window.$(input).attr('data-inline') === 'true',
        letterCase: window.$(input).attr('data-letterCase') || 'lowercase',
        opacity: window.$(input).attr('data-opacity'),
        position: window.$(input).attr('data-position') || pickerPosition,
        swatches: window.$(input).attr('data-swatches') ? window.$(input).attr('data-swatches').split('|') : [],
        change: function(hex, opacity) {
          if (!hex) {
            return;
          }
          var index = gridView.getIndexOfElement(this);
          if (index) {
            var itemIndex = index.itemIndex;
            gridView.setValue(itemIndex, index.fieldIndex, hex);
          }
        },
        show: function() {
        }
      });
    }
    
    if (model.value != null) {
      this._input.value = model.value;
      if (window.$ && window.$.fn && window.$.fn.minicolors) {
        window.$(this._input).minicolors('value', model.value);
      }
    } else {
      if (window.$ && window.$.fn && window.$.fn.minicolors) {
        window.$(this._input).minicolors('value', null);
      }
    }
  },
  clearContent: function(parent) {
    if (window.$ && window.$.fn && window.$.fn.minicolors) {
      window.$(this._input).minicolors('destroy');
    }
    parent.innerHTML = '';
  }
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

## RealGrid and jQuery MiniColors connection

You can check jQuery MiniColors at https://github.com/claviska/jquery-minicolors
  
To use jQuery MiniColors, minicolors.css and minicolors.js include are required.

```html
<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>
```

### Chart creation function

```js
// column //

var columns = [{
   ... skip ...
},{
   name: "col3",
   fieldName: "field3",
   header: {
     text: "colorPicker"
   },
   width: 150,
   renderer: "custom_renderer",
   styleName: "picker-renderer",
   editable: false
},{
   ... skip ...
}];

//colorPicker //

   gridView.registerCustomRenderer("custom_renderer", {
         initContent: function(parent) {
             var input = this._input = document.createElement("input");
             input.type = "text";
             // Color swatch settings //
             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) {
           // Specify creation location //
           var topItem = gridView.getTopItem();
           if(model.index.itemIndex < topItem + 5){
             var pickerPosition = 'bottom'
           }else {
             var pickerPosition = 'top left'
           }
             // Basic setting //
             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 means 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);
             }
         },
         //Content initialization callback //
         clearContent: function(parent) {
             $(this._input).minicolors("destroy");
             parent.innerHTML = "";
         }
     });
```

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