1. #11
    Ext User
    Join Date
    Feb 2008
    Posts
    48
    Vote Rating
    0
    jove4015 is on a distinguished road

      0  

    Default


    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...

  2. #12
    Ext User
    Join Date
    Jun 2007
    Posts
    18
    Vote Rating
    0
    appshare is on a distinguished road

      0  

    Default selecting like DataView ?

    selecting like DataView ?


    Selection like the DataView Example would be a nice option.

    Cheers
    Dirk

  3. #13
    Ext User
    Join Date
    Aug 2007
    Posts
    96
    Vote Rating
    0
    vibez is on a distinguished road

      0  

    Default


    Hi,

    Any movement on this yet?

  4. #14
    Ext User
    Join Date
    Jun 2008
    Posts
    3
    Vote Rating
    0
    raphael.damico is on a distinguished road

      0  

    Default


    I third that motion.

  5. #15
    Ext User
    Join Date
    Jul 2008
    Posts
    2
    Vote Rating
    0
    mcduke is on a distinguished road

      0  

    Default


    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.

  6. #16
    Ext User Stripeman's Avatar
    Join Date
    Apr 2008
    Location
    Heidelberg Germany
    Posts
    275
    Vote Rating
    0
    Stripeman is on a distinguished road

      0  

    Default


    bump. ?

  7. #17
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

    First, I add an extra CSS rule:
    Code:
    <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:
    Code:
    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:
    Code:
    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)

  8. #18
    Sencha User dhruvakrishnan's Avatar
    Join Date
    Jul 2008
    Location
    Bangalore
    Posts
    26
    Vote Rating
    0
    dhruvakrishnan is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    OK, here is the method I would use to re-enable selectability:

    First, I add an extra CSS rule:
    Code:
    <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:
    Code:
    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:
    Code:
    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

  9. #19
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  10. #20
    Sencha User dhruvakrishnan's Avatar
    Join Date
    Jul 2008
    Location
    Bangalore
    Posts
    26
    Vote Rating
    0
    dhruvakrishnan is on a distinguished road

      0  

    Default


    Quote Originally Posted by dhruvakrishnan View Post
    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.