Rally Grid: Make only one column editable

Question

Im having an issue making only one column in my grid editable. my relevant grid config is:

    me.FeatureGrid = me.add({
        xtype: 'rallygrid',
        width: 700,
        height:300,
        scroll:'vertical',
        columnCfgs: [
            {
                text:'Feature', 
                dataIndex:'Name',
                width:400
            },{
                text:'Stories', 
                dataIndex:'ObjectID',
                sortable:true, 
                doSort: function(direction){
                    //custom sort function
                },
                width:100,
                renderer:function(oid){
                    //custom render funciton
                }
            },{
                dataIndex:'My_Custom_Field',
                width:180,
                text:'Status',                  
                editor:{
                    xtype:'combobox',
                    store: Ext.create('Ext.data.Store', {
                        fields: ['Status'],
                        data:[
                            {'Status':'Committed'},
                            {'Status':'Not Committed'}
                        ]
                    }),
                    editable: false,
                    displayField: 'Status'
                },
                renderer: function(tcs, meta, record){
                    //render function
                }
            }
        ],
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit:1
            })
        ],
        viewConfig:{
            stripeRows:true
        },
        listeners: {
            beforeedit: function(editor, e){
                console.log(e.colIdx);
                return e.colIdx === 3; //only edit last col
            },
            edit: function(editor, e){
                //edit function
            }
        },
        showPagingToolbar:false,
        enableEditing:false,
        context: this.getContext(),
        store: //feature Store
    }); 

I am trying to get only the 3rd column (My_Custom_Field) editable, so the user cannot change anything in columns 1 and 2. Also, The 3rd column has a combobox that only has 2 values they can choose from, so I have to set that to non-editable. My Goal is that the user updates the combobox, and then the 'edit' event is fired and i save the updated record.

My first issue is that I do NOT want the 'edit record cog' at the beginning of my rows, but since I have the plugin added, It won't go away. Like I said, I ONLY want the 3rd column to be editable by the user.

Also, i get Some weird error right when I finish clicking on the combobox and selecting the values. Here is a stacktrace of the error, I don't know what is null in my grid.

Answer 1

So Connor answered half of my problem, but the reason I was getting the error was because I had a renderer and an editor for the third column, and they did NOT play nicely together. I changed up the code a bit to get rid of the renderer, so I just have the editor now, and it works properly.

Answer 2

• To make a cell uneditable, add "editor:false" to the config of that cell.
• To hide the cog, add "showRowActionsColumn:false" to the grid config.
• The error you're getting is probably related to the fact that the item isn't being properly selected for editing. Try removing the "enableEditing:false" config from the grid and see if that helps.