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

Footers in grids with locked columns

2 Answers 562 Views

Grid

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

Brian Roth asked on 24 Mar 2014, 09:10 PM

I'm trying to hook up the new locked column functionality, and having some odd display behavior with my footers. It looks like the footer of non-locked columns are wrapping around underneath the locked footers instead of showing under the appropriate columns. I was able to reproduce this with the demo page by adding footer templates to the columns there (which can be seen below). Is this a bug or something that is not supported? In my case, I have some columns where I want to show the sum of the data in the footer if possible. Thanks for your help!

Regards,
Brian

<!DOCTYPE html>

<html>

<head>

<title>Frozen columns</title>

<meta charset="utf-8">

<link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">

<link href="../../../styles/kendo.common.min.css" rel="stylesheet">

<link href="../../../styles/kendo.rtl.min.css" rel="stylesheet">

<link href="../../../styles/kendo.default.min.css" rel="stylesheet">

<script src="../../../js/jquery.min.js"></script>

<script src="../../../js/kendo.web.min.js"></script>

<script src="../../content/shared/js/console.js"></script>

<script>

</script>

</head>

<body>

<a class="offline-button" href="../index.html">Back</a>

<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" }

}

},

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,

footerTemplate: "Order ID"

}, {

field: "ShipCountry",

title: "Ship Country",

width: 200,

footerTemplate: "Ship Country"

}, {

field: "ShipCity",

title: "Ship City",

width: 160,

footerTemplate: "Ship City"

},{

field: "ShipName",

title: "Ship Name",

locked: true,

width: 200,

footerTemplate: "Ship Name"

}, {

field: "ShipAddress",

lockable: false,

width: 300,

footerTemplate: "Ship Address"

}

]

});

</script>

</div>

</body>

</html>

2 Answers, 1 is accepted

Accepted

answered on 25 Mar 2014, 11:03 AM

Hello Brian,

Indeed this is a miss on our side. It will be addressed in next internal build. As a temporary workaround you can set the following CSS rule:

<style>

.k-grid-footer-wrap {

display: inline-block;

}

</style>

Here is an example for this: http://trykendoui.telerik.com/@rusev/aNeQ.

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!