The colorpicker popup gets wrong zindex

Suite and Optimus Suite 5
#1

Hi,

When using JQuery-UI modal dialogs with a dhtmlxGrid where one of the columns is a colorpicker, I encounter a curious problem. The colorpicker popup is displayed under the JQuery dialog and it’s impossible to click on it. How can I get the colorpicker popup to display properly?

I have attached an example displaying the problem. The example is based on dhtmlxGrid/samples/01_cell_types/02_colorpicker_grid.html
We use dhtmlxSuite v2.6pro (100722)

bjarnis,
example.zip (741 Bytes)

#2

I faced the same problem when dhtmlxWindow was called on click from jquery-ui dialog in modal state.
I’m not sure if it is quite simple solution but zindex may be controlled by the following two functions:

[code]//GET AND SET MAX zIndex FOR JQuery Objects
$.maxZIndex = $.fn.maxZIndex = function(opt) {
///


/// Returns the max zOrder in the document (no parameter)
/// Sets max zOrder by passing a non-zero number
/// which gets added to the highest zOrder.
///
///
/// inc: increment value,
/// group: selector for zIndex elements to find max for
///
///
var def = { inc: 10, group: “*” };
$.extend(def, opt);
var zmax = 0;
$(def.group).each(function() {
var cur = parseInt($(this).css(‘z-index’));
zmax = cur > zmax ? cur : zmax;
});
if (!this.jquery)
return zmax;

return this.each(function() {
    zmax += def.inc;
    $(this).css("z-index", zmax);
});

}

//PUT JQuery Object ON TOP (SET MAX z-index)
function PutOnTop(objJQ,inc) {
inc = inc || 0;
// Set the zIndex to max + inc
objJQ.maxZIndex({ inc: inc });

// Get the zIndex as a number
//alert($.maxZIndex());

}[/code]

Call function PutOnTop each time you need to change zindex:

PutOnTop($('#myWindowId'),5);
#3

I forgot to mention that both functions are quite small and simple, the code looks complicated due to comment lines where their functionality is explained. I provided “as is” original code I found somewhere in the internet. Read comments within the code to understand their features. Many thanks to their creator.
Hope it will help :wink:

#4

Thanks vasylp, this almost works. The problem I’m having with the colorpicker though is that I don’t know what to write inside the PutOnTop() function. The colorpicker that pops up is dynamically created in the body of the document. It is inside a span tag, but it has no “class” or “id” to identify it, so it makes it very hard to select with jQuery.

I was hoping the dhtmlx-team had a patch for this so that the colorpicker popup would inherit the z-index from it parent grid (even though the grid is not an actual parent in the DOM structure).

bjarnis,

#5

Good day, bjarnis.

in dhtmlxgridcell.js you can find the string:

this.obj.style.zIndex=1;

try to change it like this:

this.obj.style.zIndex=10010;