IE 8 compatibility issue with divs inside a grid

[Fernando]

Hi, I want to show a div (with text "Insert div text here" in the example file attached) when you edit the age of a row, but if you click on that div, the input should not lose the focus.
It works properly on firefox, chrome and latest versions of IE, but on IE8 it doesn't work, when you click on the div, the cell loses the focus and de input cell closes.

You can execute example.html to better understanding of my problem.

Thanks.

[Nikolay Rusev]

Hello Juan,

Here is how the editor could be implemented: 

function customEditor(container, options) {
                $('<div unselectable="on" style="display:display; position:absolute; background:white; overflow: hidden; border: solid 1px #999999; z-index:1000;" >Insert div text here'+
                    '</div>').
                    mousedown(function(event){
                        event.preventDefault();
                    }).
                    appendTo(document.body);

                 $('<input name="datoString" />').appendTo(container);
            }

The important bits:
 - event.preventDefault() on mousedown event handler - this will prevent the div from acquiring focus in almost all browsers
 - unselectable="on" attribute - this will make the text in the div unselectable and the div not focusable. This is the way of preventing focus on element in older IE browsers. However notice that this attribute must be applied to all child elements of the div (if any).

Regards,
Nikolay Rusev
Telerik