Grid: store remove function performance

[m.ferette]

Hello,

In our implementation of the Grid (Vanilla JS), we handle display variants, with which the users can choose which columns are displayed and in which order. There are approximately 150 columns available.
So when switching from one variant to another, we remove all columns from the 1st variant and add all the columns of the 2nd one.
This switch is not very performant at the moment. And we noticed that the great majority of the time is consumed by the removal operation.
I built an simple example to demonstrate the issue. It is a grid with 150 columns and 10 lines. You will see that the "Remove all columns" action takes roughly 10s, when the "Reset columns" is virtually immediate.

import { Grid } from '../../build/grid.module.js?450896';
import shared from '../_shared/shared.module.js?450896';
var oGrid = new Grid({
    appendTo : 'container',
    features : {
        group : false
    },
    columns : generateColumns(),
    data : generateData(),
    tbar: [
    	{
    		type: "button",
    		key: "removeColumns",
    		text: "Remove all columns",
    		onAction : () => {
    			oGrid.columns.remove(aAllRecords);
    		}
    	},
    	{
    		type:"button",
    		key: "addColumns",
    		text: "Reset Columns",
    		onAction : () => {
    			oGrid.columns.add(aAllRecords);
    		}
    	}
    ]
});

var aAllRecords = oGrid.columns.allRecords.slice();
aAllRecords.shift();

function generateColumns() {
    var aColumns = [];
    for (var i = 0; i < 150; i++) {
        aColumns.push({
        	text:"Column" + i,
        	field: "column" + i
        });
    }
    return aColumns;
}

function generateData() {
	var aData = [];
	for (var i = 0; i < 10; i++) {
		var mData = {
			id: "id" + i
		};
		for (var j = 0; j < 150; j++) {
			mData["column" + j] = "Data" + i + "Column" + j;
		}
		aData.push(mData);
	}
	return aData;
}

So can you please work on increasing the performance of the "remove" action?

Thanks.
Best regards,

[mats]

Confirmed, that's painfully slow. We'll get it fixed, thanks for reporting! https://github.com/bryntum/support/issues/3088

This is a faster way as a workaround:

 {
            type     : 'button',
            key      : 'removeColumns',
            text     : 'Remove all columns',
            onAction : () => {
                oGrid.columns.data = [{ text : 'foo' }];
            }
        },

[Animal]

To clear all children should be very quick.

The issue is using the remove API on a tree store. The remove API doesn't know that you are removing all records, and since it's a tree, every node has to be "plucked" from its parent separately because any arbitrary set of records can be passed to remove.

You can use columns.rootNode.clearChildren()

The clearChildren method knows that there's a single, contiguous block and fires only one remove event, so this will work for you. It's currently undocumented, but you can use it, so along with setting the data property, you should be able to continue.

clearChildren will be a public method in the next version. There will also be a public replaceChildren method which likewise will know that it's adding a contiguous record set, and will only fire one add event.