AutocolumnSize problem in secondary Tab

Hello, I also have this problem. Columns do not display correctly when in a secondary tab.

But when you change any of the filters then the columns show fine.

I noticed that when you load the grid and there is no data to display then the columns resize and look good. The problem is when there is data the first time it loads.

Code:

` private autoSize;

    constructor(container: JQuery) {
        super(container);
    }

    protected createSlickGrid(): Slick.Grid {
        let grid = super.createSlickGrid();
        this.autoSize = new Slick.AutoColumnSize(true);
        grid.registerPlugin(this.autoSize);

        return grid;
    }

    protected markupReady() {
        super.markupReady();
        if (this.autoSize != null) {
            this.autoSize.resizeAllColumns();
        }
    }`

Thank you!

_Originally posted by @ArsenioInojosa in https://github.com/volkanceylan/Serenity/issues/2737#issuecomment-660420243_

[ArsenioInojosa]

Thank you very much @JohnRanger for your invaluable collaboration.

I’m going to study the slick.autocolumnsize.js file to determine what the differences are when running it on the main and secondary tabs. So far I have discovered a couple of interesting things, when I finish I will tell you the results.

Update:

The problem is that when the grid is not visible to the user then “var headerWidth = getElementWidth (el);” The function resizeAllColumns () returns 0.

Very thankful!

[JohnRanger]

Ok - the first test shows that the plugin is loaded and works on the correct grid - because the double-clicked separator resizes the left column. This is also one of the functions of the plugin.

So I still think that we are dealing here with a timing issue at the point in time when this.autoSize.resizeAllColumns() is executed.

Lets do a simple test:

within the markupReady() method, put the autoSize.resizeAllColumns() call within a setTimeout code block and give it a 5 second delay (5000) - like this:

protected markupReady() {
    super.markupReady();
    if (this.autoSize != null) {
        var _mythis = this;  // *** Store "this" in order to use it within the setTimeout callback ***
        setTimeout(function(){
             alert("hello here"); 
             _mythis.autoSize.resizeAllColumns();
            
        }, 5000);
    }
}`

Expected result: After 5 seconds after the grid shows up, an alert dialog shows “hello here” and after confirming the dialog, the columns of the grid should be auto-resized.

Please let me know the result.

Regards,

John