Search code examples
javascriptrallyappsdk2

how to make a grid column editable when using custom store


I want to be able to edit grid colums inline as it is shown in a simple grid example in AppSDK docs https://developer.help.rallydev.com/apps/2.0rc1/doc/#!/example/Grid but it looks like that this functionality is not available by default if when a custom store is used:

_createGrid: function(stories) {
     this.add({
        xtype: 'rallygrid',
        store: Ext.create('Rally.data.custom.Store', {
            data: stories,
            pageSize: 100
        }),
        columnCfgs: [
            {
               text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
                tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
            },
            {
                text: 'Name', dataIndex: 'Name'
            },
            //other columns...
        ]
    });
}

In my app when I click on the Name the field does not become editable as it is in the simple grid example.


Solution

  • The code can be modified as follows to add inline edit capability: set editor to 'textfield' for the Name column, set grid's selType to 'cellmodel', and instantiate CellEditing plugin.

    _createGrid: function(stories) {
             this.add({
                xtype: 'rallygrid',
                store: Ext.create('Rally.data.custom.Store', {
                    data: stories,
                    pageSize: 100
                }),
                columnCfgs: [
                    {
                       text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
                        tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
                    },
                    {
                        text: 'Name', dataIndex: 'Name', editor: 'textfield'
                    }
            //other columns...
                ],
                selType: 'cellmodel',
                plugins: [
                    Ext.create('Ext.grid.plugin.CellEditing', {
                    clicksToEdit: 1
                    })
                ]
    
            });
        }
    

    Please see documentation on Ext.grid.plugin.CellEditing here