[REACT] Calendar List View Column Size

[skorer]

Hi,

I tried but I am getting an error;

list:{
            subGridConfigs : {
                normal: {
                    refreshFakeScroll() {
                        const
                            me              = this,
                            {
                                virtualScrollerWidth,
                                header,
                                footer,
                                scrollable
                            }               = me,
                            { style }       = me.element,
                            { style : vs }  = me.virtualScrollerElement,
                            // Cannot use scrollWidth because its an integer and we need exact content size
                            totalFixedWidth = [...header.contentElement.children].reduce(sumWidths, 0);
                

                    // Use a fixed scroll width so that when grid is empty (e.g after filtering with no matches),
                    // it is able to it maintain its scroll-x position and magic mouse swiping
                    // in the grid area will produce horizontal scrolling.
                    // https://github.com/bryntum/support/issues/3247
                    scrollable.scrollWidth = totalFixedWidth;
            
                    // This style property ensures all rows expand to accommodate the visible columns
                    style.setProperty('--total-column-width', `${totalFixedWidth}px`);
            
                    // Scroller lays out in the same way as subgrid.
                    // If we are flexed, the scroller is flexed etc.
                    vs.width = style.width;
                    vs.flex = style.flex;
                    vs.minWidth = style.minWidth;
                    vs.maxWidth = style.maxWidth;
                    header.scrollable.syncOverflowState();
                    footer.scrollable.syncOverflowState();
            
                    if (!me.collapsed) {
                        if (me.overflowingHorizontally) {
                            virtualScrollerWidth.style.width = `${scrollable.scrollWidth || 0}px`;
                            // If *any* SubGrids have horizontal overflow, the main grid
                            // has to show its virtual horizontal scrollbar.
                            me.grid.virtualScrollers.classList.remove('b-hide-display');
                        }
                        else {
                            virtualScrollerWidth.style.width = 0;
                        }
                    }
                }
            }
        },

list_error.png (126.31 KiB) Viewed 175 times

[Animal]

Add this to the top of the source module, or you could just use the function instead of the const;

const sumWidths = (t, e) => t + e.getBoundingClientRect().width;

[skorer]

It worked thanks. Last thing I want to ask is do you have any idea about how can I put an horizontal scroll bar to the bottom of the list?

[Animal]

It should have scrollbar. What browser is this?

It should look like this with a .b-virtual-scrollers element visible there at a height of <platform scrollbarsize> pixels:

Screenshot 2023-10-24 at 10.30.55.png (986.99 KiB) Viewed 170 times

[skorer]

You are right, there is a scrollbar. Thank for helping.

[Animal]

This ticket is still ongoing. It's proving difficult to make the changes play well with the existing grid features. I hope to have it in the next release, but i may still be battling it.