Text Selections in Grid cell

[jove4015]

I second the motion... It was probably the first thing my users asked me when I showed them their shiny new toy. "So... you can't select text anymore? How am I supposed to copy this to here?" Most programs let users select text in grids, like Excel or InDesign (what my users are more accustomed to) - it's confusing to them that Ext grids don't, since they look so much like any other program. But enabling text selection isn't so hard in the CSS - my real problem is, even when you do that, selecting is *hard* - you end up selecting half of the text in the grid most of the time, depending on where you click to start selecting. You pretty much have to start from the right and select to the left - very unintuitive. I've been teaching them to double-click to select a word, that works pretty well for most purposes (some of them actually love it and never realized they could do that).

If anyone else is trying to convince difficult-to-please users to deal with this, double-click select is the way to go...

[appshare]

Selection like the DataView Example would be a nice option.

Cheers
Dirk

[vibez]

Hi,

Any movement on this yet?

[raphael.damico]

I third that motion.

[mcduke]

I fourth that motion.
Using Ext to modernize my company's web applications. Not being able to select&copy grid/tree text is one of the only huge drawbacks I've encountered.

[Stripeman]

bump. ?

[Condor]

OK, here is the method I would use to re-enable selectability:

First, I add an extra CSS rule:

<style type="text/css">
	.x-selectable, .x-selectable * {
		-moz-user-select: text!important;
		-khtml-user-select: text!important;
	}
</style>

Next, I use the new rule in the grid config:

var grid = new Ext.grid.GridPanel({
	viewConfig: {
		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>'
			)
		}
	},
	...
});

or, if you want this as default behaviour, you could use:

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>'
);

(if you want the header to be selectable you'll also have to change the hcell template)

[dhruvakrishnan]

OK, here is the method I would use to re-enable selectability:

First, I add an extra CSS rule:

<style type="text/css">
    .x-selectable, .x-selectable * {
        -moz-user-select: text!important;
        -khtml-user-select: text!important;
    }
</style>

Next, I use the new rule in the grid config:

var grid = new Ext.grid.GridPanel({
    viewConfig: {
        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>'
            )
        }
    },
    ...
});

or, if you want this as default behaviour, you could use:

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>'
);

(if you want the header to be selectable you'll also have to change the hcell template)

I would like to use the second option.
Can anyone let me know where I need to place this code?May sound silly but please help me.
I tried placing the code snippet outside the GridPanel code. It didn't seem to work.
Please help

[Condor]

The code modifies the GridView prototype, so you should put it immediately after you load GridView.js (= part of ext-all.js).

[dhruvakrishnan]

I would like to use the second option.
Can anyone let me know where I need to place this code?May sound silly but please help me.
I tried placing the code snippet outside the GridPanel code. It didn't seem to work.
Please help

Here is the Grid which I need to be able to copy from.(As of now I am not able to copy)

var gridCandidate = new xg.GridPanel({
store : candidatestore,
loadMask: true,
//autoSizeColumns : true,
renderTo : candidategriddata,
cm : new xg.ColumnModel([
{header: "Client ", width: 120, sortable: true, hidden:true, dataIndex: 'job.client.company.name'},
{header: "Job", width: 120, sortable: true, dataIndex: 'job.title'},
//other colums
//
//
]),



view: new Ext.grid.GroupingView({
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),

collapsible: true,
animCollapse: false,
width :883,
//layout : 'fit',
height : 600,
viewConfig: {
forceFit:true,
enableRowBody:true,
templates: {
cell: new Ext.Template( //<--First Option,Didn't seem to work
'<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>'
)
}
},

bbar: new Ext.PagingToolbar({
pageSize: 25,
//some code

})

});
if (!Ext.grid.GridView.prototype.templates) { //<--Tried Second Option as well(I tried Both Options at different times)
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>'
);

Please let me know if I have left out something.