Strange resize/columns fit when multiple headers

[Daniel]

I have strange and unexpected behavior with my Grid with multiple headers (3 levels) when i resize window. 

Here is how it's look like: https://gyazo.com/969e62e758a1b583c06cdcc6af056acf

They dissapear after resize . I'm using  autoFitColumn() for all columns in Grid, and some cells keep width stable, but these with multiple headers has some problems.

 

var gridOptions = {
        pdf: {
            allPages: true,
            avoidLinks: true,
            paperSize: "A4",
            margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
            landscape: true,
            repeatHeaders: true,
            template: $("#page-template").html(),
            scale: 0.5,
            title: 'Raport dzienny'
        },
        columnMenu : true,
        groupable: true,
        scrollable: true,
        sortable: true,
        filterable: true,
        reorderable: true,
        lockable: true,
        resizable: true,
        dataSource:{
            data: this.data,
        },
        columns : options.columns || this.generateColumns(),
    };

This specific column: 

{
            title: 'Liczniki', columns: [
            {
                title: 'Kilometrzy', columns: [
                   {title: 'Początek', field: 'begin_km_counter', format: "{0:n2}"},
                   {title: 'Koniec', field: 'end_km_counter', format: "{0:n2}"}
            ]
            },
            {
                title: 'Motogodziny', columns: [
                   {title: 'Początek', field: 'begin_mth_counter'},
                   {title: 'Koniec', field: 'end_mth_counter'}
            ]
            },
            {
                title: 'Przepływomierz', columns: [
                   {title: 'Początek', field: 'begin_flowmeter_counter'},
                   {title: 'Koniec', field: 'end_flowmeter_counter'}
            ]
            }
        ]
        },

[Stefan]

Hello Daniel,

When the Grid width is reduced, columns with no widths may shrink to zero width. To prevent this behavior, set explicit pixel widths to all columns.

Please check the following information about the column widths of the Kendo UI Grid:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#widths

Let me know if you need additional assistance.

Regards,
Stefan
Telerik

[Daniel]

I fixed that. I didn't autoFit these columns. But now i see another strange behavior. When i have some hidden columns, and then i use autoFitColumn() on all not hidden columns, grid is kinda messy. Some columns have weird width, some have not assign width, footers width doesn't fit to columns width. 

If  i first use autoFitColumn() and then hide some columns, everythink is working, but it's so slow.

[Stefan]

Hello Daniel,

Please execute the autoFitColumn method on the dataBound event of the Grid to ensure the correct column widths will be applied, according to the loaded cell content.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

In addition, you may want to check the performance-related information and other notes for the autoFitColumn method of the Kendo UI Grid:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-autoFitColumn

Let me know if you need additional details.

Regards,
Stefan
Telerik