Text Selections in Grid cell

[ynikulin]

Try this solution. Works in all browsers

.x-grid-row ,.x-grid-cell, .x-unselectable, .x-unselectable * {
 -webkit-user-select: text !important;
 -o-user-select: text !important;
 -khtml-user-select: all !important;
 -ms-user-select: text !important;
 user-select: text !important;
 -moz-user-select: text !important;
} 

 if(typeof Ext != 'undefined'){
  Ext.core.Element.prototype.unselectable = function(){return this;};
  Ext.view.TableChunker.metaRowTpl = [
   '<tr class="' + Ext.baseCSSPrefix + 'grid-row {addlSelector} {[this.embedRowCls()]}" {[this.embedRowAttr()]}>',
    '<tpl for="columns">',
     '<td class="{cls} ' + Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-cell-{columnId} {{id}-modified} {{id}-tdCls} {[this.firstOrLastCls(xindex, xcount)]}" {{id}-tdAttr}><div class="' + Ext.baseCSSPrefix + 'grid-cell-inner ' + Ext.baseCSSPrefix + 'unselectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>',
    '</tpl>',
   '</tr>'
  ];
 } 

[eliotik]

for ExtJS 4

div#GRIDID div.x-unselectable {
 -webkit-user-select: text !important;
 -o-user-select: text !important;
 -khtml-user-select: all !important;
 -ms-user-select: text !important;
 user-select: text !important;
 -moz-user-select: text !important;
}
div#GRIDID div.x-unselectable tr.x-grid-row div.x-grid-rowwrap-div td.x-grid-cell
{
 -webkit-user-select: text !important;
 -o-user-select: text !important;
 -khtml-user-select: all !important;
 -ms-user-select: text !important;
 user-select: text !important;
 -moz-user-select: text !important;
}
div#GRIDID div.x-unselectable tr.x-grid-row div.x-grid-rowwrap-div td.x-grid-cell div.x-unselectable
{
 -webkit-user-select: text !important;
 -o-user-select: text !important;
 -khtml-user-select: all !important;
 -ms-user-select: text !important;
 user-select: text !important;
 -moz-user-select: text !important;
}
div#GRIDID div.x-unselectable tr.x-grid-row
{
 -webkit-user-select: text !important;
 -o-user-select: text !important;
 -khtml-user-select: all !important;
 -ms-user-select: text !important;
 user-select: text !important;
 -moz-user-select: text !important;
}

where GRIDID is your grid id in which you will need to select and copy data

[svignesh89]

Hi

I created gridview(ie 5 columns, 12 rows).. I want to make 1 row clickable, not all (for example: ID is a Single columnfield) ID in 12 rows should be able to click like we using link in html... if we click on particular ID it should display some other datas in other table(ie another grid view)... pls help me out sir... i am new to extjs..
Clickable and how to give link is needed... pls help me... Thanks in advance..

[dhruv88esh]

grid.disableTextSelection(false);


Cheers

[manilodisan]

there is no such method for grids or anywhere else in extjs: disableTextSelection

[simon]

I have ext.3.4.0.

This text select doesn't work in Chrome:

if (!Ext.grid.GridView.prototype.templates) {
    Ext.grid.GridView.prototype.templates = {};
}

Ext.grid.GridView.prototype.templates.cell = new Ext.Template(
	'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>',
	'<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
	'</td>'
);

It works in IE. Any idea?
br, Simon

[hieu79vn]

Hello
your code is very good. Can we apply it only for a specific grid?

Thank you

[hieu79vn]

Hi,

Is there other codes which doesnt use the grid id but can apply for a specific grid?

Thank you

for ExtJS 4

div#GRIDID div.x-unselectable {
 -webkit-user-select: text !important;
 -o-user-select: text !important;
 -khtml-user-select: all !important;
 -ms-user-select: text !important;
 user-select: text !important;
 -moz-user-select: text !important;
}
div#GRIDID div.x-unselectable tr.x-grid-row div.x-grid-rowwrap-div td.x-grid-cell
{
 -webkit-user-select: text !important;
 -o-user-select: text !important;
 -khtml-user-select: all !important;
 -ms-user-select: text !important;
 user-select: text !important;
 -moz-user-select: text !important;
}
div#GRIDID div.x-unselectable tr.x-grid-row div.x-grid-rowwrap-div td.x-grid-cell div.x-unselectable
{
 -webkit-user-select: text !important;
 -o-user-select: text !important;
 -khtml-user-select: all !important;
 -ms-user-select: text !important;
 user-select: text !important;
 -moz-user-select: text !important;
}
div#GRIDID div.x-unselectable tr.x-grid-row
{
 -webkit-user-select: text !important;
 -o-user-select: text !important;
 -khtml-user-select: all !important;
 -ms-user-select: text !important;
 user-select: text !important;
 -moz-user-select: text !important;
}

where GRIDID is your grid id in which you will need to select and copy data

[hieu79vn]

Hello

this code works in IE
if(typeof (Ext) != 'undefined'){
Ext.core.Element.prototype.unselectable = function(){return this;};
Ext.view.TableChunker.metaRowTpl = [
'<tr class="' + Ext.baseCSSPrefix + 'grid-row {addlSelector} {[this.embedRowCls()]}" {[this.embedRowAttr()]}>',
'<tpl for="columns">',
'<td class="{cls} ' + Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-cell-{columnId} {{id}-modified} {{id}-tdCls} {[this.firstOrLastCls(xindex, xcount)]}" {{id}-tdAttr}><div class="' + Ext.baseCSSPrefix + 'grid-cell-inner ' + Ext.baseCSSPrefix + 'unselectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>',
'</tpl>',
'</tr>'
];
}

but after I change value of record which cause the grid redraw, it doesn't work any more. How can I solve it?
Thank you

[hundare]

This code does not work for ExtJS 4. I copied this code in my CSS. Do i need to copy it to ext.css?