This is a migrated thread and some comments may be shown as answers.

IE 8 compatibility issue with divs inside a grid

1 Answer 45 Views
This is a migrated thread and some comments may be shown as answers.
Fernando asked on 13 Aug 2014, 09:31 AM
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.


1 Answer, 1 is accepted

Sort by
Nikolay Rusev
Telerik team
answered on 15 Aug 2014, 07:11 AM
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'+                                         
                 $('<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).

Nikolay Rusev
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Answers by
Nikolay Rusev
Telerik team
Share this question