Use colorpicker as a cell type in the grid

Suite and Optimus Suite 7
#1

Hi! We used colorpicker as a cell type in grid in dhtmlx 5, please see https://prnt.sc/1r3ybb2. Now we are migrating to dhtmlx7 and I don’t see any mentions in the docs about adding colorpicker as a cell type. Could you please provide some more info about it? Is it possible at all? How I can migrate this functionality?

Thank you in advance

#2

You may try to create your own custom template for the column to display the needed html-content for your cell:

Also, you are able to use the edit events to interrupt or customize the native editing process:

#3

I had this problem, too. I just made a workaround that can be an intermediate solution:
First of all, declare a colorpicker and a popup container as in the tutorials, for example:

//	colorpicker for edit inline
const colorpicker = new dhx.Colorpicker(null, {
	css: "dhx_widget--bordered",
	customColors: []
});

//	popup container of colorpicker
const popup = new dhx.Popup();

then define a box for popup in the grid and an event handler (note: the idRow var is global):

mygrid = new dhx.Grid( null, {

	columns: [
                 .....
                    {
			id: "rgb",
			width: 100,
			header: [ { text: "Color<div id='cpbox'></div>" } ],
			align: "center",
			htmlEnable: true,
			template: function (text, row, col) {
				return "<span  style='background-color: " + text + "; color:" + text + "' >________</span>";
		}
	],
	selection: true,
	editable: true
});
mygrid.events.on("CellDblClick", function(row,column,e){
	idRow = row.id;
	if(column.id == "rgb") {
		var coord = mygrid.getCellRect(idRow,"rgb");
		popup.show("cpbox",
		{centering: true,
			mode: "bottom",
			indent: 50+coord.y
		});
	}
});
at last, define the action of colorpicker: 
  colorpicker.events.on("change", function (color) {
	mygrid.data.update(idRow, { "rgb" : color } );
	popup.hide();
});

popup.attach(colorpicker);
popup.hide();

mygrid.data.load(URL);
etc.

you can retrive id of row in other ways, f.e. whit the selection api.

If this can be refined, I’ll be happy to know best practices
HI