Devs please give option to select text in a grid

[firefoxSafari]

It seems like it's a very common requirement to select text in a grid. I know my users demand it. There is an override for it in the grid faq for Ext 3. I just spent the last half hour or so trying to apply it to 4. It's similar, but now I have to override both View and TableChunker.

It was a good experience and I learned some new things about 4, but now I'm asking myself why. It seems like this long standing workaround deserves a new feature. Since you're so radically, redesigning the grids anyway, could you just give us a config option to make the text selectable and save everyone the hassle of having to find the overrides?

The same can be said for some of the other long standing grid cosmetic issues - letting lines wrap, for example, could be a config option.

[aconran]

We're listening... Any of the small feature requests that you want like this, please be sure to post and we'll try to implement them in the 4.x line.

Thanks,

[firefoxSafari]

Sweet - thank you very much for considering implementing these features.

It is much appreciated to have the senior developers taking time to respond to feedback like this!

[deister]

+1 on this.

I tried without success to remove the "x-unselectable" class from the table markup using a grid feature:

Ext.define('Webos.grid.feature.Selectable', {
    extend: 'Ext.grid.feature.Feature',
    alias: 'feature.selectable',
    mutateMetaRowTpl : function(metaRowTpl) {
        var len = metaRowTpl.length;
        for (var idx = 0; idx < len; idx++) {
            metaRowTpl[idx] = metaRowTpl[idx].replace("x-unselectable","").replace('unselectable=\"on\"',"")
        }

    }
});

Any ideas?

[firefoxSafari]

If you don't mind doing this for every grid on the page, I'd take the direct route and override the templates that generate the html.

Both the Ext.view.TableChunker.metaRowTpl and the Ext.grid.View cls default must be modified. As an added bonus, refresh on Ext.view.Table invokes table.unselectable so you have to override this method, too.

Something like:

 <style type="text/css">
   .x-selectable, .x-selectable * {
   -moz-user-select: text!important;
   -khtml-user-select: text!important;
  }
 </style>
 
...
 
 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 + 'selectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>',
                '</tpl>',
            '</tr>'
        ];
  
  Ext.override(Ext.grid.View, {
   cls: Ext.baseCSSPrefix + 'grid-view ' + Ext.baseCSSPrefix + 'selectable'
  });
    
  Ext.override(Ext.view.Table, {
      refresh: function(firstPass) {
          var me = this,
              table;
          //this.saveScrollState();
          me.setNewTemplate();
          
          // The table.unselectable() call below adds a selectstart listener to the table element.
          // Before we clear the whole dataview in the callParent, we remove all the listeners from the
          // table. This prevents a big memory leak on IE6 and IE7.
          if (me.rendered) {
              table = me.el.child('table');
              if (table) {
                  table.removeAllListeners();
              }
          }
          
          me.callParent(arguments);
          //this.restoreScrollState();
          if (me.rendered) {
              // Make the table view unselectable
              table = me.el.child('table');
              if (table) {
                  //table.unselectable();
              }
              
              if (!firstPass) {
                  // give focus back to gridview
                  me.el.focus();
              }
          }
      }
  });

I'd love to hear a better way of doing this...

I really, really wish this had made it into the final 4 release. The workaround for selecting text in 3.x was much easier... I just don't understand why Sencha thinks we don't need this feature. It's been in the Grid Faq for 2-3 forever. IMHO, incorporating all the hacks and workarounds from the FAQ's should have been step number 1 in the redesign process. Why make us reinvent this again?

[ykey]

Why was the decision made to make grid column text unselectable to begin with? Does it somehow reduce the user experience? I would say more than half of the other JavaScript based grid widgets I have found on the net also restrict cell text selection.

[atian25]

+1 for this.

[firefoxSafari]

Why was the decision made to make grid column text unselectable to begin with? Does it somehow reduce the user experience? I would say more than half of the other JavaScript based grid widgets I have found on the net also restrict cell text selection.

I'm not sure. I've heard it theorized that there might have been some problem with other selection mechanisms on the grid (like the row selection model or selecting columns for drag and drop - features other grid widgets might have) but I don't remember any dev actually confirming this. I've never run into a problem having both.

For an interesting read, here's the original 2.x thread where Condor posted the override that made it into the Grid FAQ:

http://www.sencha.com/forum/showthre...-in-Grid-cell/

We're not the only ones who want this request is nothing new...

[Justin Noel]

+1 for this. It sure is a pain not being able to select text in grids.

[atian25]

and

letting lines wrap