Grid Frozen Columns rendering bugs

7 posts, 0 answers
  1. azbola
    azbola avatar
    13 posts
    Member since:
    Jun 2007

    Posted 25 Mar 2014 Link to this post

    Hi there,

    I have raised a support ticket about this, but am posting in the forum in case it helps other users, or they have any solutions...

    --

    We were hoping to use the new frozen columns in the 2014 Q1 version of the grid, but with about 10 minutes of testing using the Telerik DEMO site I managed to break the rendering.

    Try either of the following:

    - Multi line template in a cell
    - Aggregate footer template

    If you apply either of these then the rendering goes totally wrong, and this unfortunately makes this unusable for us.

    If you want, you can use this HTML in the DOJO to see the problem:


    <!DOCTYPE html>
    <html>
    <head>
        <base href="http://demos.telerik.com/kendo-ui/web/grid/frozen-columns.html">
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
        <script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
    </head>
    <body>
        <div id="example" class="k-content">
        <div id="grid"></div>

        <script>
            $(document).ready(function() {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        },
                        schema: {
                            model: {
                                fields: {
                                    OrderID: { type: "number" },
                                    ShipCountry: { type: "string" },
                                    ShipName: { type: "string" },
                                    ShipCity: { type: "string" },
                                    ShipAddress: { type: "string" }
                                }
                            }
                        },
                      aggregate: [{ field: "ShipCountry", aggregate: "count" }],
                        pageSize: 30
                    },
                    height: 430,
                    sortable: true,
                    reorderable: true,
                    groupable: true,
                    resizable: true,
                    filterable: true,
                    columnMenu: true,
                    pageable: true,
                    columns: [ {
                            field: "OrderID",
                            title: "Order ID",
                            locked: true,
                            lockable: false,
                            width: 120
                        }, {
                            field: "ShipCountry",
                            title: "Ship Country",
                          template: " I AM BIG <br />NEW LINE",
                          aggregates: ["count"],
                          groupFooterTemplate: "#= count # orders",
                                    footerTemplate: "#= count # orders",
                            width: 200
                        }, {
                            field: "ShipCity",
                            title: "Ship City",
                            width: 160
                        },{
                            field: "ShipName",
                            title: "Ship Name",
                          
                            locked: true,
                            width: 200
                        },  {
                            field: "ShipAddress",
                            lockable: false,
                            width: 300
                        }
                    ]
                });
            });
            </script>
    </div>


    </body>
    </html>
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 25 Mar 2014 Link to this post

    Hello David,

    Thank you for contacting us and reporting those issues. We will do our best to have them fixed as soon as possible. 

    Regarding the misalignment of the footer cells you can temporary add the following CSS selector in order to avoid it:
    <style>
     .k-grid-footer-wrap {
      display: inline-block;
     }
    </style>


    As a token of gratitude for bringing this problem to our attention I have also updated your Telerik points.

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. azbola
    azbola avatar
    13 posts
    Member since:
    Jun 2007

    Posted 25 Mar 2014 in reply to Nikolay Rusev Link to this post

    Great, thanks for your response Nikolay
  4. Bryan
    Bryan avatar
    2 posts
    Member since:
    Feb 2015

    Posted 16 Jun 2015 Link to this post

    Have there been any updates to this issue, in regards to using aggregates and locked columns in the same grid ? 
  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 18 Jun 2015 Link to this post

    Hello Bryan,

    This issue was resolved. You can see the following demo working with Q1 2015 SP2 version - http://dojo.telerik.com/@rusev/uluzO

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Jon
    Jon avatar
    27 posts
    Member since:
    Dec 2012

    Posted 29 Apr 2016 in reply to Nikolay Rusev Link to this post

    I'm experiencing this issue using the MVC wrappers and the ClientGroupFooterTemplate, in version 2016.1.412. When I set .Locked(true) on one or more columns, the Group Footer cells are all shifted one column to the left. If no columns are locked/fixed, the footer cells are in the correct columns. See the screenshot for an example.
  7. Jon
    Jon avatar
    27 posts
    Member since:
    Dec 2012

    Posted 29 Apr 2016 Link to this post

    I found my issue. I had some fixed columns, but had turned scrolling off. Enabling scrolling or turning off the fixed columns both resolve the alignment issue.
Back to Top