Our blazing fast Grid component built with pure JavaScript


Post by gregc »

I have a filter with drop down values that are descriptions that can be quite long.
The filter box doesn't grow though, it is only the width of the column when the column is first rendered.

as you can see below I can't distinguish between the values

Image

Last edited by gregc on Sun Jul 18, 2021 1:41 pm, edited 1 time in total.

Post by mats »

Just set https://bryntum.com/docs/grid/#Core/widget/Combo#config-pickerWidth to your desired value :)

{
            text       : 'City',
            field      : 'city',
            filterable : {
                filterField : {
                    type         : 'combo',
                    multiSelect  : true,
                    valueField   : 'name',
                    displayField : 'name',
                    cls          : 'city-combo',
                    pickerWidth  : 400,

Post by Animal »

Mats's suggestion will help you get a width that you like into the dropdown.

But looking at your screenshot, there's a lot of padding-left coming from somewhere for those list items. That's not the default, so you could gain some horizontal space. The default dropdown doesn't leave that big margin:

Screenshot 2021-07-19 at 11.19.23.png
Screenshot 2021-07-19 at 11.19.23.png (52.42 KiB) Viewed 950 times

Post by gregc »

Good point though I don't have a leading space in the cell edit drop down either, only in the column header filter, so your example is not the same. Not sure where it comes from, maybe a space for an icon image or something, nothing in my code explicitly adds it.


Post by saki »

We don't add the leading space either so it stays unknown until investigated. The picker may be a little tricky to inspect because it closes when it loses focus. You can use the following trick to keep it open:

In console type

setTimeout(()=>{debugger}, 5000)

Then click on trigger to show the picker and wait until 5s elapse. Then it can be investigated to find out where the padding-left (or other offending rule) comes from.


Post by gregc »

thats a neat trick. yeah its the space for the selected icon

Image


Post by Animal »

The List class only adds an icon element to its items if it is configured with multiSelect : true

How is that filterBar feature and its column configured?


Post by Animal »

OK, it is a multiSelect. So probably the Filter feature needs a little more configurability.

It's hardcoded to make that Popup which contains the field 16em wide which isn't really enough to hold a ChipView.

How about we add a popup config to the feature so you can change how it lays out the Popup?

https://github.com/bryntum/support/issues/3197


Post Reply