Text Selections in Grid cell

[SantaBarbarian]

Thank you. I'll take a look at that.

[aj3423]

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

when selecting text with SHIFT key, the text is selected and then unselected, so there'll be a flash with this hack, I'm testing it in IE8, there should be some way to disable the text selection when SHIFT key is down ?

[aj3423]

problem 1:
in IE, when multi-select with SHIFT key, all the text will be selected
problem 2:
override of prototype.templates

see this thread:
http://www.sencha.com/forum/showthre...id-quot-in-FAQ

[bk1]

Thanks, Condor and DK!

(Was this enabled by default in 2.1, I wonder....)

[vpopa]

I found a problem if there a second row in the grid defined in the getRowClass method.

I've noticed that second row disappear because something beyond my understandings happens in the next line:

Ext.grid.GridView.prototype.templates = {};

Then I've noticed that another solution that allows you to select text in a grid, is just to return the x-selectable class in the getRowClass, but I've only tested on Firefox.

viewConfig: {
 getRowClass: function(record, rowIndex, rp, ds){
  return "x-selectable";
 }
}

Condor would you be kind and tell me if it's ok to use the following code in order to aviod the problem that I've mention above:

Ext.override(Ext.grid.GridView, {
    cellTpl: 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>'
    )
});

The code above makes the text selectable in all grids and you also have the second row in the grid display.
Please note that in order to be able to select the text in the second row also the getRowClass must return the x-selectable class.

[Condor]

Your override should ofcourse only contain the second cellTpl, and yes, it will also work (but only on Ext 3.3+, because older versions didn't have a cellTpl GridView property).

[vpopa]

ups, I updated the code.

thz for the answer

[locutusUT]

Thanks for the contribution Condor. I'm trying to do the same in Ext JS 4 but I'm not exactly sure which class I should override. I see the code in the distro, but I can't seem to override it without a JavaScript error.

Ext.override( 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 unselectable="off" class="' + Ext.baseCSSPrefix + 'grid-cell-inner ' + Ext.baseCSSPrefix + 'unselectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>',
            '</tpl>',
        '</tr>'
    ]
});

I also tried this CSS override which works fine for FF but not for webkit browsers:

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

Thoughts to get this working in Ext JS 4?

[Jonny5]

I too would love the ability to select text in a grid in this way. I want to be able to swipe and copy all table contents.

[new]

Hi everyone
I just want to be able to select text from a TreeGrid panel cells. I tried all the mentioned way but no result. please help. thanks
it serious