View Full Version : Shift Key + click on checkbox causing a selections in Internet Explorer.

26 Nov 2010, 1:32 AM
I am using a grid with checkboxSelectionModel. Observed that when we try to click on the checkbox (with shift key pressed), it shows some text in the grid selected in Internet Explorer 8.0. It works fine in Firefox Mozilla.

Also observed that we go to any site and try to click with shift key pressed, Internet Explorer selects few text. So it seems to be the default behavior of IE.

I need to suppress the selection of this text in my grid.

Looking at the RowSelectionModel code, the 'mousedown' is used on the GridView to provide the implementation.
OnMouseDown() method already has the e.stopEvent() which should also call e.preventDefault() to suppress the browser specific behavior. But still I could see the text selected in IE.

Also tried out e.returnValue=false option, but without success.
How can I suppress the default behavior of IE ?

Thanks in advance.

26 Nov 2010, 8:41 AM
For IE, you'll have to add the unselectable="on" attribute to all DOM elements that shouldn't allow selection.

(for grids, this means modifying the templates)

2 Dec 2010, 3:22 AM
Condor, thanks for the reply.

Should I override the templates something like:

initTemplates : function(){
var ts = this.templates || {};
ts.master = new Ext.Template(
'<div class="x-grid3" hidefocus="true">',
'<div class="x-grid3-viewport" unselectable="on">',
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>',
'<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
'<div class="x-grid3-resize-marker"> </div>',
'<div class="x-grid3-resize-proxy"> </div>',

Will this lead to few columns not getting selected, as the Grid may contain few selection columns ?
Meanwhile I will try it on my side.