Bryntum Support Forums

Posted: **Tue Jul 09, 2013 7:41 pm**

Hi,

I'd like to programmatically add and remove columns from ubergrid. Looking at the documentation it seems as if you can only do this for child columns, but I want to do this for the main column.

If possible, would there be an easy way to remove all of the columns and just add new ones?

I see that there is a plugin for headermenu, but what I'm trying to do is basically load different stores in the same grid.

Posted: **Tue Jul 09, 2013 9:08 pm**

Yes you can. You can see this demonstrated by our test suite. Open /tests/ and run this test:

014_add_remove.t.js

It shows you all you need to know

Posted: **Tue Jul 09, 2013 11:12 pm**

mats,

It looks like insertColumn and appendColumn only add children to existing columns in ubergrid. I want to add new main/primary columns.

I wrote something like this:
grid.columns.appendColumn({
header : 'TEST',
//dataIndex : 'CURRENCY',
width :300
});
grid.refresh();

and also tried

grid.columns.insertColumns(0,{
header : 'TEST',
//dataIndex : 'CURRENCY',
width :300
});
grid.refresh();

but it doesn't get configured as a column in ubergrid.

Posted: **Tue Jul 09, 2013 11:27 pm**

mats,

I think I figured out this issue. Please don't look into this.

Posted: **Wed Jul 10, 2013 1:19 am**

mats,

I've found out that if any of your columns are locked, you can't insert or append a new column to the grid. Is this something that you can fix?

Posted: **Wed Jul 10, 2013 8:39 am**

Can you post a test case demonstrating the problem you have?

Posted: **Wed Jul 10, 2013 4:46 pm**

In my case the code I've been testing with is:

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',

    requires: [
        'MyApp.view.MyToolbar'
    ],

    config: {
        layout: {
            type: 'fit'
        },
        items: [
            {
                xtype: 'ubergrid',
                columns: [
                    {
                        header: 'name',
                        dataIndex: 'name',
                        width: 100,
                        locked: true
                    },
                    {
                        header: 'field',
                        dataIndex: 'field',
                        width: 200
                    }
                ],
                id: 'grid'
            },
            {
                xtype: 'mytoolbar'
            }
        ]
    }

});
Ext.define('MyApp.view.MyToolbar', {
    extend: 'Ext.Toolbar',
    alias: 'widget.mytoolbar',

    config: {
        docked: 'top',
        items: [
            {
                xtype: 'button',
                itemId: 'mybutton',
                text: 'MyButton'
            }
        ],
        listeners: [
            {
                fn: 'onMybuttonTap',
                event: 'tap',
                delegate: '#mybutton'
            }
        ]
    },

    onMybuttonTap: function(button, e, eOpts) {
        var grid = Ext.getCmp('grid');
        grid.columns.appendColumn({
            header    : 'field2',
            dataIndex : 'field2',
            width     : 200
        });
    }

});

My guess is if you set the first column to be locked in 014_add_remove.t.js, it will not work either.

Posted: **Thu Jul 11, 2013 1:01 pm**

We have a new test created for this, investigation ongoing! Thanks for the report!

Posted: **Wed Jul 17, 2013 12:09 pm**

Should be fixed in the sources now. The cause was: http://www.sencha.com/forum/showthread. ... rect-order

Please try your code with tomorrow nightlies and let us know if it works now.

Bryntum Support Forums

Add and remove main columns from grid.

Add and remove main columns from grid.

Re: Add and remove main columns from grid.

Re: Add and remove main columns from grid.

Re: Add and remove main columns from grid.

Re: Add and remove main columns from grid.

Re: Add and remove main columns from grid.

Re: Add and remove main columns from grid.

Re: Add and remove main columns from grid.

Re: Add and remove main columns from grid.