Use colorpicker as a cell type in the grid


Hi! We used colorpicker as a cell type in grid in dhtmlx 5, please see 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


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:


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
});"CellDblClick", function(row,column,e){
	idRow =;
	if( == "rgb") {
		var coord = mygrid.getCellRect(idRow,"rgb");"cpbox",
		{centering: true,
			mode: "bottom",
			indent: 50+coord.y
at last, define the action of colorpicker:"change", function (color) {, { "rgb" : color } );


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