Our blazing fast Grid component built with pure JavaScript


Multi select combo editor height

Post Reply

Post by gregc »

I really really like the multiSelect combo editor, it is sleek. As a "nice to have" it would be great if I could influence the editor height when editing. 32 pixels is not enough as you get the tiny scrollbars.

Image

Perhaps there would be a way to reduce the padding or something. Otherwise I really need to define all my rows as min height 40 or more.

Post by Animal »

Two choices.

One is to make the field scroll left/right, so that a magic mouse/trackpad scroll gesture will scroll it left and right:

Sp the column would have

editor: {
    type: 'combo',
    store: YOURSTORE,
    multiSelect: true,
    chipView: {
        scrollable: {
            overflowY: false,
            overflowX: 'hidden-scroll'
        },
        style: {
            flexFlow: 'nowrap'
        }
    }
}

Configuring the Editor itself to not fit in the cell is not easy right now and that needs an improved API for customizability.

You can add your own Editor subclass which will do its own thing:

class MySpecialEditor extends Editor {
    startEdit(config) {
        // If we're editing the field that we want the editor to auto height for
        // We are *not* going to match the cell size.
        // But matching the width is still wanted.
        if (config.field === 'assigned') {
            this.width = config.target.offsetWidth;
        }
        config = {
            matchSize: config.field !== 'assigned',
            ...config
        };
        return super.startEdit(config);
    }
}

then, in the grid:

features: {
    cellEdit: {
        // Use our own Editor which knows when to refuse to be crushed into the cell.
        editorClass: MySpecialEditor
    }
}

I created a ticket to make this easier: https://github.com/bryntum/support/issues/2465

Post Reply