Please extend the 'color' editor as below:
$.extend($.fn.datagrid.defaults.editors, {
color: {
init: function(container, options){
var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
input.color(options);
return input;
},
destroy: function(target){
$(target).color('destroy');
},
getValue: function(target){
return $(target).color('getValue');
},
setValue: function(target, value){
$(target).color('setValue', value);
},
resize: function(target, width){
$(target).color('resize', width);
}
}
})
And then apply the 'color' editor to the property row.
{"name":"Color","value":"#93c47d","group":"ID Settings","editor":"color"}