Serenity: 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_

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 16

Most upvoted comments

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!

ArsenioInojosa on Jul 24, 2020

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

JohnRanger on Jul 23, 2020

ok - what happens, when you act like in Video 2 and then double-click one of the column separators within such a not auto-resized grid?

Does it then auto-resize that particular column or not?

(Just trying to find out if the auto-resize feature is at all loaded and able to apply to the grid in such a case.)

Regards,

John

When I double-click on the column separator the grid is not auto-resized. Only this column is auto-resized.

ArsenioInojosa on Jul 23, 2020