Text Selections in Grid cell

[dhruvakrishnan]

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

I added it in "ext-all.js".
Now it works.
Thanks a lot Condor

[dhruvakrishnan]

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

})

});


Please let me know if I have left out something.

The second option you gave works perfectly fine.
Can you please tell me as to what went wrong in the above code that is not letting me from copying the items in the grid. I used the first option that you gave.
Thanks in advance.

[Condor]

1. Don't add code to ext-all.js (it complicates upgrading). Instead create an extra .js file and include it directly after ext-all.js.

2. For grouping you might need to put the template definition into the GroupingView component config instead of the viewConfig.

[dhruvakrishnan]

Thanks a lot Condor.
It worked fine. You gave a lot of insight into things.
Thanks a lot for that.

[battisti]

Thx a lot Condor work perfect!

It's will be a big trouble in my project and now its SOLVED

[okwei]

In case you are using plugins like expender, it does not solve the problem.
You will also need to override the row in the GridView.

But text selection should just be the default.

[Bas]

Thanks, Condor. Your fix works just fine.

My vote for text selection by default.

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)

[joeri]

I still had an issue when doing multi-select of rows with the shift button. It would select a block of text.

To workaround this, I used a custom selModel defined on the gridpanel:

            var sm = new Ext.grid.RowSelectionModel();
            sm.on('selectionchange', function(sm) {
               // only clear text selection when selecting more than one row (shift-select)
               if (sm.getSelections().length > 1) {
                  // use setTimeout, because the event still has to cascade to the browser
                  // for the text selection to happen
                  window.setTimeout(function() {
                     // for mozilla
                     if (window.getSelection) { getSelection().removeAllRanges() }
                     // for IE
                     else if (document.selection) { document.selection.empty(); };
                     }
                  , 0);
               };
            });

            var mygrid = 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>'
                     )
                  }
               },
               selModel: sm,
               ...

[plima]

Thanks Condor, solved my problem too.

My vote for selectable Grid.

[guyr]

Thanks to vicwin for the helpful hints, but I have a few follow-up items:

• Seeing overflow:visible on .x-grid3-cell-inner does appear to help Firefox consistently allow portions or all of multiple cells to be selected, this property also throws off the column alignments. I did find that at least under Firefox 2.0.0.13, the multiple-cell type selection is still possible even without this setting, but is hard to achieve consistently.

My company is rolling out its first major project using GXT, and I've been trying to tame this grid selection bear. I've found this message thread to be most helpful. For those using GXT trying to tackle this problem, here is the closest I've come.

For Firefox, create an application-specific CSS file, and load it after ext-all.css. In your CSS file, include this:

.x-grid3-row td,.x-grid3-summary-row td {
  -khtml-user-select: text!important;
  -moz-user-select: text!important;
}

.x-grid3-cell-inner,.x-grid3-hd-inner {
  overflow: visible;
}

This is an imperfect solution. Without the second entry, you cannot hold the left mouse button down and drag to select. Instead, you'll have to hold down the shift key, then click and drag for one or two characters in the first cell you wish to copy, then go to the last cell and click and drag a couple characters there. After you do this a few times, you'll get the hang of it. The benefit of doing it this way is that your cell text is properly clipped within the cell.

If you include the second entry above, then extended selects are easy. Just hold down the left mouse button and drag. However, cell text will overflow into adjacent cells. That looks really ugly, so we've opted to use the clumsy mechanism in the paragraph above.

GXT support team, please fix this (can't find a place to report bugs on this site ). There really needs to be a way to drag to select AND keep the text within the cell. This shouldn't be a one-or-the-other decision.

For IE and other browsers, the solution is easier. After populating your grid, include the following:

    grid.disableTextSelection(false);

You must do this after populating your grid, not after constructing it. Now you can drag-select. Selection ends up covering not just the text in the cell, but all the white space too, so you end up with this big blue blob, but it works.