Strange resize/columns fit when multiple headers

4 posts, 0 answers
  1. Daniel
    Daniel avatar
    13 posts
    Member since:
    May 2016

    Posted 09 Jun 2016 Link to this post

    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'}
                ]
                }
            ]
            },

  2. Stefan
    Admin
    Stefan avatar
    3001 posts

    Posted 13 Jun 2016 Link to this post

    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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Daniel
    Daniel avatar
    13 posts
    Member since:
    May 2016

    Posted 14 Jun 2016 in reply to Stefan Link to this post

    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.

  4. Stefan
    Admin
    Stefan avatar
    3001 posts

    Posted 16 Jun 2016 Link to this post

    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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top