This is a migrated thread and some comments may be shown as answers.

Grid Frozen Columns rendering bugs

6 Answers 243 Views

Grid

This is a migrated thread and some comments may be shown as answers.

azbola asked on 25 Mar 2014, 10:32 AM

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>

6 Answers, 1 is accepted

answered on 29 Apr 2016, 05:51 PM

columnalignment.jpg

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.